Webpack Express Cannot Resolve Module 'fs', Request Dependency is Expression

Question

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

Have you tried adding `"target": "node"` to your `webpack.config.js`? — Aurora0001, Dec 04 '16 at 15:14
Oh haha that actually fixed the 'fs' problem :) How would I go about resolving the warning? - `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` — Clement, Dec 04 '16 at 15:17
I recall being able to get rid of this kind of a thing multiple times already by simply destroying the `node_modules` folder and doing `npm install` again. — Roope, Dec 04 '16 at 15:20
Also, do you actually need Webpack at all here @ClementOh? Is there a need for you to bundle everything or could you just run it through Babel instead? — Aurora0001, Dec 04 '16 at 15:28
Yeah, I'm trying to create my own redux server-side-rendering boilerplate so I'll need to bundle things like SASS, compile tsx etc. Unfortunately deleting `node_modules` didn't work for me, I'm trying to google it at the moment, didn't find much but will post it when I find something. — Clement, Dec 04 '16 at 15:30
@ClementOh the issue is your `./~/express/lib/view.js` contains a `require` that is based on a variable, and Webpack doesn't know how to resolve the path at compile time. Is there any way you could avoid doing that? — Aurora0001, Dec 04 '16 at 15:41
@Aurora0001 I don't think that's possible. I can't physically edit the express library and the error occurs every time I initialise Express. — Clement, Dec 04 '16 at 15:50
@Aurora0001 just thought I should add that the server still runs fine even with the warning. The callback `const app = Express(); app.listen(3000, () => console.log("server running"));` runs as expected. — Clement, Dec 04 '16 at 15:52
Below `module: {`, try adding `"noParse": /\.\/~\/express\/lib\/view\.js/` and see if that removes the warning. — Aurora0001, Dec 04 '16 at 15:56
Unfortunately adding `noParse: /\.\/~\/express\/lib\/view\.js/` it doesn't seem to remove the warning. — Clement, Dec 04 '16 at 16:01
@ClementOh I *think* you can suppress the warning by adding `exprContextCritical: false,` under `module`. Test it and see, but I suspect it's better not to suppress it if you can avoid doing it. — Aurora0001, Dec 04 '16 at 16:15
@Aurora0001 `exprContextCritical: false` definitely does its job, but I agree with you that it's better not to suppress it. Perhaps its something for the express github issues page — Clement, Dec 04 '16 at 23:04
[github issue](https://github.com/webpack/webpack/issues/3420) — Clement, Dec 04 '16 at 23:27
Did you ever fully resolve this issue? I added both target: 'node' and node: {fs: 'empty'}, but am still getting these stupid fs errors. Not sure what else to do... — tbogatchev, May 25 '17 at 15:03
`target: 'node'` should only be added if you are using webpack to build your server-side code. If you're using a static react SPA, you should never use `target: 'node'` because it doesn't bundle your dependencies and your app may fail to load properly. I think I ended up including `node_modules` in the bundle and using react-router to split the code and lower the initial SPA load time. — Clement, May 27 '17 at 14:51

score 79 · Accepted Answer · answered Dec 06 '16 at 15:27

79

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

"target": "node"

answered Dec 06 '16 at 15:27

Christopher Davies

4,461
2
34
33

15

If I am building a web application, is it right to set target as 'node'? – Abhishek Nalin Apr 14 '17 at 18:11
5

@AbhishekNalin no, it is not. You should set `target: web` – David S. Aug 07 '17 at 14:01
2

where in webpack.config should I add this? – Sujit.Warrier Nov 10 '17 at 04:28
1

See this: https://webpack.js.org/concepts/targets/ You add it to the root-level configuration object. – Christopher Davies Nov 10 '17 at 08:09
2

this will create another issue – Sarath Ak Jun 14 '19 at 16:09
Actually, I first thought this was a solution, but then like @SarathAk said, it created another problem for me. I think this may be the solution: https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881 – Ryan Jun 22 '20 at 18:48

score 4 · Answer 2 · answered Apr 26 '17 at 12:36

4

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 !

answered Apr 26 '17 at 12:36

Wetteren Rémi

598
6
11

adding `import * as fs from 'fs'` in my node app saddly was also not a solution :/ – Kevin Danikowski May 24 '18 at 18:40

score 4 · Answer 3 · answered Jun 13 '17 at 06:42

4

I solved this problem by two steps:

Delete node_modules directory
Add target:'node' into webpack config file

Then run npm install. It worked for me fine.

answered Jun 13 '17 at 06:42

Osman Goni Nahid

1,193
2
15
24

score 2 · Answer 4 · answered May 24 '18 at 18:53

2

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

answered May 24 '18 at 18:53

Kevin Danikowski

4,620
6
41
75

score 1 · Answer 5 · answered May 23 '19 at 01:59

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/

score 0 · Answer 6 · answered Aug 26 '19 at 23:23

0

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

answered Aug 26 '19 at 23:23

el-Joft

142
2
2

Webpack Express Cannot Resolve Module 'fs', Request Dependency is Expression

6 Answers6

Working Solution/Hack/Patch for Angular V6 and up

Linked