Module not found: Error: Cannot resolve module 'fs'
Solution 1
It looks like you're calling the fs
file-exists
method in your index.js
file. I'm not sure in what context you're calling the method, but this looks like a client-side call to a server-side method. I ran into a similar issue just recently.
From what I understand, the main issue seems to be that you can't call server-side (Node) methods in browser-interpreted client-side (front end) code. You have to call them from a server.
Webpack can load the fs
module code into your front end, but the browser can't actually interpret those Node methods and run them; only a Node environment can do that. (more here)
You could fix the core issue by modifying the call to fs
methods to happen somewhere server-side, or by finding an equivalent browser-supported package that offers the same functionality as the fs
methods you need but that can be run in a browser.
A quick search for "fs module for browser" brings up a variety of options that might work for what you need, like fs-web, browserify-fs or filer.
Here is a similar question with some insight. Use fs module in React.js,node.js, webpack, babel,express
Solution 2
node: {
fs: 'empty'
}
try to add the code above to your webpack config file and the error should disappear.
Related videos on Youtube
Jorge Eduardo Sosa
Updated on January 22, 2020Comments
-
Jorge Eduardo Sosa over 4 years
I'm making a react app using Babel and Webpack and I want to use the
file-exists
package from npm. I already installed and saved the package as a dependency for my project. After running npm start I get this error:ERROR in ./~/file-exists/index.js
Module not found: Error: Cannot resolve module 'fs' in C:\GitHub\CryptoPrices\node_modules\file-exists
@ ./~/file-exists/index.js 3:9-22file-exists
usesfs
as a dependency but for some reason it is not working. Npm starts and runs without any issues if I don't requirefile-exists
anywhere.here is my webpack config file:
module.exports = { entry: [ './src/index.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { loaders: [{ // exclude: /node_modules/, loader: 'babel', query: { presets: ['react', 'es2015', 'stage-1'] } }] }, resolve: { extensions: ['', '.js', '.jsx'] }, devServer: { historyApiFallback: true, contentBase: './' } };
I'm new to Webpack and Babel so I'm a little bit lost.
-
Jorge Eduardo Sosa over 6 yearsI already tried that, the error disappears but then file-exists doesn't work
-
jess over 6 yearsYou might also find this thread interesting. It's discussing a similar situation using fs in the browser. stackoverflow.com/questions/46467858/…
-
jess over 6 yearsHere's another related question. stackoverflow.com/questions/35951874/…
-
jess over 6 yearsAnd another thread on this topic... stackoverflow.com/questions/23959868/…
-
Aayush Goyal over 3 yearsThanks for the answer. This error was annoying us for so long. Finally moved the code from the NextJS module to the Cloud Functions module and it worked like a charm.