I cannot understand " Module not found: Error: Can't resolve 'fs' '"

Question

Having a little spare time I have tried reworking an old project of mine with new web techs that I like (Typescript, Pug and React). Everything worked fine until I tried adding pug.js into the mix with babel-plugin-transform-react-pug.

No matter how much I fiddle with the configurations I can't get the build phase to work and get the following errors:

ERROR in ./node_modules/uglify-js/tools/node.js
Module not found: Error: Can't resolve 'fs'

ERROR in ./node_modules/resolve/lib/sync.js
Module not found: Error: Can't resolve 'fs'

ERROR in ./node_modules/resolve/lib/async.js
Module not found: Error: Can't resolve 'fs'

ERROR in ./node_modules/pug-load/index.js
Module not found: Error: Can't resolve 'fs'

ERROR in ./node_modules/jstransformer/index.js
Module not found: Error: Can't resolve 'fs'

ERROR in ./node_modules/clean-css/lib/reader/load-original-sources.js
Module not found: Error: Can't resolve 'fs'

ERROR in ./node_modules/clean-css/lib/reader/apply-source-maps.js
Module not found: Error: Can't resolve 'fs'

ERROR in ./node_modules/clean-css/lib/reader/read-sources.js
Module not found: Error: Can't resolve 'fs'  

The code is entirely in https://github.com/Hedgestock/Wikiwar

Here is how to reproduce the errors:

• Go to the root of the frontend folder,
• Do an install (npm i)
• Build with npx webpack

Could someone tell me what I'm doing wrong? Thank you in advance.

Answer 1

You could also run into this issue when your platform doesn't support file-system. SO try add this line to your webpack.config.js to add the corresponding pollyfills:

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