Why do we set node.fs: 'empty' in webpack?

user_10262805 0
Viewed 2002

I see this error "Module not found: Error: Can't resolve 'fs' in ....." and is solution is

// webpack 4
node: {
    fs: "empty"
}


//webpack5
   resolve: {
    extensions: [".ts", ".tsx", ".js", ".css"],
    fallback: {
      fs: false,
    },
  },

However I have no idea what does "fs:false" or "empty" mean?

webpack fs node.js javascript
1 Answers

It means the same thing. Sometimes few modules use native Node.js module like fs which Webpack attempts to bundle when bundling for browser environment. Since, fs is not available or simply doesn't make any sense for browser environment, Webpack throws the module not found error.

Specifying the value of "empty" or false for fs is telling Webpack to ignore that module and not attempt to bundle it.

Why this happens? Some modules are isomorphic meaning that support both browser and node.js. The bundler like Webpack cannot simply figure out the if native module should be excluded or not. (With ESM Modules, tree shaking and sideEffect, Webpack can handle this well to a great extent.)

user_57230980
Related