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

user_1377288 0
Viewed 1018

I have a NodeJS project that I'm building with Webpack and running inside a Docker container. This was being developed in a Linux environment, but I decided to try to move it to WSL (Windows subsystem for Linux) because that would make things easier for the dev team. Getting it to run on WSL has been difficult though.

Currently the project builds with no problems, and Docker also seems to be running smoothly. However, when I open the project on a browser, nothing loads. On the console is the following error message:

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)

When I check index.js:107, I see the following lines:

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

However, all node versions I have running are 10+. My base image is node:12 (more specifically, version 12.13.0). Nodejs and npm versions on WSL are: 

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

And NodeJS on windows is:

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

I'm not sure if this is relevant, but here are my webpack config files:

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

And the build command is: 

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

I'm out of ideas on how to fix this. I have tried removing and reinstalling nodejs, deleting all docker images, etc. Any suggestions would be much appreciated.

webpack docker windows-subsystem-for-linux node.js
2 Answers

Fixed by installing this npm package, importing it on server.js, and monkey-wrenching: 

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

Unfortunately fixing it didn' give me any more insight on what's wrong with WSL and node, but at least it works.

EDIT:

Since this question seems to be relevant to some, I have since discovered that the real problem is that I was trying to use fs in a class that was bundled with target: 'web' (the second config file I posted). This is another part of the code, and it didn't occur to me that this could be the problem.

The webpack.config.js I posted originally is for an expressJS server, while this other part of the code was for the frontend of the application.

From what I understand, target: 'web' tells Webpack not to bundle and NodeJS functions because this code will be run in a browser. target: 'node' is appropriate for code that will run in a node environment (i.e. an expressJS server, that will run on the backend)

I hope this helps people who are running into this problem.

user_13772880

Do you have jquery in your package.json? I remember getting that error with Create-React-App when I forget to add the jquery cdn to index.html

user_121546880
Related