WSL 上的 NodeJS+Webpack+Docker 项目使用本机 'fs' 库抛出错误

Question

我有一个 NodeJS 项目，我正在使用 Webpack 和运行ning 在 Docker 容器中构建。这是在 Linux 环境中开发的，但我决定尝试将其移至 WSL（Windows 子系统用于 Linux），因为这将使开发团队的工作变得更容易。不过，在 WSL 上达到运行一直很困难。

目前项目构建没有问题，而且 Docker 似乎也运行ning 顺利。但是，当我在浏览器上打开项目时，没有加载任何内容。在控制台上是以下错误消息：

Uncaught TypeError: Cannot read property 'native' of undefined
    at Object../node_modules/fs-extra/lib/fs/index.js (index.js:107)
    at __webpack_require__ (bootstrap:19)
    at Object../node_modules/fs-extra/lib/index.js (index.js:6)
    at __webpack_require__ (bootstrap:19)
    at Object.<anonymous> (RollingFileWriteStream.js:2)
    at Object../node_modules/streamroller/lib/RollingFileWriteStream.js (RollingFileWriteStream.js:265)
    at __webpack_require__ (bootstrap:19)
    at Object../node_modules/streamroller/lib/index.js (index.js:2)
    at __webpack_require__ (bootstrap:19)
    at Object.<anonymous> (file.js:3)

当我检查 index.js:107 时，我看到以下几行：

// fs.realpath.native only available in Node v9.2+
if (typeof fs.realpath.native === 'function') {
  exports.realpath.native = u(fs.realpath.native)
}

但是，我拥有的所有节点版本运行ning 都是 10+。我的基础映像是 node:12（更具体地说，版本 12.13.0）。 WSL 上的 Nodejs 和 npm 版本是：

me@computer:.../addin$ nodejs --version
v12.11.1
me@computer:.../addin$ npm --version
6.12.0

windows 上的 NodeJS 是：

PS H:\> node --version
v10.15.3

我不确定这是否相关，但这是我的 webpack 配置文件：

webpack.server.config.js:

const path = require('path')
const webpack = require('webpack')
const nodeExternals = require('webpack-node-externals')
module.exports = {
  entry: {
    server: './src/server/server.js',
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  target: 'node',
  node: {
    // Need this when working with express, otherwise the build fails
    __dirname: false,   // if you don't put this is, __dirname
    __filename: false,  // and __filename return blank or /
    fs: 'empty'
  },
  externals: [nodeExternals()], // Need this to avoid error when working with Express
  module: {
    rules: [
      {
        // Transpiles ES6-8 into ES5
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
}

webpack.config.js:

const path = require("path")
const webpack = require('webpack')
const HtmlWebPackPlugin = require("html-webpack-plugin")

module.exports = {
  entry: {
    main: './src/js/index.tsx'
  },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: '/',
    filename: '[name].js'
  },
  target: 'web',
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.html', '.js']
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'ts-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
      {
        // Loads the javacript into html template provided.
        // Entry point is set below in HtmlWebPackPlugin in Plugins
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            //options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      },
      {
       test: /\.(png|svg|jpg|gif)$/,
       use: ['file-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/html/index.html",
      filename: "./index.html",
      excludeChunks: [ 'server' ]
    })
  ]
}

构建命令是：

rm -rf dist && webpack --mode development --display-error-details --config webpack.server.config.js && webpack --mode development

我不知道如何解决这个问题。我已经尝试删除并重新安装 nodejs，删除所有 docker 图像等。任何建议将不胜感激。

Answer 1

你的 package.json 中有 jquery 吗？我记得当我忘记将 jquery cdn 添加到 index.html

时，Create-React-App 出现了这个错误

Answer 2

已通过安装 this npm package、在 server.js 上导入它和 monkey-wrenching 修复：

var rp = require('fs.realpath')
rp.monkeypatch()

不幸的是，修复它并没有让我更深入地了解 WSL 和节点的问题，但至少它有效。

编辑：

因为这个问题似乎与某些人有关，所以我发现 真正的 问题是我试图在 [=36] 中使用 fs =] 与 target: 'web' 捆绑在一起（我发布的第二个配置文件）。这是代码的另一部分，我没有想到这可能是问题所在。

我最初发布的 webpack.config.js 是针对 expressJS 服务器的，而代码的另一部分是针对应用程序的前端。

据我了解，target: 'web' 告诉 Webpack 不要捆绑 NodeJS 函数，因为这段代码将运行在浏览器中。 target: 'node' 适用于在节点环境中运行的代码（即 expressJS 服务器，后端运行）

我希望这可以帮助运行解决这个问题的人。

WSL 上的 NodeJS+Webpack+Docker 项目使用本机 'fs' 库抛出错误

NodeJS+Webpack+Docker project on WSL throwing errors with native 'fs' library

node.js

docker

webpack

windows-subsystem-for-linux