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
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
``` "dependencies": {
"#emotion/react": "^11.10.4",
"#emotion/styled": "^11.10.4",
"#material-ui/core": "^5.0.0-beta.5",
"#material-ui/lab": "^5.0.0-alpha.44",
"#mui/icons-material": "^5.10.6",
"#mui/material": "^5.10.8",
"#mui/material-next": "^6.0.0-alpha.57",
"#mui/x-data-grid": "^5.17.5",
"#reduxjs/toolkit": "^1.8.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"joi": "^17.6.2",
"joi-browser": "^13.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},```
I believe I found a hacky way of being able to use the loading button mui component from material-ui/lab. Is there a better way to download the necessary dependencies than what I have here? Will this run into any serious bugs down the road when I employ the loading button component? I used --legacy-peer-deps for #material-ui/lab#next. Will this break anything?
Since version 5, You should use npm install #mui/... instead of npm install #material-ui/... that is for versions up to 4.
This way the problem with --legacy-peer-deps will be resolved.
So for the LoadingButton case, easily run npm install #mui/lab, and in Your code import it like
import { LoadingButton } from '#mui/lab';
Everything you need from material ui is provided with this npm install:
npm install #mui/material #emotion/react #emotion/styled
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.
I'm using React Material UI and I get this error : Module not found: Can't resolve '#date-io/date-fns'.
Here are the dependencies that I have in my package.json file :
"dependencies": {
"#date-io/date-fns": "^2.0.0",
"#material-ui/core": "^4.9.5",
"#material-ui/pickers": "^3.2.10",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"date-fns": "^2.0.0",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.1.14",
"react-google-maps": "^9.4.5",
"react-hook-form": "^5.2.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0"
},
I tried installing the last version of date-io/date-fns, then tried the version 2.0.0 and version 1.0.0 and I still get the same error.
$ npm i date-fns#next #date-io/date-fns#1.x
reference:
https://github.com/mui-org/material-ui-pickers/issues/240
https://github.com/dmtrKovalenko/date-io/issues/33
Reference: https://material-ui-pickers.dev/getting-started/installation#peer-library
Important: For material-ui-pickers v3 use v1.x version of #date-io
adapters.
npm i #date-io/date-fns#1.x date-fns
// or
npm i #date-io/moment#1.x moment
// or
npm i -s #date-io/luxon#1.x luxon
// or
npm i -s #date-io/dayjs#1.x dayjs
You can check this Commands...
yarn add date-fns
or
npm i date-fns
In my code, I have used "import DateFnsUtils from "#date-io/date-fns/build/date-fns-utils", which caused "Module not found: Error: Can't resolve '#date-io/date-fns/build/date-fns-utils' ..." exception.
I have fixed this by importing from #date-io/date-fns'.
import DateFnsUtils from '#date-io/date-fns';
When I trying to import a library "react-leaflet", I get this error:
ERROR in ./node_modules/react-leaflet/lib/propTypes/map.js
Module not found: Error: Can't resolve 'leaflet' in 'D:\PycharmProjects\adminora\node_modules\react-leaflet\lib\propTypes'
# ./node_modules/react-leaflet/lib/propTypes/map.js 5:15-33
# ./node_modules/react-leaflet/lib/Map.js
# ./node_modules/react-leaflet/lib/index.js
EDIT: My package.json file:
"dependencies": {
"#types/react": "^16.0.36",
"babel-polyfill": "^6.26.0",
"classnames": "^2.2.5",
"history": "^4.7.2",
"jwt-decode": "^2.2.0",
"material-ui": "^1.0.0-beta.27",
"material-ui-icons": "^1.0.0-beta.17",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-block-ui": "^1.1.1",
"react-dom": "^16.2.0",
"react-leaflet": "^1.8.1",
}
You need to install the dependency packages aswell, try using
npm install leaflet prop-types react react-dom react-leaflet
delete node_modules folder and package-lock.json file and try below commands.
npm install
npm install leaflet react-leaflet --save