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
Related
I am trying to test a react typescript project using jest but it's giving a confusing error:
Error image
Here is my package.json:
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.5",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.4.1",
"#types/node": "^16.11.26",
"#types/react": "^17.0.43",
"#types/react-dom": "^17.0.14",
"jest": "^27.5.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"ts-jest": "^27.1.4",
"typescript": "^4.6.3",
"web-vitals": "^2.1.4",
},
"devDependencies": {
"#types/react-test-renderer": "^18.0.0",
"react-test-renderer": "^18.1.0"
}
I wrote this basic test which gives the error:
import renderer from 'react-test-renderer'
import AddShipmentButton from './AddShipmentButton'
it('works', () => {
const tree = renderer.create(<AddShipmentButton />).toJSON()
expect(tree).toMatchSnapshot()
})
I had to install the dependencies using --legacy-peer-deps. What could be the issue? Thanks in advance.
The problem was that I installed the latest version of react-test-renderer v18.0.1 when the React version is v17.0.2. Installing react-test-renderer version 17.0.2 solved this issue.
Upgrade your app dependencies like this
"react": "~18.0.0",
"react-dom": "^18.0.0",
"react-test-renderer": "^18.0.0"
import is wrong as defined on React docs, try with this way
import TestRenderer from 'react-test-renderer';
import AddShipmentButton from './AddShipmentButton'
it('works', () => {
const tree = TestRenderer.create(<AddShipmentButton />).toJSON()
expect(tree).toMatchSnapshot()
})
Read usage of TestRenderer here
Make sure you are using the same version of react and react-test-renderer
You can change the version of node package using npm install [package-name]#[version-number]
I updated my app to React v18, and there's an error when installing styled-components and redux-toolkit. React v18 doesn't support these libraries? Or did I install something wrong?
here is my dependencies
"dependencies": {
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^12.0.0",
"#testing-library/user-event": "^13.2.1",
"#types/jest": "^27.0.1",
"#types/node": "^16.7.13",
"#types/react": "^17.0.20",
"#types/react-dom": "^17.0.9",
"react": "^18.0.0-rc.0",
"react-dom": "^18.0.0-rc.0",
"react-redux": "^8.0.0-beta.1",
"react-scripts": "5.0.0",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0"
},
add to the command --force or --legacy-peer-deps
I had the same problem and I edited my package.json file dependencies
from
"next": "12.1.2",
"react": "18.0.0",
"react-dom": "18.0.0"
to
"next": "10.2.0",
"react": "17.0.2",
"react-dom": "17.0.2"
then run npm i
It's working, for now, until redux-toolkit supports react18
My problem is the same when i install new project using react 18
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?
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