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

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:

Installing ‘fs’ but it doesn’t work
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

Related:  How can you detect the version of a browser?

Solutions/Answers:

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 !

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.

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

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.

Related:  Replace HTML page with contents retrieved via AJAX

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/

References