<p dir="auto"><strong>Do you want to request a <em>feature</em> or report a <em>bug</em>?</strong><br>
<strong>BUG</strong></p>
<p dir="auto"><strong>What is the current behavior?</strong><br>
<code class="notranslate">require.resolveWeak()</code> can't statically determine module string passed to it as well as <code class="notranslate">import().then</code>.</p>
<p dir="auto"><em>modules[moduleId] is undefined here</em>:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));"><pre class="notranslate"><span class="pl-s1">modules</span><span class="pl-kos">[</span><span class="pl-s1">moduleId</span><span class="pl-kos">]</span><span class="pl-kos">.</span><span class="pl-en">call</span><span class="pl-kos">(</span><span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span><span class="pl-kos">,</span> <span class="pl-smi">module</span><span class="pl-kos">,</span> <span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span><span class="pl-kos">,</span> <span class="pl-en">hotCreateRequire</span><span class="pl-kos">(</span><span class="pl-s1">moduleId</span><span class="pl-kos">)</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<blockquote>
<p dir="auto">the moduleId is "./src/components recursive ^\.\/.*$"</p>
</blockquote>
<p dir="auto">Here's the trace:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeError: Cannot read property 'call' of undefined
__webpack_require__
http://localhost:3000/static/bootstrap.js:694:29
fn
http://localhost:3000/static/bootstrap.js:115:20
resolve
http://localhost:3000/static/main.js:35453:34
requireSync
http://localhost:3000/static/main.js:80:58
webpackJsonp.../async-module/src/index.js.exports.default
http://localhost:3000/static/main.js:165:10
Loadable
http://localhost:3000/static/main.js:4176:47
getComponent
http://localhost:3000/static/main.js:35434:35
new App
http://localhost:3000/static/main.js:35379:16
http://localhost:3000/static/main.js:12070:18
measureLifeCyclePerf
http://localhost:3000/static/main.js:11850:12"><pre class="notranslate"><code class="notranslate">TypeError: Cannot read property 'call' of undefined
__webpack_require__
http://localhost:3000/static/bootstrap.js:694:29
fn
http://localhost:3000/static/bootstrap.js:115:20
resolve
http://localhost:3000/static/main.js:35453:34
requireSync
http://localhost:3000/static/main.js:80:58
webpackJsonp.../async-module/src/index.js.exports.default
http://localhost:3000/static/main.js:165:10
Loadable
http://localhost:3000/static/main.js:4176:47
getComponent
http://localhost:3000/static/main.js:35434:35
new App
http://localhost:3000/static/main.js:35379:16
http://localhost:3000/static/main.js:12070:18
measureLifeCyclePerf
http://localhost:3000/static/main.js:11850:12
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
For example, try:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="require.resolveWeak(`${+new Date() % 2 ? './Example' : './Loading'}`)"><pre class="notranslate"><span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolveWeak</span><span class="pl-kos">(</span><span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">+</span><span class="pl-k">new</span> <span class="pl-v">Date</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">%</span> <span class="pl-c1">2</span> ? <span class="pl-s">'./Example'</span> : <span class="pl-s">'./Loading'</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
The expected behavior is that <code class="notranslate">resolveWeak</code> will return the <code class="notranslate">moduleId</code> of the corresponding module. The weird thing is that it works when using Webpack on the server, but in the browser (Chrome) it does not work.</p>
<p dir="auto">In addition, the following works:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="import(/* webpackChunkName: &quot;[request]&quot; */ `${+new Date() % 2 ? './Example' : './Loading'}`).then(..."><pre class="notranslate"><span class="pl-k">import</span><span class="pl-kos">(</span><span class="pl-c">/* webpackChunkName: "[request]" */</span> <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">+</span><span class="pl-k">new</span> <span class="pl-v">Date</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">%</span> <span class="pl-c1">2</span> ? <span class="pl-s">'./Example'</span> : <span class="pl-s">'./Loading'</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">then</span><span class="pl-kos">(</span>...</pre></div>
<p dir="auto"><strong>If this is a feature request, what is motivation or use case for changing the behavior?</strong><br>
The motivation and use case for this is for tools like <em>React Loadable</em> and <em><a href="https://github.com/faceyspacey/react-universal-component">React Universal Component</a></em> which allow for async-loading + server-side rendering of the same component. Currently such tools don't allow for dynamic component selection (because it depends on <code class="notranslate">resolveWeak</code> for synchronous loading if the module is already available).</p>
<p dir="auto">If it was just a case of using <code class="notranslate">import().then</code>, such expressions would work. But <code class="notranslate">resolveWeak</code> is needed to make the server-side synchronous rendering magic happen, as well as the synchronous rendering on initial load in the browser if the corresponding chunks are embedded before <code class="notranslate">main</code>.</p>
<p dir="auto">This is a very important feature for the React Loadable and React Universal Component community and any other future async packages.</p>
<p dir="auto"><strong>Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.</strong></p>
<p dir="auto">VERSION: 2.6.1 + 3.0.0<br>
NODE: 7.7.2<br>
OSX</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
"dev" build exits with status 2.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
It happens when executing <code class="notranslate">webpack serve --progress --profile --config webpack.dev.js</code></p>
<h3 dir="auto">Webpack config</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="/* eslint-disable import/no-dynamic-require */
const path = require('path');
const { camelCase, startCase } = require('lodash');
const webpack = require('webpack');

const { ModuleFederationPlugin } = webpack.container;
const cwd = process.cwd();
const DIST_PATH = path.resolve(cwd, 'dist');
const SRC_PATH = path.resolve(cwd, 'src');
const PACKAGE_JSON_PATH = path.resolve(cwd, 'package.json');
const INDEX_JS_PATH = path.resolve(SRC_PATH, 'index.js');
const isDev = process.env.BABEL_ENV === 'development';
const NODE_MODULES = 'node_modules';
// PATH FROM EK-REACT_MODULE-BUILD (ie: ek-react-module-build/node_modules)
const NODE_MODULES_ABSOLUTE_PATH = path.resolve(__dirname, NODE_MODULES);
// PATH FROM WHERE THE BUILD IS TRIGGERED (ie: ek-request/node_modules)
const NODE_MODULES_RELATIVE_PATH = path.resolve(cwd, NODE_MODULES);

const {
  id: packageId,
  exposes,
  name,
  packageName,
  parentPath = '',
  remotes,
  shared
} = require(PACKAGE_JSON_PATH);

const getDefaultExpose = () =&gt; {
  const componentName = startCase(name).replace(/ /g, '');
  const fullComponentPath = `./${componentName}`;

  return { [fullComponentPath]: './' };
};

const baseConfig = {
  context: SRC_PATH,
  entry: INDEX_JS_PATH,
  resolve: {
    extensions: ['.js'],
    // Avoid duplicates (each module imports only once from app/node_modules)
    modules: [
      NODE_MODULES_ABSOLUTE_PATH,
      NODE_MODULES_RELATIVE_PATH,
      NODE_MODULES
    ]
  },
  output: {
    path: DIST_PATH,
    filename: path.join(parentPath, packageId, 'index.js'),
    chunkFilename: path.join(parentPath, packageId, 'static', '[name].[chunkhash].js'),
    publicPath: 'auto',
    library: packageName || packageId,
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: [SRC_PATH],
        use: [
          {
            loader: require.resolve('babel-loader'),
            options: {
              presets: [
                [
                  require.resolve('@babel/preset-env'),
                  {
                    // debug: true,
                    corejs: {
                      version: '3.14'
                    },
                    useBuiltIns: 'usage',
                    targets: 'defaults'
                  }
                ],
                [
                  require.resolve('@babel/preset-react'),
                  {
                    development: isDev
                  }
                ]
              ],
              plugins: [
                require.resolve('babel-plugin-styled-components'),
                require.resolve('@babel/plugin-proposal-class-properties')
              ]
            }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [
          'css-loader'
        ],
        type: 'javascript/auto'
      },
      {
        test: /\.(png|jpe?g|gif|woff|woff2|eot|ttf)$/,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]'
        },
        type: 'javascript/auto'
      },
      {
        test: /\.svg$/,
        use: [
          require.resolve('@svgr/webpack'),
          {
            loader: require.resolve('url-loader'),
            options: {
              esModule: false
            }
          }
        ],
        type: 'javascript/auto'
      }
    ]
  },
  plugins: [
    new ModuleFederationPlugin({
      name: `${camelCase(name)}`,
      filename: path.join(parentPath, packageId, 'remoteEntry.js'),
      exposes: exposes || getDefaultExpose(),
      shared,
      remotes
    })
  ]
};

module.exports = baseConfig;"><pre class="notranslate"><span class="pl-c">/* eslint-disable import/no-dynamic-require */</span>
<span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-kos">{</span> camelCase<span class="pl-kos">,</span> startCase <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'lodash'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">webpack</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'webpack'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-kos">{</span> ModuleFederationPlugin <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-s1">webpack</span><span class="pl-kos">.</span><span class="pl-c1">container</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">cwd</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-en">cwd</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-c1">DIST_PATH</span> <span class="pl-c1">=</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">cwd</span><span class="pl-kos">,</span> <span class="pl-s">'dist'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-c1">SRC_PATH</span> <span class="pl-c1">=</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">cwd</span><span class="pl-kos">,</span> <span class="pl-s">'src'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-c1">PACKAGE_JSON_PATH</span> <span class="pl-c1">=</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">cwd</span><span class="pl-kos">,</span> <span class="pl-s">'package.json'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-c1">INDEX_JS_PATH</span> <span class="pl-c1">=</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-c1">SRC_PATH</span><span class="pl-kos">,</span> <span class="pl-s">'index.js'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">isDev</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">BABEL_ENV</span> <span class="pl-c1">===</span> <span class="pl-s">'development'</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-c1">NODE_MODULES</span> <span class="pl-c1">=</span> <span class="pl-s">'node_modules'</span><span class="pl-kos">;</span>
<span class="pl-c">// PATH FROM EK-REACT_MODULE-BUILD (ie: ek-react-module-build/node_modules)</span>
<span class="pl-k">const</span> <span class="pl-c1">NODE_MODULES_ABSOLUTE_PATH</span> <span class="pl-c1">=</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">__dirname</span><span class="pl-kos">,</span> <span class="pl-c1">NODE_MODULES</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">// PATH FROM WHERE THE BUILD IS TRIGGERED (ie: ek-request/node_modules)</span>
<span class="pl-k">const</span> <span class="pl-c1">NODE_MODULES_RELATIVE_PATH</span> <span class="pl-c1">=</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">cwd</span><span class="pl-kos">,</span> <span class="pl-c1">NODE_MODULES</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-kos">{</span>
  <span class="pl-c1">id</span>: <span class="pl-s1">packageId</span><span class="pl-kos">,</span>
  exposes<span class="pl-kos">,</span>
  name<span class="pl-kos">,</span>
  packageName<span class="pl-kos">,</span>
  parentPath <span class="pl-c1">=</span> <span class="pl-s">''</span><span class="pl-kos">,</span>
  remotes<span class="pl-kos">,</span>
  shared
<span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-c1">PACKAGE_JSON_PATH</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-en">getDefaultExpose</span> <span class="pl-c1">=</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">const</span> <span class="pl-s1">componentName</span> <span class="pl-c1">=</span> <span class="pl-en">startCase</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-pds"><span class="pl-c1">/</span> <span class="pl-c1">/</span>g</span><span class="pl-kos">,</span> <span class="pl-s">''</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">fullComponentPath</span> <span class="pl-c1">=</span> <span class="pl-s">`./<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">componentName</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-kos">{</span> <span class="pl-kos">[</span><span class="pl-s1">fullComponentPath</span><span class="pl-kos">]</span>: <span class="pl-s">'./'</span> <span class="pl-kos">}</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">baseConfig</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
  <span class="pl-c1">context</span>: <span class="pl-c1">SRC_PATH</span><span class="pl-kos">,</span>
  <span class="pl-c1">entry</span>: <span class="pl-c1">INDEX_JS_PATH</span><span class="pl-kos">,</span>
  <span class="pl-c1">resolve</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">extensions</span>: <span class="pl-kos">[</span><span class="pl-s">'.js'</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
    <span class="pl-c">// Avoid duplicates (each module imports only once from app/node_modules)</span>
    <span class="pl-c1">modules</span>: <span class="pl-kos">[</span>
      <span class="pl-c1">NODE_MODULES_ABSOLUTE_PATH</span><span class="pl-kos">,</span>
      <span class="pl-c1">NODE_MODULES_RELATIVE_PATH</span><span class="pl-kos">,</span>
      <span class="pl-c1">NODE_MODULES</span>
    <span class="pl-kos">]</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">output</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">path</span>: <span class="pl-c1">DIST_PATH</span><span class="pl-kos">,</span>
    <span class="pl-c1">filename</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">parentPath</span><span class="pl-kos">,</span> <span class="pl-s1">packageId</span><span class="pl-kos">,</span> <span class="pl-s">'index.js'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">chunkFilename</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">parentPath</span><span class="pl-kos">,</span> <span class="pl-s1">packageId</span><span class="pl-kos">,</span> <span class="pl-s">'static'</span><span class="pl-kos">,</span> <span class="pl-s">'[name].[chunkhash].js'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
    <span class="pl-c1">publicPath</span>: <span class="pl-s">'auto'</span><span class="pl-kos">,</span>
    <span class="pl-c1">library</span>: <span class="pl-s1">packageName</span> <span class="pl-c1">||</span> <span class="pl-s1">packageId</span><span class="pl-kos">,</span>
    <span class="pl-c1">libraryTarget</span>: <span class="pl-s">'umd'</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">module</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">rules</span>: <span class="pl-kos">[</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>js<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">include</span>: <span class="pl-kos">[</span><span class="pl-c1">SRC_PATH</span><span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">use</span>: <span class="pl-kos">[</span>
          <span class="pl-kos">{</span>
            <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'babel-loader'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
            <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
              <span class="pl-c1">presets</span>: <span class="pl-kos">[</span>
                <span class="pl-kos">[</span>
                  <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'@babel/preset-env'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                  <span class="pl-kos">{</span>
                    <span class="pl-c">// debug: true,</span>
                    <span class="pl-c1">corejs</span>: <span class="pl-kos">{</span>
                      <span class="pl-c1">version</span>: <span class="pl-s">'3.14'</span>
                    <span class="pl-kos">}</span><span class="pl-kos">,</span>
                    <span class="pl-c1">useBuiltIns</span>: <span class="pl-s">'usage'</span><span class="pl-kos">,</span>
                    <span class="pl-c1">targets</span>: <span class="pl-s">'defaults'</span>
                  <span class="pl-kos">}</span>
                <span class="pl-kos">]</span><span class="pl-kos">,</span>
                <span class="pl-kos">[</span>
                  <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'@babel/preset-react'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                  <span class="pl-kos">{</span>
                    <span class="pl-c1">development</span>: <span class="pl-s1">isDev</span>
                  <span class="pl-kos">}</span>
                <span class="pl-kos">]</span>
              <span class="pl-kos">]</span><span class="pl-kos">,</span>
              <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
                <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'babel-plugin-styled-components'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
                <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'@babel/plugin-proposal-class-properties'</span><span class="pl-kos">)</span>
              <span class="pl-kos">]</span>
            <span class="pl-kos">}</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">]</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>css<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">use</span>: <span class="pl-kos">[</span>
          <span class="pl-s">'css-loader'</span>
        <span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">type</span>: <span class="pl-s">'javascript/auto'</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span><span class="pl-kos">(</span>png<span class="pl-c1">|</span>jpe?g<span class="pl-c1">|</span>gif<span class="pl-c1">|</span>woff<span class="pl-c1">|</span>woff2<span class="pl-c1">|</span>eot<span class="pl-c1">|</span>ttf<span class="pl-kos">)</span><span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">loader</span>: <span class="pl-s">'file-loader'</span><span class="pl-kos">,</span>
        <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
          <span class="pl-c1">name</span>: <span class="pl-s">'[path][name].[ext]'</span>
        <span class="pl-kos">}</span><span class="pl-kos">,</span>
        <span class="pl-c1">type</span>: <span class="pl-s">'javascript/auto'</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-kos">{</span>
        <span class="pl-c1">test</span>: <span class="pl-pds"><span class="pl-c1">/</span><span class="pl-cce">\.</span>svg<span class="pl-cce">$</span><span class="pl-c1">/</span></span><span class="pl-kos">,</span>
        <span class="pl-c1">use</span>: <span class="pl-kos">[</span>
          <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'@svgr/webpack'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
          <span class="pl-kos">{</span>
            <span class="pl-c1">loader</span>: <span class="pl-en">require</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s">'url-loader'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
            <span class="pl-c1">options</span>: <span class="pl-kos">{</span>
              <span class="pl-c1">esModule</span>: <span class="pl-c1">false</span>
            <span class="pl-kos">}</span>
          <span class="pl-kos">}</span>
        <span class="pl-kos">]</span><span class="pl-kos">,</span>
        <span class="pl-c1">type</span>: <span class="pl-s">'javascript/auto'</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">]</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
  <span class="pl-c1">plugins</span>: <span class="pl-kos">[</span>
    <span class="pl-k">new</span> <span class="pl-v">ModuleFederationPlugin</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">name</span>: <span class="pl-s">`<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-en">camelCase</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span>
      <span class="pl-c1">filename</span>: <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">join</span><span class="pl-kos">(</span><span class="pl-s1">parentPath</span><span class="pl-kos">,</span> <span class="pl-s1">packageId</span><span class="pl-kos">,</span> <span class="pl-s">'remoteEntry.js'</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      <span class="pl-c1">exposes</span>: <span class="pl-s1">exposes</span> <span class="pl-c1">||</span> <span class="pl-en">getDefaultExpose</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">,</span>
      shared<span class="pl-kos">,</span>
      remotes
    <span class="pl-kos">}</span><span class="pl-kos">)</span>
  <span class="pl-kos">]</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">baseConfig</span><span class="pl-kos">;</span></pre></div>
<h3 dir="auto">Webpack dev config</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const path = require('path');
const portfinder = require('portfinder');
const request = require('request');

const DEVELOPMENT_MODE = 'development';

process.env.BABEL_ENV = DEVELOPMENT_MODE;
process.env.NODE_ENV = DEVELOPMENT_MODE;

const baseConfig = require('./webpack.base');

const cwd = process.cwd();
const PACKAGE_JSON_PATH = path.resolve(cwd, 'package.json');
const HOST = process.env.HOST || '0.0.0.0';
const PROXY_SERVER_PORT = process.env.PROXY_SERVER_PORT || 8000;

// eslint-disable-next-line import/no-dynamic-require
const { id: packageId } = require(PACKAGE_JSON_PATH);
let errorStatus = false;

async function startDevServer() {
  // Find a suitable port
  portfinder.basePort = 8001;
  const port = await portfinder.getPortPromise();

  // Override some configuration for development environment
  const devConfig = {
    ...baseConfig,
    devtool: 'inline-source-map',
    mode: DEVELOPMENT_MODE,
    target: 'web',
    devServer: {
      compress: true,
      host: HOST,
      hot: true,
      port,
      writeToDisk: true
    }
  };

  // Register module on local proxy server
  setInterval(() =&gt; {
    request(
      `http://${HOST}:${PROXY_SERVER_PORT}/register/${encodeURIComponent(`/${packageId}`)}/${port}`,
      (error, response) =&gt; {
        if (response &amp;&amp; response.statusCode === 404) {
          process.stdout.write('Attempt to connect to server\n');
        }
        if (error) {
          if (!errorStatus) {
            console.error({ error });
          }
          errorStatus = true;
        }
      }
    );
  }, 1000);

  return devConfig;
}

module.exports = startDevServer;"><pre class="notranslate"><span class="pl-k">const</span> <span class="pl-s1">path</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'path'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">portfinder</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'portfinder'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">request</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'request'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-c1">DEVELOPMENT_MODE</span> <span class="pl-c1">=</span> <span class="pl-s">'development'</span><span class="pl-kos">;</span>

<span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">BABEL_ENV</span> <span class="pl-c1">=</span> <span class="pl-c1">DEVELOPMENT_MODE</span><span class="pl-kos">;</span>
<span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">NODE_ENV</span> <span class="pl-c1">=</span> <span class="pl-c1">DEVELOPMENT_MODE</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">baseConfig</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./webpack.base'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">cwd</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-en">cwd</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-c1">PACKAGE_JSON_PATH</span> <span class="pl-c1">=</span> <span class="pl-s1">path</span><span class="pl-kos">.</span><span class="pl-en">resolve</span><span class="pl-kos">(</span><span class="pl-s1">cwd</span><span class="pl-kos">,</span> <span class="pl-s">'package.json'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-c1">HOST</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">HOST</span> <span class="pl-c1">||</span> <span class="pl-s">'0.0.0.0'</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-c1">PROXY_SERVER_PORT</span> <span class="pl-c1">=</span> <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">env</span><span class="pl-kos">.</span><span class="pl-c1">PROXY_SERVER_PORT</span> <span class="pl-c1">||</span> <span class="pl-c1">8000</span><span class="pl-kos">;</span>

<span class="pl-c">// eslint-disable-next-line import/no-dynamic-require</span>
<span class="pl-k">const</span> <span class="pl-kos">{</span> <span class="pl-c1">id</span>: <span class="pl-s1">packageId</span> <span class="pl-kos">}</span> <span class="pl-c1">=</span> <span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-c1">PACKAGE_JSON_PATH</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">let</span> <span class="pl-s1">errorStatus</span> <span class="pl-c1">=</span> <span class="pl-c1">false</span><span class="pl-kos">;</span>

<span class="pl-k">async</span> <span class="pl-k">function</span> <span class="pl-en">startDevServer</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-c">// Find a suitable port</span>
  <span class="pl-s1">portfinder</span><span class="pl-kos">.</span><span class="pl-c1">basePort</span> <span class="pl-c1">=</span> <span class="pl-c1">8001</span><span class="pl-kos">;</span>
  <span class="pl-k">const</span> <span class="pl-s1">port</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">portfinder</span><span class="pl-kos">.</span><span class="pl-en">getPortPromise</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-c">// Override some configuration for development environment</span>
  <span class="pl-k">const</span> <span class="pl-s1">devConfig</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
    ...<span class="pl-s1">baseConfig</span><span class="pl-kos">,</span>
    <span class="pl-c1">devtool</span>: <span class="pl-s">'inline-source-map'</span><span class="pl-kos">,</span>
    <span class="pl-c1">mode</span>: <span class="pl-c1">DEVELOPMENT_MODE</span><span class="pl-kos">,</span>
    <span class="pl-c1">target</span>: <span class="pl-s">'web'</span><span class="pl-kos">,</span>
    <span class="pl-c1">devServer</span>: <span class="pl-kos">{</span>
      <span class="pl-c1">compress</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
      <span class="pl-c1">host</span>: <span class="pl-c1">HOST</span><span class="pl-kos">,</span>
      <span class="pl-c1">hot</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
      port<span class="pl-kos">,</span>
      <span class="pl-c1">writeToDisk</span>: <span class="pl-c1">true</span>
    <span class="pl-kos">}</span>
  <span class="pl-kos">}</span><span class="pl-kos">;</span>

  <span class="pl-c">// Register module on local proxy server</span>
  <span class="pl-en">setInterval</span><span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-s1">request</span><span class="pl-kos">(</span>
      <span class="pl-s">`http://<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">HOST</span><span class="pl-kos">}</span></span>:<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-c1">PROXY_SERVER_PORT</span><span class="pl-kos">}</span></span>/register/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-en">encodeURIComponent</span><span class="pl-kos">(</span><span class="pl-s">`/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">packageId</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>/<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">port</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">,</span>
      <span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">,</span> <span class="pl-s1">response</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">response</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-s1">response</span><span class="pl-kos">.</span><span class="pl-c1">statusCode</span> <span class="pl-c1">===</span> <span class="pl-c1">404</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
          <span class="pl-s1">process</span><span class="pl-kos">.</span><span class="pl-c1">stdout</span><span class="pl-kos">.</span><span class="pl-en">write</span><span class="pl-kos">(</span><span class="pl-s">'Attempt to connect to server\n'</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
        <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
          <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-s1">errorStatus</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">error</span><span class="pl-kos">(</span><span class="pl-kos">{</span> error <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
          <span class="pl-kos">}</span>
          <span class="pl-s1">errorStatus</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span><span class="pl-kos">;</span>
        <span class="pl-kos">}</span>
      <span class="pl-kos">}</span>
    <span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-c1">1000</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

  <span class="pl-k">return</span> <span class="pl-s1">devConfig</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-smi">module</span><span class="pl-kos">.</span><span class="pl-c1">exports</span> <span class="pl-c1">=</span> <span class="pl-s1">startDevServer</span><span class="pl-kos">;</span></pre></div>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
The build should finish without errors, this property is supported per configuration.</p>


<p dir="auto"><strong>Other relevant information:</strong></p>
<h3 dir="auto">Using:</h3>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;dependencies&quot;: {
    &quot;@babel/core&quot;: &quot;^7.13.10&quot;,
    &quot;@babel/preset-env&quot;: &quot;^7.14.4&quot;,
    &quot;@babel/preset-react&quot;: &quot;^7.12.13&quot;,
    &quot;@svgr/webpack&quot;: &quot;^5.5.0&quot;,
    &quot;babel-loader&quot;: &quot;^8.2.2&quot;,
    &quot;babel-plugin-styled-components&quot;: &quot;^1.12.0&quot;,
    &quot;core-js&quot;: &quot;^3.14.0&quot;,
    &quot;css-loader&quot;: &quot;^5.2.6&quot;,
    &quot;css-minimizer-webpack-plugin&quot;: &quot;^3.0.1&quot;,
    &quot;file-loader&quot;: &quot;^6.2.0&quot;,
    &quot;lodash&quot;: &quot;^4.17.21&quot;,
    &quot;portfinder&quot;: &quot;^1.0.28&quot;,
    &quot;request&quot;: &quot;^2.88.2&quot;,
    &quot;url-loader&quot;: &quot;^4.1.1&quot;,
    &quot;webpack&quot;: &quot;^5.38.1&quot;,
    &quot;webpack-cli&quot;: &quot;^4.5.0&quot;,
    &quot;webpack-dev-server&quot;: &quot;^4.0.0-beta.3&quot;
  },"><pre class="notranslate"><span class="pl-ent">"dependencies"</span>: {
    <span class="pl-ent">"@babel/core"</span>: <span class="pl-s"><span class="pl-pds">"</span>^7.13.10<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@babel/preset-env"</span>: <span class="pl-s"><span class="pl-pds">"</span>^7.14.4<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@babel/preset-react"</span>: <span class="pl-s"><span class="pl-pds">"</span>^7.12.13<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"@svgr/webpack"</span>: <span class="pl-s"><span class="pl-pds">"</span>^5.5.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babel-loader"</span>: <span class="pl-s"><span class="pl-pds">"</span>^8.2.2<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"babel-plugin-styled-components"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.12.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"core-js"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.14.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"css-loader"</span>: <span class="pl-s"><span class="pl-pds">"</span>^5.2.6<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"css-minimizer-webpack-plugin"</span>: <span class="pl-s"><span class="pl-pds">"</span>^3.0.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"file-loader"</span>: <span class="pl-s"><span class="pl-pds">"</span>^6.2.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"lodash"</span>: <span class="pl-s"><span class="pl-pds">"</span>^4.17.21<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"portfinder"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.0.28<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"request"</span>: <span class="pl-s"><span class="pl-pds">"</span>^2.88.2<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"url-loader"</span>: <span class="pl-s"><span class="pl-pds">"</span>^4.1.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"webpack"</span>: <span class="pl-s"><span class="pl-pds">"</span>^5.38.1<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"webpack-cli"</span>: <span class="pl-s"><span class="pl-pds">"</span>^4.5.0<span class="pl-pds">"</span></span>,
    <span class="pl-ent">"webpack-dev-server"</span>: <span class="pl-s"><span class="pl-pds">"</span>^4.0.0-beta.3<span class="pl-pds">"</span></span>
  },</pre></div>
<p dir="auto">Node.js version:  ^12<br>
Operating System:  OSX</p>