[Solved] Webpack Express Cannot Resolve Module ‘fs’, Request Dependency is Expression

When I include Express in my project I always get these errors when I try to build with webpack.

webpack.config.dev.js

var path = require("path")

module.exports = {
  entry: {
    "server": "./server/server.ts"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/public/"
  },
  module: {
    loaders: [
      {
        test: /.ts(x?)$/,
        exclude: /node_modules/,
        loader: "ts-loader"
      }, {
        test: /.js(x?)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }, {
        test: /.json$/,
        loader: "json-loader"
      }, {
        test: /.scss$/,
        exclude: /node_modules/,
        loaders: ["style-loader", "css-loader", "postcss-loader", "sass-loader"]
      }, {
        test: /.css$/,
        loader: ["style-loader", "css-loader", "postcss-loader"]
      }, {
        test: /.(jpe?g|gif|png|svg)$/i,
        loader: 'url-loader?limit=10000'
      }
    ]
  }
}

I’ve tried:

  1. Installing ‘fs’ but it doesn’t work
  2. Read somewhere to change the node fs property. It removes the error warnings but I don’t think this is a good permanent solution.

    module.exports = {
      node: {
        fs: "empty"
      }
    }
    

    Time: 2496ms
    Asset Size Chunks Chunk Names
    bundle.js 761 kB 0 [emitted] server
    bundle.js.map 956 kB 0 [emitted] server
    + 119 hidden modules

    WARNING in ./~/express/lib/view.js
    Critical dependencies:
    78:29-56 the request of a dependency is an expression
    @ ./~/express/lib/view.js 78:29-56
    ERROR in ./~/express/lib/view.js

    Module not found: Error: Cannot resolve module ‘fs’ in /Users/clementoh/Desktop/boilerplate2/node_modules/express/lib
    @ ./~/express/lib/view.js 18:9-22
    ERROR in ./~/send/index.js

    Module not found: Error: Cannot resolve module ‘fs’ in /Users/clementoh/Desktop/boilerplate2/node_modules/send
    @ ./~/send/index.js 24:9-22
    ERROR in ./~/etag/index.js

    Module not found: Error: Cannot resolve module ‘fs’ in /Users/clementoh/Desktop/boilerplate2/node_modules/etag
    @ ./~/etag/index.js 22:12-25
    ERROR in ./~/destroy/index.js

    Module not found: Error: Cannot resolve module ‘fs’ in /Users/clementoh/Desktop/boilerplate2/node_modules/destroy
    @ ./~/destroy/index.js 14:17-30
    ERROR in ./~/mime/mime.js

    Module not found: Error: Cannot resolve module ‘fs’ in /Users/clementoh/Desktop/boilerplate2/node_modules/mime
    @ ./~/mime/mime.js 2:9-22

Enquirer: Clement

||

Solution #1:

Just posting an answer, since not everyone reads comments on SO. @Aurora0001 nailed it. Webpack’s config needs to have this set:

"target": "node"

Solution #2:

I am on a stack Angular 2 – Electron – Webpack and I needed to use fs into my service, I finally found how to do :

1) inside your webpack.common.js, specify target:'electron-renderer'

2) inside your service or component : import * as fs from 'fs'; and use fs as would do for a node project.

Hope it help !

Respondent: Wetteren Rémi

Solution #3:

I solved this problem by two steps:

  1. Delete node_modules directory

  2. Add target:'node' into webpack config file

Then run npm install. It worked for me fine.

Respondent: Osman Goni Nahid

Solution #4:

I added node: { fs: 'empty' } without luck,

then I added –config to start command:

webpack-dev-sever webpack.config.dev.js

Use –config flag to use the custom file.

webpack-dev-sever --config webpack.config.dev.js

Respondent: Kevin Danikowski

Solution #5:

Working Solution/Hack/Patch for Angular V6 and up

The solution for me was to hack the Angular-CLI module to spoof the missing node modules.

After installing locate the following file:

node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js

Find the node line and add this:

node: { crypto: true, stream: true, fs: 'empty', net: 'empty' }

And that’s it!!!

🎉🎉🎉🎉🎉

Note: You will need to do this patch every time you update the package. So use this script:

package.json

"scripts": {
  ...
  "postinstall": "node patch-webpack.js"
  ...
}

patch-webpack.js

const fs = require('fs');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

fs.readFile(f, 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }
  let result = data.replace(/node: false/g, "node: {crypto: true, stream: true, fs: 'empty', net: 'empty'}");

  fs.writeFile(f, result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

Source:
https://blog.lysender.com/2018/07/angular-6-cannot-resolve-crypto-fs-net-path-stream-when-building-angular/

Respondent: jpthor

Solution #6:

Adding "target": "node", works by adding it to the webpack.config.js.

Respondent: el-Joft

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.