I'm attempting to upgrade my NextJS project from Material UI v4 to v5 using the official guide: https://mui.com/guides/migration-v4/
After following all the steps, when I start the server I get the following error in my console:
Module not found: Can't resolve 'react'
Import trace for requested module:
./../node_modules/#emotion/react/dist/emotion-react.browser.esm.js
./../node_modules/#mui/styled-engine/index.js
./../node_modules/#mui/system/esm/index.js
./../node_modules/#mui/core/Popper/Popper.js
./../node_modules/#mui/core/Popper/index.js
./../node_modules/#mui/core/index.js
./../node_modules/#mui/material/utils/index.js
./../node_modules/#mui/icons-material/utils/createSvgIcon.js
./../node_modules/#mui/icons-material/Menu.js
./components/global/LodAppBar.jsx
./pages/_app.jsx
I've tried deleting my node_modules folder and installing all modules fresh with no luck. I've ensured all of the #material-ui packages have been removed from my package.json file as well. These are my dependencies from package.json:
"dependencies": {
"#auth0/auth0-react": "^1.4.0",
"#date-io/date-fns": "^1.3.13",
"#emotion/react": "^11.5.0",
"#emotion/styled": "^11.3.0",
"#mui/material": "^5.0.6",
"#mui/styles": "^5.0.2",
"#sentry/react": "^6.11.0",
"#sentry/tracing": "^6.11.0",
"babel-preset-next": "^1.4.0",
"d3": "7.1.1",
"date-fns": "^2.20.2",
"date-fns-timezone": "0.1.4",
"dotenv": "^8.2.0",
"formik": "^2.2.6",
"logrocket": "^2.0.0",
"logrocket-react": "^4.0.1",
"luxon": "^1.26.0",
"next": "^11.1.1",
"next-optimized-images": "^2.6.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-swipeable-views": "^0.13.9"
},
The dependencies you provided works (at least on my machine). Try deleting yarn.lock and package-lock.json and do a fresh install again to update your packages to the newer versions.
Related
I have migrate the Metronic template from using CRA (Create React App) to Vite, and everything is working well but the SASS files are throwing an error.
This are the dependencies I am using in the project:
"dependencies": {
"#formatjs/intl-pluralrules": "^5.1.8",
"#formatjs/intl-relativetimeformat": "^11.1.8",
"#fortawesome/fontawesome-free": "^6.2.1",
"#popperjs/core": "^2.11.6",
"animate.css": "^4.1.1",
"apexcharts": "^3.36.3",
"axios": "^1.2.4",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.3",
"chart.js": "^4.2.0",
"clsx": "^1.2.1",
"formik": "^2.2.9",
"line-awesome": "^1.3.0",
"nouislider": "^15.6.1",
"prism-react-renderer": "^1.3.5",
"prism-themes": "^1.9.0",
"prismjs": "^1.29.0",
"qs": "^6.11.0",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-bootstrap": "^2.7.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
"react-inlinesvg": "^3.0.1",
"react-intl": "^6.2.5",
"react-query": "^3.39.3",
"react-router-dom": "^6.7.0",
"react-table": "^7.8.0",
"react-topbar-progress-indicator": "^4.1.1",
"sass": "^1.57.1",
"socicon": "^3.0.5",
"yup": "^0.32.11"
},
I have read that to use SCSS files in REACT I just need to install the sass package but I already have installed and the problem does not seems to be solved.
The exact error comes when importing this dependencies in a sass file:
// React vendors
#import '~socicon/css/socicon.css';
#import '~#fortawesome/fontawesome-free/css/all.min.css';
#import '~line-awesome/dist/line-awesome/css/line-awesome.css';
#import '~prism-themes/themes/prism-shades-of-purple.css';
#import '~bootstrap-icons/font/bootstrap-icons.css';
#import '~animate.css/animate.css';
Once I run the app Vite throws an error saying:
[vite] Internal server error: [postcss] Failed to find '~#fortawesome/fontawesome-free/css/all.min.css'
And when I go to node modules, the package is there, but SASS is unable to find it. Do you have you any solutions for this or have you ran in this issue too?
Btw, when commenting one line the next one throws the same error and so on.
Try to remove all ~ (tilde) from the import:
before:
#import '~socicon/css/socicon.css';
after:
#import 'socicon/css/socicon.css';
Because, vite use postCss instead of webpack
I got this error using reactstrap, bootstrap and nextjs
Server Error
SyntaxError: The requested module 'react-popper' is expected to be of type CommonJS, which does not support named exports. CommonJS modules can be imported by importing the default export.
For example:
import pkg from 'react-popper';
const { Manager, Popper, Reference } = pkg;
here is my package.json file
"#apollo/react-hooks": "^3.1.5",
"#apollo/react-ssr": "^3.1.5",
"#emotion/cache": "^11.5.0",
"#emotion/react": "^11.5.0",
"#emotion/server": "^11.4.0",
"#emotion/styled": "^11.3.0",
"#material-ui/core": "^4.12.3",
"#material-ui/icons": "^4.11.2",
"#popperjs/core": "^2.10.2",
"apollo-boost": "^0.4.7",
"apollo-link-http": "^1.5.17",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"express": "^4.17.1",
"graphql": "^15.0.0",
"isomorphic-fetch": "^2.2.1",
"js-cookie": "^2.2.1",
"next": "^12.0.1",
"next-apollo": "^3.1.10",
"next-with-apollo": "^5.2.1",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-popper": "^2.2.5",
"reactstrap": "^9.0.0"
I checked online some article suggests I install react-popper and #popperjs/core which I did but it didn't work
I encountered the same problem today. Try to update to the latest version of Node.js. That fixed the issue for me.
To confirm that you have the latest version installed type node -v into your terminal.
I had to downgrade reactstrap to reactstrap": "^8.10.1 if I wanted it to work with node v12.18.3
I also had an issue updating to Reactstrap v9 when using Next.js and Bootstrap.
Reactstrap v9 uses Bootstrap v5.
In order to update Reactstrap to v9, I had to do the following:
update node to latest stable version in package.json file
update bootstrap to version 5 in _document file: href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css"
install latest version fo reactstrap by running: npm install reactstrap#latest
I want to import table container for my react application. but I can't use it because of my material ui version error.
How i update my version to latest version. I suppose that it's the solution for that error.
I have already tried npm uninstall and npm uninstall, but didn't solve yet. Help me.
{
"name": "material-dashboard-react",
"version": "1.6.0",
"description": "Material Dashboard React. Coded by Creative Tim",
"private": false,
"main": "dist/index.js",
"dependencies": {
"#khanacademy/react-multi-select": "^0.3.3",
"#lls/react-light-calendar": "^2.0.7",
"#material-ui/core": "^3.9.4",
"#material-ui/icons": "3.0.2",
"#progress/kendo-react-dropdowns": "^3.4.1",
"#progress/kendo-react-intl": "^3.4.1",
"animate.css": "^3.7.2",
"axios": "^0.19.1",
"bootstrap": "^4.3.1",
"chartist": "0.10.1",
"classnames": "2.2.6",
"firebase": "^7.0.0",
"history": "4.7.2",
"jquery": "^1.9.1",
"material-ui-next-responsive-table": "^0.5.1",
"multi-select-react": "^0.1.8",
"multiselect-dropdown-react": "^1.0.5",
"multiselect-react-dropdown": "^1.2.4",
"perfect-scrollbar": "1.4.0",
"prettier": "1.16.4",
"prop-types": "15.7.1",
"react": "^16.8.1",
"react-bootstrap": "^1.0.0-beta.12",
"react-bootstrap-dialog": "^0.13.0",
"react-bootstrap-modal": "^4.2.0",
"react-chartist": "0.13.3",
"react-confirm-alert": "^2.4.1",
"react-datepicker": "^2.9.6",
"react-devtools": "^4.4.0",
"react-dialog": "^1.0.2",
"react-dom": "16.8.1",
"react-dropdown": "^1.6.4",
"react-dropdown-multiselect": "^1.0.0",
"react-dropdown-tree-select": "^2.1.1",
"react-google-maps": "9.4.5",
"react-light-calendar": "^1.0.3",
"react-multiple-select-dropdown": "^2.0.0",
"react-multiselect-checkboxes": "^0.1.1",
"react-notification-alert": "0.0.12",
"react-notifications": "^1.4.3",
"react-notifications-component": "^2.1.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"react-select": "^3.0.8",
"react-swipeable-views": "0.13.1",
"react-table-container": "^2.0.3",
"react-toastify": "^5.4.0",
#material-ui/core version ^3.9.4 doesn't have <TableContainer>
so you need to update #materia-ui/core version
latest version v4.9.2, so please update version and try
1) Go to package.json file in your project root.
2) Locate #material-ui/core in dependencies. Currently, you will see it as "#material-ui/core": "^3.9.4".
3) Now edit the version number. For example, "#material-ui/core": "^4.9.2".
4) Run npm install.
That's it!
You can follow this procedure for any dependency when you want to change the version. But make sure that those versions are compatible with each other dependencies (if any).
Good luck!
I had to make some changes on react-big-calendar module so I forked the project on github, made modifications and pushed. Then I used this command to install the new package:
npm install https://github.com/wafa-yahyaoui/react-big-calendar/tarball/master --save
The package figures out in the dependencies on package.json:
"dependencies": {
"#babel/runtime": "7.0.0-beta.55",
"#fortawesome/fontawesome-svg-core": "^1.2.10",
"#fortawesome/free-solid-svg-icons": "^5.6.1",
"#fortawesome/react-fontawesome": "^0.1.3",
"#material-ui/core": "^3.6.2",
"#material-ui/icons": "^2.0.3",
"#types/googlemaps": "3.30.11",
"#types/markerclustererplus": "2.1.33",
"ajv": "6.5.2",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"chartist": "^0.11.0",
"classnames": "2.2.6",
"emotion": "^10.0.5",
"enhanced-resolve": "^3.4.1",
"globalize": "^1.4.0",
"history": "^4.7.2",
"iban": "0.0.11",
"jwt-decode": "^2.2.0",
"moment": "2.22.2",
"perfect-scrollbar": "1.4.0",
"react": "^16.6.3",
"react-big-calendar": "https://github.com/wafa-yahyaoui/react-big-calendar/tarball/master",
"react-bootstrap-sweetalert": "^4.4.1",
"react-chartist": "^0.13.1",
"react-datetime": "^2.16.3",
"react-dom": "^16.6.3",
"react-facebook-pixel": "^0.1.2",
"react-ga": "^2.5.6",
"react-google-maps": "^9.4.5",
"react-jvectormap": "0.0.3",
"react-nouislider": "2.0.1",
"react-redux": "^5.1.1",
"react-router": "4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "1.1.4",
"react-spinners": "^0.4.7",
"react-swipeable-views": "0.12.15",
"react-table": "6.8.6",
"react-tagsinput": "3.19.0",
"react-transition-group": "^1.2.1",
"reactstrap": "^6.5.0",
"redux": "^4.0.1",
"redux-api-middleware": "^2.3.0",
"redux-persist": "^5.10.0",
"redux-persist-transform-filter": "0.0.18",
"redux-thunk": "^2.3.0",
"universal-cookie": "^3.0.7"}
I removed the node_modules folder, ran npm install but when running npm start I got this error:
./src/containers/apartments/calendar.js
Module not found: Can't resolve 'react-big-calendar' in
'/Users/wafayahyaoui/homereact/src/containers/apartments'
The imports on calendar.js file looks like this:
import React from "react";
import BigCalendar from "react-big-calendar";
What can be the source if the import error ? thank you
I was facing same issue. It took 3-4 hours to figure out what is problem. Here is a solution.
Run Command - npm run build - which build dist and lib folder.
remove dist and lib from .gitignore file.
Push your code.
If you see package-lock.json carefully, there is a line "main": "lib/index.js" which point to lib folder. But when you forked react-big-calendar repo, there was no lib folder in this repo, there was only src folder.
So it was cleared that fisrt you have to build code and push it on your repo.
I had a similar problem, so maybe it would be helpful to someone. main property from package.json was pointing to the built file which wasn't accessible, so I added a prepare script to run build before publishing the package.
"main": "dist/index.js",
"scripts": {
"prepare": "npm run build"
}
Use command :
npm i react-big-calendar
Package.json :
{
"private": true,
"scripts": {
...
},
"devDependencies": {
"axios": "^0.18",
"babel-preset-react": "^6.23.0",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.4",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"gh-pages": "^2.0.1",
"react-icons": "^3.2.2",
"react-redux": "^5.0.7",
"react-scripts": "1.1.5",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"styled-components": "^4.0.2"
},
"dependencies": {
"react-router-dom": "^4.3.1"
}
}
After deploying laravel app (with react) im having error:
Uncaught Error: Cannot find module "react-redux"
Im having blank site with above error in console.
Heroku installs only production dependencies on deployment by default, so the ones that are listed under dependencies key of you package.json by running npm install --production.
Move dependencies that are crucial to your app running from devDependencies to dependencies and that should solve your problem.
devDependencies are meant for things that support you in development, but are not required for the production copy of your app to run, like testing modules, for example.