<p dir="auto">I am using Webpack 2 beta21 in some setup where I am trying to combine <code class="notranslate">System.import</code> auto chunks + HMR + SSR React.  I am currently struggle with how to use modules in es2015 module syntax (as suggested by <code class="notranslate">module</code>/<code class="notranslate">jsnext:main</code> entries). As far as I understand I have to transpile that code. But normally we do not transpile any code from <code class="notranslate">node_modules</code>, correct? So how can I do that "basic" transpilation that I have a non-module output from all these different sources?</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">After running my command:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="cross-env webpack --watch --mode development ./run/start.web.js"><pre class="notranslate"><code class="notranslate">cross-env webpack --watch --mode development ./run/start.web.js
</code></pre></div>
<p dir="auto">I get an error:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="This dependency was not found:

* fs in ./node_modules/minio/dist/main/minio.js, ./node_modules/mkdirp/index.js"><pre class="notranslate"><code class="notranslate">This dependency was not found:

* fs in ./node_modules/minio/dist/main/minio.js, ./node_modules/mkdirp/index.js
</code></pre></div>
<p dir="auto">I tried:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="node: {
  fs: 'empty'
}"><pre class="notranslate"><code class="notranslate">node: {
  fs: 'empty'
}
</code></pre></div>
<p dir="auto">It does remove the error and succesfully launches the client<br>
However it looks like the site is unresponsive and some controls are missing, like there is no javascript applied.</p>
<p dir="auto">If I remove usage of file which uses <code class="notranslate">minio</code> (from error). Everything works just fine.</p>
<p dir="auto">Webpack config:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const Dir = global.DIR;
export function loader() {
  return {
    jsx: {
      use: {
        query: {
          presets: [['es2015', { modules: false }], 'stage-0', 'react'],
          plugins: [
            'transform-decorators-legacy',
            'transform-class-properties',
            'transform-runtime',
            'babel-root-import',
            'react-hot-loader/babel',
          ],
        },
      },
    },
    cssModules: {
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            localIdentName: '[name]__[local]___[hash:base64:5]',
            modules: true,
            sourceMap: true,
            importLoaders: 1,
          },
        },
        'postcss-loader',
      ],
    },
  };
}
export function config(entry) {
  return {
    devtool: 'cheap-module-eval-source-map',
    entry: {
      app: [
        'babel-polyfill',
        'isomorphic-fetch',
        'whatwg-fetch',
        'react-hot-loader/patch',
        'webpack-hot-middleware/client',
        // ['webpack-hot-middleware/client', webhost].join('?'),
        path.join(Dir.src, entry, 'client'),
      ],
    },
    output: {
      path: '/',
      publicPath: '/',
      filename: 'bundle.js',
    },
    plugins: [
      new FriendlyErrorsWebpackPlugin({
        clearConsole: true,
        compilationSuccessInfo: {
          messages: logServerConfigWebpack(entry),
        },
      }),
      new BrowserSyncPlugin({
        host: getenv('BROWSERSYNC_HOST'),
        port: getenv('BROWSERSYNC_PORT'),
        proxy: webhost(entry),
      }, { reload: false }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
    ],
  };
}"><pre class="notranslate"><code class="notranslate">const Dir = global.DIR;
export function loader() {
  return {
    jsx: {
      use: {
        query: {
          presets: [['es2015', { modules: false }], 'stage-0', 'react'],
          plugins: [
            'transform-decorators-legacy',
            'transform-class-properties',
            'transform-runtime',
            'babel-root-import',
            'react-hot-loader/babel',
          ],
        },
      },
    },
    cssModules: {
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            localIdentName: '[name]__[local]___[hash:base64:5]',
            modules: true,
            sourceMap: true,
            importLoaders: 1,
          },
        },
        'postcss-loader',
      ],
    },
  };
}
export function config(entry) {
  return {
    devtool: 'cheap-module-eval-source-map',
    entry: {
      app: [
        'babel-polyfill',
        'isomorphic-fetch',
        'whatwg-fetch',
        'react-hot-loader/patch',
        'webpack-hot-middleware/client',
        // ['webpack-hot-middleware/client', webhost].join('?'),
        path.join(Dir.src, entry, 'client'),
      ],
    },
    output: {
      path: '/',
      publicPath: '/',
      filename: 'bundle.js',
    },
    plugins: [
      new FriendlyErrorsWebpackPlugin({
        clearConsole: true,
        compilationSuccessInfo: {
          messages: logServerConfigWebpack(entry),
        },
      }),
      new BrowserSyncPlugin({
        host: getenv('BROWSERSYNC_HOST'),
        port: getenv('BROWSERSYNC_PORT'),
        proxy: webhost(entry),
      }, { reload: false }),
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoEmitOnErrorsPlugin(),
    ],
  };
}
</code></pre></div>
<p dir="auto">webpack version:  4.14<br>
Node.js version: 8.91<br>
Operating System: Ubuntu</p>