I keep getting this error in my react app
Compiled with problems: X
ERROR in ./ node_modules / dotenv / lib / main.js 1: 11 - 24
Module not found: Error: Can't resolve 'fs' in 'C: \Users\USER\Desktop\dapps\nefty\node_modules\dotenv\lib'
ERROR in ./ node_modules / dotenv / lib / main.js 3: 13 - 28
Module not found: Error: Can't resolve 'path' in 'C: \Users\USER\Desktop\dapps\nefty\node_modules\dotenv\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
ERROR in ./ node_modules / dotenv / lib / main.js 5: 11 - 24
Module not found: Error: Can't resolve 'os' in 'C: \Users\USER\Desktop\dapps\nefty\node_modules\dotenv\lib'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "os": false }
I after tried following the instruction provided by creating webpack.config.js and adding the fallback as show below
module.exports = {
resolve: {
fallback: { "path": require.resolve("path-browserify") },
},
}
There is no difference. I checked a similar issue on their github page and couldn't find a working fix(most were comments emphasizing the problem that didn't even point to a reasonable working solution)
Thanks to #user3133, i was able to understand the real issue. It seems dotenv should only be used in backend application like nodejs and not frontend apps like react.
When the error came up, it didn't point to where the error originated from, so I was basically "lost in the blizzard". I was able to figure out that the error came from referencing dotenv in the src directory which is the domain of react which overseas all of your react code.
So basically I was able to fix the issue by removing all lines of code that referenced dotenv in the src dir eg:
require('dotenv').config();
Note that it is okay to put it anywhere else outside the src directory.
Fun fact: react has it's own dotenv, which you can access by just putting REACT_APP_ in front of your env variable.
Read more here: Is it possible to use dotenv in a react project?
Related
I am working on adding a secret key to my react app. When I import the dependencies I get this error
ERROR in ./node_modules/#azure/keyvault-secrets/dist-esm/keyvault-common/src/parseKeyvaultIdentifier.js 3:0-27
Module not found: Error: Can't resolve 'url'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }
ERROR in ./node_modules/#azure/keyvault-secrets/dist-esm/keyvault-common/src/parseKeyvaultIdentifier.js 3:0-27 Module not found: Error: Can't resolve 'url'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to: - add a fallback
'resolve.fallback: { "url": require.resolve("url/") }' - install 'url'
If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "url": false }
Webpack 5 is the main source of the issue. It doesn't preload the Node.js polyfill.
To resolve this issue, try install npm install url, and add it into webpack.config.js:
module.exports = {
// ...
resolve: {
fallback: {
url: require.resolve("url/")
}
}
// ...
};
For reference : Resolve | webpack
Alternatively, Try to remove complete dependency tree and rebuild it using npm and react-scripts in a package. At least until I find a suitable solution, everything runs smoothly with json version 4.0.3.
And u can also fix this issue through
npm audit fix --force
For reference :
reactjs - Can't resolve 'url' in node_modules error when trying to access Azure Key Vault with React
Module not found: Error: Can't resolve 'url' in 'C:\Users\91702\Desktop\react-validation\node_modules\serve-static'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
- install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "url": false }
ERROR in ./node_modules/zlib/lib/zlib.js 1:0-43
Module not found: Error: Can't resolve './zlib_bindings' in 'C:\Users\91702\Desktop\react-validation\node_modules\zlib\lib'
Delete node_modules Folder & package-lock.json
Do npm install or npm i -force
Please see my answer here. Webpack5 does not polyfill core node.js modules by default anymore. The specific error you have posted would require you to npm i url and then add the fallback to the resolve block (mentioned in the linked answer) of:
resolve: {
fallback: {
"url": require.resolve("url/"),
},
Hope it helps.
I am beginner to react js. Please someone provide input for below issue.
In local system react js application is working fine but when i am generating build from Jenkins compilation is failing and its throwing below error.
Module not found: Error: Can't resolve 'timers' in '/usr/src/app/src/component'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
I installed it using npm i react-instagram-embed. It however gave me an error when i tried importing it in my project using the command:
import InstagramEmbed from 'react-instagram-embed.
It return the error below
Module not found: Error: Can't resolve 'querystring' in '/home/marcos/Desktop/REACT/Instagram-clone/instagram/node_modules/react-instagram-embed/es'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "querystring": require.resolve("querystring-es3") }'
- install 'querystring-es3'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "querystring": false }
I'm trying to import Ammo physics engine into react-babylon project, build with CRA. I keep getting polyfill error:
Compiled with problems:X
ERROR in ./node_modules/ammo.js/builds/ammo.js 207:22-45
Module not found: Error: Can't resolve 'path' in 'C:\...\node_modules\ammo.js\builds'
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.
If you want to include a polyfill, you need to:
- add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
- install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
resolve.fallback: { "path": false }
ERROR in ./node_modules/ammo.js/builds/ammo.js 210:18-31
Module not found: Error: Can't resolve 'fs' in 'C:\...\node_modules\ammo.js\builds'
Component using import looks like this:
//#ts-ignore
import { default as Ammo } from 'ammo.js/builds/ammo';
Ammo();
...
<Scene enablePhysics={[gravity, new AmmoJSPlugin(false, Ammo())]}>
I assume the problem comes from WASM compilation but I have absolutely no idea how to tackle it. If possible I would prefer not to eject CRA.
you have to use #craco/craco to override webpack config