title: NodeJS+Webpack+Docker project on WSL throwing errors with native 'fs' library
body: <p>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. </p>
  
  <p>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:</p>
  
  <pre><code>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.&lt;anonymous&gt; (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.&lt;anonymous&gt; (file.js:3)
  </code></pre>
  
  <p>When I check <code>index.js:107</code>, I see the following lines:</p>
  
  <pre><code>// fs.realpath.native only available in Node v9.2+
  if (typeof fs.realpath.native === 'function') {
    exports.realpath.native = u(fs.realpath.native)
  }
  </code></pre>
  
  <p>However, all node versions I have running are 10+. My base image is <code>node:12</code> (more specifically, version 12.13.0). Nodejs and npm versions on WSL are: </p>
  
  <pre><code>me@computer:.../addin$ nodejs --version
  v12.11.1
  me@computer:.../addin$ npm --version
  6.12.0
  </code></pre>
  
  <p>And NodeJS on windows is:</p>
  
  <pre><code>PS H:\&gt; node --version
  v10.15.3
  </code></pre>
  
  <p>I'm not sure if this is relevant, but here are my webpack config files:</p>
  
  <p><code>webpack.server.config.js</code>:</p>
  
  <pre><code>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"
          }
        }
      ]
    }
  }
  </code></pre>
  
  <p><code>webpack.config.js</code>:</p>
  
  <pre><code>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' ]
      })
    ]
  }
  </code></pre>
  
  <p>And the build command is: </p>
  
  <pre><code>rm -rf dist &amp;&amp; webpack --mode development --display-error-details --config webpack.server.config.js &amp;&amp; webpack --mode development
  </code></pre>
  
  <p>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.</p>