NodeJS + Webpack + Docker проект на WSL, выдающий ошибки с нативной библиотекой 'fs'

Question

У меня есть проект NodeJS, который я создаю с помощью Webpack и выполняю в контейнере Docker. Он разрабатывался в среде Linux, но я решил попытаться переместить его в WSL (подсистема Windows для Linux), потому что это облегчит работу команды разработчиков. Однако запустить его на WSL было сложно.

В настоящее время проект собирается без проблем, и Docker, похоже, также работает без сбоев. Однако, когда я открываю проект в браузере, ничего не загружается. На консоли появляется следующее сообщение об ошибке:

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)
}

Однако все версии узлов, которые у меня работают, равны 10+. Мое базовое изображение node:12 (точнее, версия 12.13.0). Версии Nodejs и npm в WSL:

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

И NodeJS в Windows:

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

Я не уверен, что это уместно, но вот мои файлы конфигурации веб-пакета:

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

I'mиз идей о том, как это исправить. Я попытался удалить и переустановить nodejs, удалить все образы докеров и т. Д. Любые предложения будут очень признательны.

Answer 1

Исправлено путем установки этого пакета npm , импорта его в server.js и мучительного обезьяны:

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

К сожалению, его исправление не дало мне больше понимания того, что не такс WSL и узлом, но, по крайней мере, это работает.

РЕДАКТИРОВАТЬ:

Поскольку этот вопрос, похоже, имеет отношение к некоторым, с тех пор я обнаружил, что настоящая проблема в том, что я пытался использовать fs в классе, который был связан с target: 'web' (второй файл конфигурации, который я опубликовал). Это еще одна часть кода, и мне не пришло в голову, что это может быть проблемой.

webpack.config.js, который я выложил изначально, предназначен для сервера expressJS, тогда как эта другая часть кода быладля внешнего интерфейса приложения.

Насколько я понимаю, target: 'web' говорит Webpack не связывать и NodeJS-функции, потому что этот код будет запускаться в браузере. target: 'node' подходит для кода, который будет работать в среде узла (т. Е. На сервере expressJS, который будет работать на сервере)

Надеюсь, это поможет людям, сталкивающимся с этой проблемой.

Answer 2

Есть ли у вас jquery в вашем package.json? Я помню, как получаю эту ошибку с Create-React-App, когда забываю добавить jquery cdn в index.html