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
Related
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'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';
I'm trying to import the createjs lib into my react project.
So I installed it via npm install createjs --save
And there is a folder called createjs in node_modules.
But when I try to import it with require("createjs") it says:
"Module not found: Can't resolve 'createjs.js' in '...client/src'"
my package.json looks like this:
"dependencies": {
"createjs": "^1.0.1",
"createjs-easeljs": "^0.8.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-nav2djs": "0.0.3",
"react-scripts": "3.0.1",
"ros2d": "^0.9.0",
"roslib": "^1.0.1",
"vb-react-nav2djs": "0.0.4"
}
What am I doing wrong?
While trying to run some example code, I get a compilation error;
"Module not found: Can't resolve 'react-leaflet' in 'C:\Users...\my-app\src\map'"
I'm trying to do this with react and typescipt, and use "react-leaflet"
I've already tried installing both types#react-leaflet and react-leaflet
Here are my dependencies:
"dependencies": {
"#types/jest": "24.0.15",
"#types/leaflet": "^1.4.4",
"#types/node": "12.0.8",
"#types/react": "16.8.20",
"#types/react-dom": "16.8.4",
"#types/react-leaflet": "^2.2.1",
"leaflet": "^1.5.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"save": "^2.4.0",
"typescript": "3.5.2"
}
You haven't added the react-leaflet dependency, only the types.
Run npm i react-leaflet to install the actual package.
npm i leaflet
Run this command also in terminal and it will work