Asp.Net Core with react and material-ui - reactjs

I create an Asp.Net Core project with the react template. I then proceed to install material-ui with the help of this page. I got some dependency issues, so I had to update the react and react-dom package followed up with updating some related packages and ending up with this package.json configuration:
{
"name": "MaterialUITest",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "4.6.0",
"#types/react": "15.0.35",
"#types/react-dom": "15.5.1",
"#types/react-hot-loader": "3.0.3",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/webpack-env": "1.13.0",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react": "16.4.1",
"react-dom": "16.4.1",
"react-hot-loader": "3.0.0-beta.7",
"react-router-dom": "4.3.1",
"style-loader": "0.18.2",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2"
},
"dependencies": {
"#material-ui/core": "^1.2.3",
"#material-ui/icons": "^1.1.0"
}
}
Now if I go ahead and add this to the beginning of Counter.tsx:
import Paper from '#material-ui/core/Paper'
Everything seems fine, I get no errors nor do I get notified that something went wrong. So I proceed to start the program and the next thing I get is the debugging error view telling me it is expecting some signs:
ERROR in [at-loader] ./node_modules/#material-ui/core/index.d.ts:57:34
TS1005: ')' expected.
ERROR in [at-loader] ./node_modules/#material-ui/core/index.d.ts:57:63
TS1005: '(' expected.
ERROR in [at-loader] ./node_modules/#material-ui/core/index.d.ts:57:67
TS1005: ',' expected.
ERROR in [at-loader] ./node_modules/#material-ui/core/index.d.ts:57:85
TS1005: '(' expected.
... and so on
I tried to update the pre-installed packages, but that just gave me more dependency issues which I could not resolve.
If anyone could try and create a Project that runs smoothly with Asp.Net Core, react and material-ui, I'd be thankful if you'd let me know how.

Fixed with the new Project Template, update to .Net Core 2.1 and Visual Studio 15.7

Related

React Boostrap - TypeError: Cannot read property 'bool' of undefined

I have created a new react app with react version as 16.6.3.
I added the react-bootstrap version0.28.5. However when i run my app, i get "React Boostrap - TypeError: Cannot read property 'bool' of undefined "error.
This is the package.json:
"dependencies": {
"#types/react-router-dom": "^4.3.1",
"axios": "^0.18.0",
"babel": "^6.5.2",
"bootstrap": "^3.3.7",
"file-saver": "^2.0.0",
"react": "^16.6.3",
"react-bootstrap": "^0.28.5",
"react-dom": "^16.6.3",
"react-overlays": "^0.7.0",
"react-router": "^3.2.0",
"react-router-dom": "^4.2.2",
"react-scripts-scss-ts": "2.17.1",
"react-search-input": "^0.11.3"
}
I also ran "npm dedupe" to find any duplicate issues but with no luck. Is there any way i could fix this issue?

Many Internal Server Errors

Due to some package incompatibilities I have updated my package.json to the latest version for most of the entries, however now when I start the application it displays this long list of errors in the browser:
An error occurred while starting the application.
AggregateException: One or more errors occurred. (Dll Reference Plugin Invalid Options
options.manifest.content['./node_modules/fbjs/lib/invariant.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/fbjs/lib/warning.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/react-dom/lib/reactProdInvariant.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/object-assign/index.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/react-dom/lib/ReactDOMComponentTree.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/fbjs/lib/ExecutionEnvironment.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/jquery/dist/jquery.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/react/react.js']['meta'] is an invalid additional property
And it just goes on and on for about 500 errors. There were no compile errors when the project was built. Here is my package.json:
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "^4.7.2",
"#types/react": "~16.0.2",
"#types/react-dom": "~16.0.9",
"#types/react-hot-loader": "~4.1.0",
"#types/react-router": "~4.4.0",
"#types/react-router-dom": "~4.3.1",
"#types/seamless-immutable": "^7.1.1",
"aspnet-webpack-react": "~4.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react-hot-loader": "~4.3.12",
"react-router-dom": "~4.3.1",
"style-loader": "0.18.2",
"typescript": "~3.1.6",
"url-loader": "0.5.9",
"webpack": "4.25.1",
"webpack-hot-middleware": "2.18.2",
"#types/webpack-env": "1.13.0",
"aspnet-webpack": "3.0.0",
"webpack-dev-middleware": "3.4.0",
"#types/deep-freeze": "^0.1.1",
"#types/deep-freeze-es6": "^1.0.0",
"#types/material-ui": "^0.20.4",
"#types/react-datepicker": "~1.1.7",
"#types/react-virtualized": "~9.18.7",
"a-react-timepicker": "~2.0.0"
},
"dependencies": {
"deep-freeze-es6": "https://registry.npmjs.org/deep-freeze-es6/-/deep-freeze-es6-1.0.1.tgz",
"history": "https://registry.npmjs.org/history/-/history-4.6.3.tgz",
"react-datepicker": "~1.8.0",
"react-timekeeper": "~1.0.9",
"react-virtualized": "~9.21.0",
"seamless-immutable": "^7.1.2",
"react": "~16.6.0",
"react-dom": "~16.6.0",
"moment": "2.20.0"
}
Is anyone familiar with why this is happening? I've searched multiple posts and it seems like people always just have a couple errors. Not 500.
I don't know if you solved it or not , but I had the same problem when I updated to Webpack 4 . The solution was to to run the DllPlugin from webpack.config.vendor.js so that vendor-manifest.json would get the latest attributes.
To do this, in packages.json put this line in the scripts section
"scripts": {
"build": "webpack --config webpack.config.vendor.js",
}
and from console run npm run build

using office-ui-fabric within dotnet core &&react application

I have a dotnet core && react application , in which I'd like to use Office-ui-fabric library .
package.json
{
"name": "app_fabric_test",
"private": true,
"version": "0.0.0",
"devDependencies": {
"#types/history": "4.6.0",
"#types/react": "15.0.35",
"#types/react-dom": "15.5.1",
"#types/react-hot-loader": "3.0.3",
"#types/react-router": "4.0.12",
"#types/react-router-dom": "4.0.5",
"#types/webpack-env": "1.13.0",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"awesome-typescript-loader": "3.2.1",
"bootstrap": "3.3.7",
"css-loader": "0.28.4",
"event-source-polyfill": "0.0.9",
"extract-text-webpack-plugin": "2.1.2",
"file-loader": "0.11.2",
"isomorphic-fetch": "2.2.1",
"jquery": "3.2.1",
"json-loader": "0.5.4",
"react": "15.6.1",
"react-dom": "15.6.1",
"react-hot-loader": "3.0.0-beta.7",
"react-router-dom": "4.1.1",
"style-loader": "0.18.2",
"typescript": "2.4.1",
"url-loader": "0.5.9",
"webpack": "2.5.1",
"webpack-hot-middleware": "2.18.2"
},
"dependencies": {
"office-ui-fabric-react": "^6.37.1"
}
}
It works until I start to use the lib, I tried to import
import { DefaultButton, PrimaryButton } from 'office-ui-fabric-react/lib/Button';
So I get this result :
It seems that the page works fine in background, but it is hidden by the error message popup.
So How can I fix this problem ? otherwise how can I avoid this type of errors to be shown ?
thanks,
This problem has been fixed in new template using update asp.net core 2.1 and visual studio 15.7

Regarding Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead

I am running jest with enzyme but I am getting the above warning specifically from react-router dependency in the class I am trying to test. My question is why I am getting this warning as I have already downgraded my react version to 15.1.1.
Package.json
"dependencies": {
"axios": "^0.16.1",
"babel": "^6.23.0",
"babel-polyfill": "^6.23.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.5.0",
"bootstrap": "^3.3.5",
"boron": "^0.2.3",
"browserify": "^13.0.1",
"connect-history-api-fallback": "^1.2.0",
"debounce": "^1.0.0",
"envify": "^3.4.0",
"es6-promise": "^3.2.1",
"font-awesome": "^4.6.3",
"jquery": "^2.2.4",
"jwt-decode": "^2.2.0",
"minimist": "^1.2.0",
"node-fetch": "1.6.3",
"node-notifier": "^4.6.0",
"object-assign": "^4.1.0",
"react": "^15.1.0",
"react-autosuggest": "^3.8.0",
"react-dnd": "^2.1.4",
"react-dnd-html5-backend": "^2.1.2",
"react-document-title": "^2.0.3",
"react-dom": "^15.1.0",
"react-dropdown": "^1.0.4",
"react-quill": "^0.4.1",
"react-router": "^2.4.1",
"react-select": "^1.0.0-beta13",
"react-select2-wrapper": "^0.6.1",
"react-tag-input": "^3.0.3",
"reflux": "0.4.1",
"request": "^2.81.0",
"request-promise": "^4.2.0",
"toastr": "^2.1.0",
"underscore": "^1.8.3",
"vinyl-source-stream": "^1.1.0",
"watchify": "^3.7.0",
"webpack": "^2.4.1",
"whatwg-fetch": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-jest": "^6.0.1",
"babel-loader": "^7.0.0",
"babelify": "^7.3.0",
"css-loader": "^0.28.0",
"del": "^2.2.0",
"enzyme": "^2.1.0",
"eslint": "^3.19.0",
"eslint-config-defaults": "^9.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-react": "^6.10.3",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.11.1",
"identity-obj-proxy": "^3.0.0",
"jest": "^15.1.1",
"jest-cli": "^15.1.1",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"node-sass": "^4.5.2",
"react-addons-test-utils": "^15.1.1",
"react-bootstrap": "^0.29.5",
"regenerator-runtime": "^0.10.5",
"sass-loader": "^6.0.3",
"scss-loader": "0.0.1",
"url-loader": "^0.5.8",
"yargs": "^7.1.0"
},
The full stack trace of error is:
console.error node_modules\fbjs\lib\warning.js:36
Warning: ReactTestUtils has been moved to react-dom/test-utils. Update references to remove this warning.
FAIL web\test\testClass.test.js
● Test suite failed to run
Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead.
at CustomConsole.Object.<anonymous>.console.error (web\test\jestSetup.js:12:11)
at printWarning (node_modules\fbjs\lib\warning.js:36:17)
at warning (node_modules\fbjs\lib\warning.js:60:22)
at Object.get [as PropTypes] (node_modules\react\lib\React.js:95:49)
at Object.<anonymous> (node_modules\react-router\lib\InternalPropTypes.js:9:18)
at Object.<anonymous> (node_modules\react-router\lib\PropTypes.js:12:26)
at Object.<anonymous> (node_modules\react-router\lib\index.js:15:19)
at Object.<anonymous> (web\js\components\common\toolBar.jsx:2:20)
at Object.<anonymous> (web\test\testClass.test.js:5:16)
at process._tickCallback (internal\process\next_tick.js:103:7)
I dont want to upgrade from Router v2 to latest version 4 as I have to do lot of upgradation in my code. Why this error is coming although I am not using latest version of React where this package was moved from 'react' to 'prop-types'.
As of React 15.5.0 PropTypes is no longer apart of the react package and is now its own separate package. So if you want to get rid of the warning you'll need to npm install prop-types and then import PropTypes from 'prop-types'
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes
Same goes for TestUtils:
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#react-test-utils
If you downgraded your React node module be sure to remove your node_modules directory and reinstall them. It is most likely one of your other dependencies that upgraded too. Since you aren't pinning your versions you might end up in the same spot. I would pin your version or use yarn to generate a yarn.lock file.
React Router has updated the packages to handle the React library changes for 'createClass' and PropTypes.
Version 2
Doesn't look like they updated this one. Makes sense because version 4 is most current.
Version 3
https://github.com/ReactTraining/react-router/releases/tag/v3.0.4
(though you could likely use 3.0.5 safely)

Interface 'NodeModule' cannot simultaneously extend types 'Module' and 'Module'

I'm use React.
After create-react-app --typescript I've added few libraries to package.json after that I received exception in runtime.
TypeScript error in D:/catalog/node_modules/#types/node/globals.d.ts(223,11):
Interface 'NodeModule' cannot simultaneously extend types 'Module' and 'Module'.
Named property 'hot' of types 'Module' and 'Module' are not identical. TS2320
221 | declare var require: NodeRequire;
222 |
> 223 | interface NodeModule {
| ^
224 | exports: any;
225 | require: NodeRequireFunction;
226 | id: string;
I tried
1) remove node_moduls/install again
2) clear cache
Fortunatly my project builds, but exception appear in runtime
My package.json
{
"dependencies": {
"#types/bootstrap": "^4.2.0",
"#types/faker": "^4.1.4",
"#types/node": "12.11.2",
"#types/parcel-env": "^0.0.0",
"#types/ramda": "^0.25.48",
"#types/react-dom": "16.9.2",
"#types/react-router": "^4.4.3",
"#types/react-router-dom": "^4.3.1",
"#types/recompose": "^0.30.3",
"#types/styled-components": "4.1.16",
"react": "^16.10.2",
"react-dom": "^16.10.2",
"react-scripts": "3.2.0",
"remotedev": "^0.2.9",
"yarn-deduplicate": "^1.1.1"
},
"devDependencies": {
"#types/react": "16.8.19",
"#types/enzyme": "^3.9.0",
"#types/enzyme-adapter-react-16": "^1.0.5",
"#types/jest": "^23.3.10",
"#types/webpack": "^4.4.24",
"#types/webpack-env": "^1.13.6",
"awesome-typescript-loader": "^5.2.1",
"cross-env": "^5.2.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"lerna": "^3.15.0",
"prettier": "^1.15.3",
"tslint": "^5.12.0",
"tslint-config-prettier": "^1.17.0",
"tslint-eslint-rules": "^5.4.0",
"tslint-loader": "^3.5.4",
"tslint-plugin-prettier": "^2.0.1",
"tslint-react": "^3.6.0",
"typescript": "3.6.4",
"typescript-plugin-styled-components": "^1.0.0"
},
"resolutions": {
"#types/react": "16.8.19"
},
}
React/typescript/yarn.
Try updating #types/webpack-env to latest version. Worked for me.
This usually means that the version of #types/node you've specify in your package.json's devDependencies is incompatible with the one used under the hood by one of your dependencies.
For instance you will get this error if you've specified "#types/node": "13.9.1" but use a "#nestjs/cli": "^7.0.0" because that latter lib is using itself "#types/node": "12.12.31".
A workaround for this is to lower your the #types/node version of your project to the lowest common denominator, so "12.12.31" in this example.
After moved all #types to devDependencies exception doesn't appear

Resources