I´m facing a problem with DateRangePicker component from Mui. The thing is I have these dependencies:
"#date-io/date-fns": "^2.13.1",
"#emotion/react": "^11.7.1",
"#emotion/styled": "^11.6.0",
"#mui/lab": "^5.0.0-alpha.68",
"#mui/material": "^5.4.1",
"#mui/styled-engine-sc": "^5.4.1"
At the begining it worked but I removed the package-lock and the dependencies were updated to the last version. So, right now my RangeDatePicker desn't render the inputs and the whole component.
I can set "#mui/lab": "5.0.0-alpha.68" and it works but the idea is to use the last version and be able to upgrade to react 18.0.0
Any idea?
Thanks
Related
I recently upgraded React and several other packages to their latest versions, and every since, have been seeing warning messages in my Chrome console referring to bundled files instead of mapped files.
Example: at SelectInput (http://localhost:3000/static/js/bundle.js:119921:25) instead of at SelectInput (Select.tsx:123)
I'm using the latest versions of chrome and React Devtools.
Here are my dependency versions in package.json:
dependencies {
"#babel/runtime": "^7.18.3",
"#emotion/react": "^11.9.0",
"#emotion/styled": "^11.8.1",
"#types/node": "^15.12.2",
"#types/react": "^18.0.12",
"#types/react-dom": "^18.0.5",
"react": "^18.1.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"typescript": "^4.7.3"
}
I see this older solution Console logging error on bundle.js instead of React component but cannot find webpack.config.js to make updates, nor am I sure if it applies to these newer package updates.
How can I see the mapped file names in the chrome console?
I have found that webpack is default installed in create-react-app.
And I found that installing rewire allows at least to modify the webpack configuration.
That is not yet the full solution, but at least one step.
I recently moved my react repo into a single mono repo under /client. I installed the node_modules using yarn install when in /client
VS code intellisense is suggesting that I import from hoist-non-react-statics/node_modules/#types/react instead of from react when importing react hooks like useEffect and useRef. This leads to the below error when I compile using yarn start
Module not found: Can't resolve 'hoist-non-react-statics/node_modules/#types/react' in
I don't have 'hoist-non-react-statics' as a dependency in my package.json. My package.json dependencies are below:
"dependencies": {
"#auth0/auth0-react": "^1.6.0",
"#hookform/resolvers": "^2.7.1",
"#reduxjs/toolkit": "^1.6.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"#types/jest": "^24.0.0",
"#types/node": "^12.0.0",
"#types/qs": "^6.9.7",
"#types/react": "^16.9.0",
"#types/react-dom": "^16.9.0",
"#types/react-redux": "^7.1.7",
"#types/react-slider": "^1.3.1",
"#types/react-table": "^7.7.2",
"clsx": "^1.1.1",
"final-form": "^4.20.2",
"final-form-calculate": "^1.3.2",
"lodash": "^4.17.21",
"qs": "^6.10.1",
"rc-checkbox": "^2.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-final-form": "^6.5.3",
"react-hook-form": "^7.12.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-slider": "^1.3.1",
"react-table": "^7.7.0",
"react-truncate": "^2.4.0",
"typescript": "~4.1.5",
"yup": "^0.32.9"
},
It seems to be an issue with the #types relating to react. I filed an issue on the react-redux github repo.
yarn upgrade #types/react fixes it. For good measure, all of the packages should probably be upgraded with yarn upgrade --latest or just all of the types with yarn upgrade --latest --pattern "#types"
https://github.com/reduxjs/react-redux/issues/1806
After downgrading/upgrading VSCode and TypeScript versions I found out that this problem happens with the latest TypeScript versions (tested with 4.4.2, but could exist in whole 4.4.x branch). The problem does not seem to exist in 4.3.5. What you could do is the following:
Update VSCode to the latest version
Make sure you have TS 4.3.5 or older installed (either globally or in the workspace project)
Open any file with a .ts extension
Select the TypeScript version using the dropdown in the statusbar. You either want to select the Workspace version or your global version instead of VSCode's pre-installed version.
See image below for directions on last step:
I have the same exact problem, with my typescript project. With npm:
npm i #types/react#latest
then restart vscode
I have the same issue. Upgrading #types/react did not help. I had to remove it to fix the problem. Some how I still get type definition from somewhere. This just start happening on a project I have been working on for a year. Not sure if its coming from a VsCode update or upgrading react a couple weeks back.
The bug is happening on VsCode windows and mac.
This will be fixed with the new version (4.5) of TypeScript. See: https://github.com/microsoft/TypeScript/issues/45784
https://github.com/microsoft/TypeScript/pull/45792
Until this is released, you can use the next version.
npm i typescript#next
Don't forget to regenerate the lock file to make sure the right version is installed.
Can't resolve '#material-ui/lab/AdapterDateFns'
Can't resolve '#material-ui/lab/DateTimePicker'
Can't resolve '#material-ui/lab/LocalizationProvider'
I am getting these errors even after having installed #material-ui/lab
This works for me very well
npm install #mui/lab
In Material UI v5 you need to install #mui/lab.My dependencies are here :
"dependencies": {
"#mui/lab": "^5.0.0-alpha.54",
"#mui/material": "^5.2.1",
}
For more information check this link
I have a working codesandbox here: https://codesandbox.io/s/youthful-wave-8xjy4
Make sure both #material-ui/core and #material-ui/lab are at version "5.0.0-alpha.24" or above as I ran into the same import errors as you when following the guide at: https://next.material-ui.com/guides/pickers-migration/
// package.json
{
"dependencies": {
"#emotion/react": "11.1.5",
"#emotion/styled": "11.1.5",
"#material-ui/core": "5.0.0-alpha.24",
"#material-ui/lab": "5.0.0-alpha.24",
"date-fns": "2.17.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-scripts": "4.0.0"
},
}
Try running npm install #material-ui/core#next and npm install #material-ui/lab#next
This should move you to version 5.
If the need arises, delete the node_modules folder and run npm install.
Now if you look into the lab folder in node_modules/#material-ui, you will see the
Make sure that you installed a date management library. I think that #material-ui/lab/AdapterDateFns will be supported with the date-fns library.
date-fns installation
I read it at mui documentation for React Date Picker.
THIS WORKED FOR ME!!!!
I went into the node_modules to look for the specific files:
The location of the imports was not accurate so I changed them
accordingly
Then all these components are exported as a default so I removed
the curly braces and it worked for me.
I have installed these :
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#mui/lab": "^5.0.0-alpha.108",
"#mui/material": "^5.10.14",
This is my first time building an a-frame app with react and when running npm run-script build in my cmd prompt I come across this error.
Failed to compile.
static/js/main.9516bce8.js from UglifyJs
Unexpected token: operator (>) [./~/aframe/dist/aframe-master.js:57303,0][static/js/main.9516bce8.js:80512,32]
"aframe": "^1.0.4"
"webpack": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-2.6.1.tgz",
"integrity": "sha1-LgRX8KuxrF3zqxBsacZy8jZ4Xwc=",
"requires": {
"acorn": "^5.0.0",
"acorn-dynamic-import": "^2.0.0",
"ajv": "^4.7.0",
"ajv-keywords": "^1.1.1",
"async": "^2.1.2",
"enhanced-resolve": "^3.0.0",
"interpret": "^1.0.0",
"json-loader": "^0.5.4",
"json5": "^0.5.1",
"loader-runner": "^2.3.0",
"loader-utils": "^0.2.16",
"memory-fs": "~0.4.1",
"mkdirp": "~0.5.0",
"node-libs-browser": "^2.0.0",
"source-map": "^0.5.3",
"supports-color": "^3.1.0",
"tapable": "~0.2.5",
"uglify-js": "^2.8.27",
"watchpack": "^1.3.1",
"webpack-sources": "^0.2.3",
"yargs": "^6.0.0"
},
based on my research i'm guessing the version of uglify that i'm using doesn't support ES6
but I can't find anything online that can help me update or replace uglify-js to handle ES6
You can update it with
npm update uglify-js
which updates the package to the latest version that satisfies it version tag.
If this new version does not work, you can update it to a specific version
npm update uglify-js#3.0.5
or just update it to the latest one
npm update uglify-js#latest
Be careful because updates might break some existing code
terser-webpack-plugin works for me using webpack v4. it does support ES6+
We are using the following npm packages (along with many other):
"dependencies": {
"prop-types": "15.5.10"
},
"devDependencies": {
"autodll-webpack-plugin": "0.4.2",
"copy-webpack-plugin": "4.5.3",
"html-webpack-plugin": "3.2.0",
"react": "16.4.2",
"stats-webpack-plugin": "0.7.0",
"webpack": "4.20.2",
"webpack-bundle-analyzer": "3.0.2",
"webpack-cli": "3.1.2",
"webpack-dev-server": "3.1.9",
"webpack-visualizer-plugin": "0.1.11"
}
Here I just list all the Webpack related packages along with the version or React and PropTypes we are using. Obviously much more packages are used (which might cause the problem).
The problem is that since we updated Webpack from version 3 to 4, the PropTypes validation does not work.
Maybe the problem is not Webpack related but since the upgrade we do not receive console error in development mode if we omit an isRequired property.
The website runs flawlessly with webpack-dev-server.
We initiate the server using the following command:
webpack-dev-server --mode=development
In the code if I output the value of process.env.NODE_ENV to the console of the browser, I get development. Yet if I omit an isRequired property, the application does not warn in the console output of the browser as it did before using Webpack 3.
defaultProps is not used for the isRequired property.
Thank you for your help, and please let me know if you need more information for the investigation!