Node cannot find module "fs" when using webpack

Question

I'm using node.js and webpack to create a bundle. From what I've read, node.js should contain fs module for managing files. However when I call require("fs") I get an Cannot find module "fs" error. What should I do?

Answer 1

I came across this problem myself when bundling with webpack and found the answer on this thread.

The way to solve it for me was to use the following config:

module.exports = {
  entry: "./app",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
      loaders: [
          {  
              test: /\.js$/,
              exclude: 'node_modules',
              loader: 'babel',
              query: {presets: ['es2015']},
          }
      ]
  },
  target: 'node'
};

By setting target to node webpack will make the necessary changes to bundle your node application

Edit: This answer targeted webpack 1.x which has now been superseded.

Answer 2

使用webworkers 捆绑 NWjs应用程序时，我遇到了同样的问题（反过来又启用了节点）。

我找到的解决方案是将externals中使用的每个本机模块包含前缀commonjs到模块名称。例如：

    ...
    target: "webworker", // or 'node' or 'node-webkit'
    externals:{
        fs:    "commonjs fs",
        path:  "commonjs path"
    }
    ...

我为不同项目中的目标“webworker”和“node-webkit”做了同样的事情来解决同样的问题。

webpack nwjs webworker nodejs node

Answer 3

如果您在nodejs环境中运行webpack捆绑包，则目标：webpack.config.js文件中必须为“ node”，否则webpack将默认值作为目标check here的web。

您可以通过两种方式解决问题

将以下配置添加到您的webpack.config.js

node: {
    fs: "empty"
}

OR

将以下配置添加到package.json

"browser": {
    "fs": false
}

Answer 4

将以下配置添加到您的webpack.config.js

resolve: {
  fallback: {
    fs: false
  }
}

Answer 5

我需要构建一个类，如果在浏览器中执行该类，则使用fetch；如果在node中执行，则使用fs。由于其他原因，产生单独的包是不切实际的，所以我产生了一个针对浏览器的包。

如果脚本在节点中运行，我使用的解决方案是使用eval('require("fs")')。

const fs = eval('require("fs")')

浏览器安全（浏览器中的fs是null）

const fs = typeof window === 'object'
    ? null
    : eval('require("fs")')

Answer 6

尝试了我在Internet上找到的所有内容（target，externals，node配置）后，唯一对我有用的解决方案是替换：

const filesystem = require("fs")
        or
import fs from "fs"

通过特殊的webpack版本

const fs = __non_webpack_require__("fs")

这将生成webpack无法解析的require函数。

Answer 7

除了PDG

的答案

我习惯了这种简短的复制/粘贴糖果。

使用路径和 fs ：

var nodeModules = {};
fs.readdirSync(path.resolve(__dirname, 'node_modules'))
  .filter(x => ['.bin'].indexOf(x) === -1)
  .forEach(mod => { nodeModules[mod] = `commonjs ${mod}`; });

// Before your webpack configuration

module.exports = {
...
}

然后在您的配置文件中，将 nodeModules 变量包含在外部

中

...
externals: nodeModules,
...

Answer 8

对于我们正在构建的解决方案，我们不得不强制使用旧版的webpack：

npm install --save --force webpack@webpack-3

Answer 9

将预定义的解决方案用作以下内容会更优雅：
将target: 'node'添加到Webpack配置文件中。

有关以下信息的更多信息：official documentation