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?
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 converting my project from JavaScript to TypeScript.
This is my current package.json dependencies:
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.10.5",
"#babel/node": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#babel/preset-typescript": "^7.10.4",
"babel-loader": "^8.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"babel-plugin-styled-components": "^1.10.7",
"clean-webpack-plugin": "^3.0.0",
"dotenv-webpack": "^2.0.0",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"ngrok": "^3.2.7",
"rimraf": "^3.0.2",
"webpack": "^4.44.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"#hot-loader/react-dom": "^16.13.0",
"core-js": "^3.6.5",
"firebase": "^7.17.1",
"md5": "^2.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react-hot-loader": "^4.12.21",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"regenerator-runtime": "^0.13.7",
"styled-components": "^5.1.1",
"uuid-v4": "^0.1.0"
}
}
I've imported react and react-dom and I'm getting the following warnings:
Could not find a declaration file for module 'react'. Try npm install #types/react if it exists or add a new declaration (.d.ts) file containing `declare module
The same for react-dom
Could not find a declaration file for module 'react-dom'. Try npm install #types/react-dom if it exists or add a new declaration (.d.ts) file containing `declare module
Infact, all the libraries I've imported so far are giving me the same warning:
index.tsx
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router} from 'react-router-dom';
import { Provider } from 'react-redux';
Do I need to install those #types/react to work with React with TypeScript ? Will I also need to install the #types/package for every library that I import? How does that work?
Yes. Or, well, to elaborate, to use a JS library with TypeScript, you'll need to
use a library that ships TS types itself (many do, these days), or
install the related #types/ package (which stem from DefinitelyTyped); tooting my own horn here, I wrote a package called autotypes that can help, or
write a .d.ts file for the library in your project's working cop, as below:
declare module 'some-library' {
export const doInterestingThings(): void;
}
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';
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
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