Webpack Error - configuration.node has an unknown property 'fs'

Question

I have encountered an error when using the latest version of Webpack (5.1.0). It looks like the configuration is throwing an error because the validation schema is too restrictive. Here is my webpack configuration file in a gist, and the error message I am seeing.

Webpack.config.js

https://gist.github.com/adarshbhat/3ec5950b66b78102da0cf46e51a3d633

Error

[webpack-cli] 
Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.node should be one of these:
   false | object { __dirname?, __filename?, global? }
   -> Include polyfills or mocks for various node stuff.
   Details:
    * configuration.node has an unknown property 'module'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
    * configuration.node has an unknown property 'net'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
    * configuration.node has an unknown property 'fs'. These properties are valid:
      object { __dirname?, __filename?, global? }
      -> Options object for node compatibility features.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] start: `webpack serve`
npm ERR! Exit status 2

I am attempting to use a parser generator library (antlr4) that works both in a Node.js environment, as well as in browsers. It looks like the library code is requiring global objects like fs, and if it is empty, assumes that it is in a browser environment. According to the documentation of Antlr4 and that of Webpack , this is a supported configuration file. But it is not working. Please help.

Versions

• webpack: 5.1.0
• webpack-cli: 4.0.0
• webpack-dev-middleware: 3.7.2
• webpack-dev-server: 3.11.0

Update (Oct 29 2020)

Antlr JavaScript documentation has now been updated with the new configuration for Webpack 5

Tide

It looks like you are trying to use the fs and net modules in browsers which is impossible – Harsh

You are correct - the library is trying to require those modules. If it receives an empty object, then it assumes that it is in a browser environment. This is how the library is able to function both in Node.js environment and browser environment. It looks like other people have been able to get this to work in older versions of Webpack. – Tide

A better solution is to check if window or document is defined: if (typeof window !== 'undefined') ... if not then you are in node.js – Harsh

Agreed that this is not the best behavior. However, this is not under my control. This behavior is already implemented in the antlr4 library package. I am just the poor chap trying to use it. My hope is that Webpack fixes this if this is a supported configuration. – Tide

Answer 1

I managed to get this to work with some help from the Webpack team. Using the following webpack configuration as recommended by the antlr4 documentation is no longer supported.

Does not work

{
  node: {
    fs: 'empty',
    module: 'empty',
    net: 'empty'
  }
}

Working configuration

{
  resolve: {
    fallback: {
      fs: false
    }
  }
}

With this, I was able to get my JavaScript parser working.

Please note that there is an ongoing effort to update antlr4 to generate ES6 based code. This configuration may not be necessary in the future.

Tide

this is a huge issue with potential impact, and there is no word on that in the documentation nor v4 to v5 migration docs ... webpack.js.org/configuration/node/#node – Lookthrough

note that false instead of "empty" in your example here also used to work with v4 – Lookthrough

@tchakabam I’m trying to submit a PR to update the docs. Can you confirm that the documented configuration does not work in Webpack 4 too? – Tide

negative, it did work with Webpack 4 in fact. this issue appeared as we moved to v5. – Lookthrough

Same issue when trying to use webpack 5 with Next.js v10.2, similar config used to work on webpack 4. – Laurenlaurena

The problem with resolve.fallback.fs: false is that fs is {} at runtime. – Natalyanataniel

Answer 2

Next.js users:

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false;
    }
    return config;
  },
}

Source

Ferric

Answer 3

Exactly for rails webpacker, if you are using it, the solution should be a:

Inside any of config/webpack/*.js which uses the plain custom config (see https://github.com/rails/webpacker#webpack-configuration for more), just add the code resolving and removing the node property.

const { environment } = require('@rails/webpacker')

const customConfig = {
  resolve: {
    fallback: {
      dgram: false,
      fs: false,
      net: false,
      tls: false,
      child_process: false
    }
  }
};

environment.config.delete('node.dgram')
environment.config.delete('node.fs')
environment.config.delete('node.net')
environment.config.delete('node.tls')
environment.config.delete('node.child_process')

environment.config.merge(customConfig);

module.exports = environment

Aestival

This was the only solution that actually worked for me in a rails 6.1 app with webpacker 5.4.4 – Attalanta

Is this still viable or should there be some update? I had to do this too to get it working in Rails 7 but I see some warnings about deprecations. "(node:7497) [DEP_WEBPACK_MAIN_TEMPLATE_RENDER_MANIFEST] DeprecationWarning: MainTemplate.hooks.renderManifest is deprecated (use Compilation.hooks.renderManifest instead)" among others – Cloister

@Cloister if rails 7 project uses webpack with webpacker, you have to apply the code to webpack config for devel/test envs. If you are using the pure webpack, just use pure shared config – Plaice

Can you share with me, how you add that to the test env file? the test.js exports environment.toWebpackConfig(). did you delete it as well? – Commissioner

@Commissioner any key of result env should be removed :) – Plaice

Answer 4

I have encountered with same issue while working with Next js, I have searched different solutions like webpack5: false or fs: false, but that didn't work for me.

config.node = {
  // fs: 'empty'
  global: true,
  __filename: true,
  __dirname: true,
}

this did work for me, because in webpack 3.0.0, the node option may be set to false to completely turn off the NodeStuffPlugin, as we are working in JS and specially in Next-JS which requires Node-JS, so we don't have to turn it off completely because while 'false' the Webpack wouldn't touch your '__filename' code and your '__dirname' code.

Any correction or guidance's will be appreciated, Thankyou

Sync

Thank you so much! ``` [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 ``` – Diastasis

Answer 5

Interesting enough, I get in case of path (but not with file) the following message, more clear of webpack CLI:

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 }

However it seems to me this info should also be found here, and removed the statement that any built-in module can be used as property there: https://webpack.js.org/configuration/node/#node

Lookthrough

Answer 6

If someone is facing this error in Next JS, I found the solution by disabling webpack 5 which is set by default.

disable it by webpack5: false in next.config.js

Adoration

are there any side effects from changing the default to not be webpack5? – Ferric