I recently upgraded my react app - initially created with CRA, but i'm getting an error i can't figure out how to solve :
ERROR in ./node_modules/dotenv/lib/main.js 24:11-24
Module not found: Error: Can't resolve 'fs' in '/project/frontend-react/node_modules/dotenv/lib'
EDIT:
what am I doing to get this error : npm start
where do I get that error : in the browser, the app is not loading at all
and in regard to the error it's really all i'm getting
Any help welcome, as i'm lost despite quiet a lot of research...
Well, I was using dotenv on the app, removing it cleared the error...
When I add a new React component to my NextJS app (React, TypeScript and GraphQL), my local development environment suddenly breaks with this cryptic error:
wait - compiling...
error - ./node_modules/busboy/lib/main.js:1:0
Module not found: Can't resolve 'fs'
null
When I stash my new component, everything works fine. I'm trying to figure out what it is in my new component that's triggering this error.
Relevant dependencies:
#apollo/client: ^3.2.5
apollo-server-micro: ^2.18.2
graphql: ^15.4.0
next: 10.0.0
react: 17.0.1
react-dom: 17.0.1
Turns out I was importing gql from the wrong package. As I'm building both the server and the client in one app, I have to be careful importing the right methods from the right packages.
This line from my imports caused the error:
import { gql } from "apollo-micro-server
Changing the line to this fixed the error:
import { gql } from "#apollo/client"
I'm following using this codesandbox as a guide with my React project and receiving this error:
./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Can't resolve 'TimelineMax'
Assuming I copied everything from that sandbox to my local files, why am I getting that error?
I'm using Create-react-app btw.
animation.gsap.js requires TimelineMax module so try importing 'TimelineMax' module
import { TimelineMax} from 'gsap/src/uncompressed/TweenMax.js';
also you can refer to github solution
I'm trying to use the react-dropdown-input library in my react project.
(https://www.npmjs.com/package/react-dropdown-input)
I used npm i react-dropdown-input and it installed.
But when I run my project, I get this errors:
ERROR in ./~/react-dropdown-input/index.js Module not found: Error: Can't resolve 'react/addons' in 'path\node_modules\react-dropdown-input'
And this one too
ERROR in ./~/react-dropdown-input/index.js
Module not found: Error: Can't resolve 'react/lib/joinClasses' in 'path\node_modules\react-dropdown-input'
I also tried to run this command: npm install #types/react-dropdown-input but that library doesn't exists.
This is my import line:
import DropdownInput from "react-dropdown-input";
In my code it also says this:
Could not find a declaration file for module 'react-dropdown-input'.
Does anyone knows why this is happening and how to solve this?
Tested on npm#6.4.1, node#10.13.0. It fails.
I tried cloning it. Looks like library in not maintained. Its last commit was around 5 years back.
You can have a look at React Autosuggest. Its provides exact features you are looking for.
Hope this helps.
React noob here. Trying to clone and run https://github.com/strangebnb/react-airbnb
I clone. run npm install. Then webpack but I get
ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-37
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventConstants' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 22:21-56
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginUtils' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 23:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPropagators' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 24:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/SyntheticUIEvent' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 25:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/ViewportMetrics' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58
ERROR in ./~/react-portal/build/portal.js
Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/tom/node_modules/react-portal/build
# ./~/react-portal/build/portal.js 17:29-71
I found https://github.com/thereactivestack/meteor-webpack/issues/21 (I see this is very recent, read: yesterday), and after messing around with my packages.json, changing react, react-dom, material-ui version numbers and running npm i --save react-tap-event-plugin, I got down to 'only' 1 error message
ERROR in ./~/react-portal/build/portal.js
Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/react-airbnb/node_modules/react-portal/build
# ./~/react-portal/build/portal.js 17:29-71
I'm pretty new and I'm not sure how to go about fixing this. Any hints greatly welcomed.
Thanks
Due to update in React, react-tap-event-plugin breaks
Change react-tap-event-plugin to ^2.0.0 in your package.json if using react version ^15.4.0.
I forked that repo and fixed this issue in my repo. Also, sent pull request to the owner of original repo. Here's link to my forked repo:
https://github.com/pankajvishwani/react-airbnb
If you don't want to clone my repo, you can add the following in webpack.config.js:
var reactDomLibPath = path.join(__dirname, "./node_modules/react-dom/lib");
var alias = {};
["EventPluginHub", "EventConstants", "EventPluginUtils", "EventPropagators",
"SyntheticUIEvent", "CSSPropertyOperations", "ViewportMetrics"].forEach(function(filename){
alias["react/lib/"+filename] = path.join(__dirname, "./node_modules/react-dom/lib", filename);
});
module.exports = {
...
resolve: {alias: alias},
...
}
UPDATE: As of React 16 the react-tap-event-plugin is deprecated and no longer required https://www.npmjs.com/package/react-tap-event-plugin
Old solution redundant as of React 16
Updating the react tap event plugin to over 2.0.1 will fix your issue if you're using React 15.4.0.
A new React version has been released (https://github.com/facebook/react/blob/master/CHANGELOG.md), and I read recently that there have been big changes where react-dom still secretly lived on in the react package but is now being removed. If you read 15.4.0, the first point: 'React package and browser build no longer "secretly" includes React DOM. (#sebmarkbage in #7164 and #7168)'
Also reading the tap event plugins npm docs: Only the latest tap event plugin (v2.0.1 currently) supports React 15.4+. https://www.npmjs.com/package/react-tap-event-plugin
Check the version of React and react-tap-event-plugin.
npm list --depth=0
In the short term, you could fix React to a specific earlier version.
If your package.json file contains something like:
"react": "^15.3.2",
in the dependencies section, you could change it to say
"react": "=15.3.2”,
For react 16+ react-tap-event-plugin is not required anymore:
react-tap-event-plugin