Module not found: Error: Cannot resolve module 'fs'

Question

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-22

file-exists uses fs as a dependency but for some reason it is not working. Npm starts and runs without any issues if I don't require file-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.

jess · Accepted Answer · 2018-01-20T19:32:13.673

22

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

edited Jan 20 '18 at 19:32

answered Jan 20 '18 at 18:07

jess

769
2
8
15

1

You might also find this thread interesting. It's discussing a similar situation using fs in the browser. https://stackoverflow.com/questions/46467858/manipulating-the-local-file-system-with-browser-based-javascript-and-node – jess Jan 20 '18 at 19:55
1

Here's another related question. https://stackoverflow.com/questions/35951874/problems-running-node-js-in-browser – jess Jan 20 '18 at 20:01
1

And another thread on this topic... https://stackoverflow.com/questions/23959868/differences-between-node-environment-and-browser-javascript-environment – jess Jan 21 '18 at 18:41
Thanks 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. – Aayush Goyal Dec 27 '20 at 13:25

score 6 · Answer 2 · answered Jan 20 '18 at 17:34

6

node: {
  fs: 'empty'
}

try to add the code above to your webpack config file and the error should disappear.

answered Jan 20 '18 at 17:34

Ihor Lavs

2,315
2
15
26

2

I already tried that, the error disappears but then file-exists doesn't work – Jorge Eduardo Sosa Jan 20 '18 at 17:40

Module not found: Error: Cannot resolve module 'fs'

2 Answers2

Linked