Can't resolve 'fs' when bundle with webpack

[Alex-Sokolov]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Webpack finish bundle without errors with css-loader 0.26.4.
After update to 0.27.0 webpacking finished with error:

ERROR in ./~/convert-source-map/index.js
Module not found: Error: Can't resolve 'fs' in 'C:\Projects\project_name\node_modules\convert-source-map'
 @ ./~/convert-source-map/index.js 2:9-22
 @ ./~/css-loader/lib/css-base.js

If the current behavior is a bug, please provide the steps to reproduce.

1. Update css-loader from 0.26.4 to 0.27.0 version
2. Run webpack to build

What is the expected behavior?
Works without error

Please mention other relevant information such as your webpack version, Node.js version and Operating System.
Windows 8.1
Node.js 7.7.2
Webpack 2.2.1

[aximario]

same here

[jano42]

same here

[Kamilius]

Same for me, had to rollback that update

[gwuhaolin]

same here

[hdnha11]

Adding

node: {
  fs: 'empty'
}

to webpack config file and the error is gone. Not sure how it works, It seems like webpack did some thing with fs module in web target.

[mehdivk]

add the following to your Webpack config:

node: {
   fs: "empty"
}

[bebraw]

The issue has been acknowledged and we are in process of figuring out a good fix. No need for "me too"s. Please add a thumbs up on the original issue if you want to do that. 👍

[PredokMiF]

Did you can to unpublish this version? It will keep calm to all of us

[joshwiens]

@PredokMiF You don't unpublish anything, ever.

The workaround is sufficient and the bug is actually in webpack, related to fs in the web target.

WORKAROUND thanks to @hdnha11 / @mehdivk

node: {
  fs: 'empty'
}

If using this workaround isn't viable, version lock to the previous minor version.

[fklingler]

@bebraw With your fix of this issue, I have a Uncaught ReferenceError: Buffer is not defined in the lib/convert-source-map.js file, in the browser.

[bebraw]

@fklingler I have a proposed fix for that at #453 . Still waiting for some approvals before I can push it. Feel free to give that a go and let me know how it goes.

[exhuma]

I came across the same error. I am starting off with JS (with vuejs) and I would like to understand what this does?

I got this error when using the "fetch" library from npm. At first I got the same error but with other packages (net and dns). My first thought was that those are missing dependencies. After running npm install net and npm install dns, those errors were replaced with dgram and fs. The latter one prompted me to hit Google and landed on this issue.

I now added two sections in my webpack config for both fs and dgram, and now the errors are gone.

But I don't know what this entails. Will my compiled code still work? Even if these sections are configured as being empty? What does it actually do?

Also, is this the right place to ask this? Or should it be rather targeted at vuejs?

nb: I would like to give a bit more insight about my running environment but as I'm still getting my feet wet, I don't know which commands are the best to represent a snapshot of my dev-environment. If you need some additional output, let me know which commands to run.

[bebraw]

@exhuma See the related page on documentation. That describes the default behavior. You can also find possible overrides there. I hope this helps.

Also, is this the right place to ask this? Or should it be rather targeted at vuejs?

Stack Overflow might be better for this type of questions.

[stephenhmarsh]

just wanted to add that I fixed this by the answer in josephsavona/valuable#9 about setting target: 'node'

This explains more: http://jlongster.com/Backend-Apps-with-Webpack--Part-I

The target: 'node' option tells webpack not to touch any built-in modules like fs or path.

[adambarghouthi]

Hi - when I did
target: 'node',

the error went away. Then I got
global not defined,

so I fixed it with
'global': {}, in webpack.definePlugin({...})

Then I got a GetEnv error saying SERVER_HOST not defined... but it is... so there's a slew of errors that I'm swimming in - I hope someone can take a look at my boilerplate and give me hand? Thank you!

[jollyblume]

I fixed the problem by changing webpack.config.js:

...
var config = Encore.getWebpackConfig();
config.node = { fs: 'empty' };
module.exports = config;

and:
yarn add --dev file system

[samayo]

Someone please fix this issue. Non of the mentioned answer could fix it for me

[majidghafoorzade]

For Webpack >5 You shoud add a block to webpack.config.js like this:

//webpack.config.js

module.exports = {
    ...
    resolve: {
        fallback: {
            "fs": false
        },
    }
}

[Powersource]

For me (webpack with electron) the problem was apparently that I was doing require('fs/promises') but changing it to require('fs').promises seems to have fixed it.

[yilmazbingo]

@majidgh72
Your solution lets webpack bundle the code successfully but when I run the app I get error

Uncaught reference Error: process is not defined

[ecarrera]

Thanks @majidgh72, the migration to webpack 5 talks about fs as a fallback.

https://webpack.js.org/migrate/5/

[alexander-akait]

@Powersource Should be work without any problems on v5 https://github.com/webpack/webpack/blob/0c4d47a987f3688c663c7a7e18fe8e277e6f98c8/lib/node/NodeTargetPlugin.js#L27

[adsazad]

Got this error.

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.node has an unknown property 'fs'. These properties are valid:
   object { __dirname?, __filename?, global? }
   -> Options object for node compatibility features.

on Doing

config = Encore.getWebpackConfig();
config.node = { fs: "empty" };
module.exports = config;

[alexjavascript]

Because JavaScript can be written for both server and browser, webpack offers multiple deployment targets that you can set in your webpack configuration.

Just add to your webpack.config following line:
target: 'node',

[petertorelli]

@alexjavascript If you are using webpack to build the Node server and the content in the same project as different entries, how do you distinguish the target for each entry?

[guntram]

How can we configure that for running with karma, so that we can test with empty or simulated modules?
Since we switched to Angular 12 (Webpack 5) in our premiere-pro panels running inside Chromium Embedded Framework including node and node-webkit, our Jasmine tests cannot be started by Karma.
(github->adobe->cep->docs)

So we tried some stuff already including browserify, node-polyfill-webpack-plugin, node-karma, ts-node, changing targets, and maybe I forgot one or the other.

Still no luck running the tests unless we split the node-core using code into its own project, which we would like to avoid.

We have such panels running on Angular 9, and these tests run just fine...

(The Angular 12 panel also runs fine inside premiere-pro, only the tests cannot be executed.)

We also tried loading the webpack config and inserting it into the karma.conf:

var webpackConfig = require('./extra-webpack.config'); webpackConfig.entry = undefined;

and later in the config:

module.exports = function (config) { config.set({ ... webpack: webpackConfig,

And here is a project which could be used as a starting point if anyone wants to try :)
https://github.com/tallan/angular-electron
(Just add some basic fs usage in the app.component and fix the tests...)

[MaxProtos]

Fixed by adding target: 'node', in webpack.config.js

[Sherryer]

package.json add

  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },

[danhalis]

For Webpack 4, you need to add this in webpack.config.js:

module.exports = {
  node: {
    fs: 'empty',
  },
}

For Webpack 5, you need to add this in webpack.config.js (upgrade to v5):

module.exports = {
  resolve: {
    fallback: {
      fs: false,
    },
  },
}

[shreyaskyada20]

Adding

node: {
  fs: 'empty'
}

to webpack config file and the error is gone. Not sure how it works, It seems like webpack did some thing with fs module in web target.

• Nx Project wepack.config.js file How to Configure this file?

// @ts-check

const { withModuleFederation } = require('@nrwl/react/module-federation');
const baseConfig = require('./module-federation.config');

/**
 * @type {import('@nrwl/react/module-federation').ModuleFederationConfig}
 **/
const defaultConfig = {
  ...baseConfig,
};

module.exports = withModuleFederation(defaultConfig);

[supunTE]

I've upgraded to vite from webpack but I am getting same issue with Nx in webstorm

Error: Failed to load plugin '@nrwl/nx' declared in '--config#overrides[2]': Cannot find module 'fs/promises'