<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
When trying to run production build of app errors out on</p>
<p dir="auto"><code class="notranslate">node dist/main.js</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="TypeError [ERR_INVALID_ARG_TYPE]: The &quot;path&quot; argument must be of type string. Received type number (3320)"><pre class="notranslate"><code class="notranslate">TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type number (3320)
</code></pre></div>
<p dir="auto"><code class="notranslate">main.js</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const uiBasePath = path_1.default.dirname(/*require.resolve*/(3320));"><pre class="notranslate"><code class="notranslate">const uiBasePath = path_1.default.dirname(/*require.resolve*/(3320));
</code></pre></div>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
Use <a href="https://github.com/lukepolo/webpack-resolve-bug/tree/main/dist">https://github.com/lukepolo/webpack-resolve-bug/tree/main/dist</a>, run <code class="notranslate">node dist/main.js</code> , and you should see the error.</p>
<p dir="auto"><strong>What is the expected behavior?</strong><br>
To properly resolve the path as a string</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.48.0<br>
Node.js version: v12.16.3<br>
Operating System: osx<br>
Additional tools:</p>
<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong><br>
Page no rendering<br>
<code class="notranslate">main.js</code> return error : <code class="notranslate">Uncaught SyntaxError: Unexpected token '!=='</code></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
I have 2 apps :</p>
<ul dir="auto">
<li>shell : manager, head of app</li>
<li>fragment: one of the multiple apps. Will be duplicated to have n apps in MFE.</li>
</ul>
<p dir="auto"><strong>SHELL</strong><br>
index.html</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;script src=&quot;http://localhost:3001/remoteEntry.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id=&quot;app&quot;&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;script src="http://localhost:3001/remoteEntry.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="app"&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div>
<p dir="auto">App.vue</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;div id=&quot;app&quot;&gt;
    SHELL
    &lt;compo&gt;COME FROM FRAGMENT&lt;/compo&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: &quot;ShellApp&quot;,
  components: {
    Compo: () =&gt; import('fragment1/Compo').catch((err) =&gt; ({
        render: h =&gt; h('div', [
              h('pre', err.name),
              h('pre', err.stack)
        ])
    }))
  },
}
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;template&gt;
  &lt;div id="app"&gt;
    SHELL
    &lt;compo&gt;COME FROM FRAGMENT&lt;/compo&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name: "ShellApp",
  components: {
    Compo: () =&gt; import('fragment1/Compo').catch((err) =&gt; ({
        render: h =&gt; h('div', [
              h('pre', err.name),
              h('pre', err.stack)
        ])
    }))
  },
}
&lt;/script&gt;
</code></pre></div>
<p dir="auto">webpack.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const paths = require('./paths')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { ModuleFederationPlugin } = require(&quot;webpack&quot;).container

module.exports = {
  entry: [paths.src + '/main.js'],
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Constellation',
      favicon: paths.public + '/favicon.png',
      template: paths.public + '/index.html',
      filename: 'index.html',
    }),

    new VueLoaderPlugin(),

    new ModuleFederationPlugin({
      name: &quot;shell&quot;,
      filename: &quot;remoteEntry.js&quot;,
      remotes: {
        // fragment1: &quot;fragment1@http://localhost:3001/remoteEntry.js&quot;,  // WORK
        fragment1: &quot;fragment1&quot;,                                          // DOESN'T WORK
      },
    }),
  ]
}"><pre class="notranslate"><code class="notranslate">const paths = require('./paths')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { ModuleFederationPlugin } = require("webpack").container

module.exports = {
  entry: [paths.src + '/main.js'],
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Constellation',
      favicon: paths.public + '/favicon.png',
      template: paths.public + '/index.html',
      filename: 'index.html',
    }),

    new VueLoaderPlugin(),

    new ModuleFederationPlugin({
      name: "shell",
      filename: "remoteEntry.js",
      remotes: {
        // fragment1: "fragment1@http://localhost:3001/remoteEntry.js",  // WORK
        fragment1: "fragment1",                                          // DOESN'T WORK
      },
    }),
  ]
}
</code></pre></div>
<p dir="auto"><strong>FRAGMENT</strong></p>
<p dir="auto">webpack.js</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="const paths = require('./paths')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { ModuleFederationPlugin } = require(&quot;webpack&quot;).container;

module.exports = {
  entry: [paths.src + '/main.js'],

  plugins: [
    new HtmlWebpackPlugin({
      title: 'Constellation-Fragment',
      favicon: paths.public + '/favicon.png',
      template: paths.public + '/index.html',
      filename: 'index.html',
    }),

    new VueLoaderPlugin(),

    new ModuleFederationPlugin({
      name: &quot;fragment1&quot;,
      filename: &quot;remoteEntry.js&quot;,
      remotes: {},
      exposes: {
        &quot;./Compo&quot;: &quot;@c/Compo&quot;
      },
    })
  ]
}"><pre class="notranslate"><code class="notranslate">const paths = require('./paths')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
  entry: [paths.src + '/main.js'],

  plugins: [
    new HtmlWebpackPlugin({
      title: 'Constellation-Fragment',
      favicon: paths.public + '/favicon.png',
      template: paths.public + '/index.html',
      filename: 'index.html',
    }),

    new VueLoaderPlugin(),

    new ModuleFederationPlugin({
      name: "fragment1",
      filename: "remoteEntry.js",
      remotes: {},
      exposes: {
        "./Compo": "@c/Compo"
      },
    })
  ]
}
</code></pre></div>
<p dir="auto">Compo.vue</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;template&gt;
  &lt;div class=&quot;compo&quot;&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name:&quot;Content&quot;
}
&lt;/script&gt;"><pre class="notranslate"><code class="notranslate">&lt;template&gt;
  &lt;div class="compo"&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  name:"Content"
}
&lt;/script&gt;
</code></pre></div>
<p dir="auto"><strong>Explanation</strong><br>
When i use this line in <code class="notranslate">shell</code> (webpack config) and nothing import in index.html, all work fine :<br>
<code class="notranslate">fragment1: "fragment1@http://localhost:3001/remoteEntry.js"</code></p>
<p dir="auto">I do not know in advance the url of the fragments / apps. I need to make a configuration file or write the urls directly in the <code class="notranslate">index.html</code>. So I change shell with</p>
<ul dir="auto">
<li>add script in <code class="notranslate">index.html</code>  : <code class="notranslate">&lt;script src="http://localhost:3001/remoteEntry.js"&gt;&lt;/script&gt;</code></li>
<li>change <code class="notranslate">webpack </code> config remote : <code class="notranslate">fragment1: "fragment1"</code></li>
</ul>
<p dir="auto">When I run everything I get the following error in the browser (<code class="notranslate">main.js</code>) : <code class="notranslate">Uncaught SyntaxError: Unexpected token '!=='</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="/*!****************************!*\
  !*** external &quot;fragment1&quot; ***!
  \****************************/
/*! dynamic exports */
/*! exports [maybe provided (runtime-defined)] [no usage info] */
/*! runtime requirements: module, __webpack_require__.l, __webpack_require__.* */
/***/ ((module, __unused_webpack_exports, __webpack_require__) =&gt; {

&quot;use strict&quot;;
var error = new Error();
module.exports = new Promise((resolve, reject) =&gt; {
	if(typeof  !== &quot;undefined&quot;) return resolve();                               // THIS LINE
	__webpack_require__.l(&quot;fragment1&quot;, (event) =&gt; {
		if(typeof  !== &quot;undefined&quot;) return resolve();
		var errorType = event &amp;&amp; (event.type === 'load' ? 'missing' : event.type);
		var realSrc = event &amp;&amp; event.target &amp;&amp; event.target.src;
		error.message = 'Loading script failed.\n(' + errorType + ': ' + realSrc + ')';
		error.name = 'ScriptExternalLoadError';
		error.type = errorType;
		error.request = realSrc;
		reject(error);
	}, &quot;&quot;);
}).then(() =&gt; );"><pre class="notranslate"><code class="notranslate">/*!****************************!*\
  !*** external "fragment1" ***!
  \****************************/
/*! dynamic exports */
/*! exports [maybe provided (runtime-defined)] [no usage info] */
/*! runtime requirements: module, __webpack_require__.l, __webpack_require__.* */
/***/ ((module, __unused_webpack_exports, __webpack_require__) =&gt; {

"use strict";
var error = new Error();
module.exports = new Promise((resolve, reject) =&gt; {
	if(typeof  !== "undefined") return resolve();                               // THIS LINE
	__webpack_require__.l("fragment1", (event) =&gt; {
		if(typeof  !== "undefined") return resolve();
		var errorType = event &amp;&amp; (event.type === 'load' ? 'missing' : event.type);
		var realSrc = event &amp;&amp; event.target &amp;&amp; event.target.src;
		error.message = 'Loading script failed.\n(' + errorType + ': ' + realSrc + ')';
		error.name = 'ScriptExternalLoadError';
		error.type = errorType;
		error.request = realSrc;
		reject(error);
	}, "");
}).then(() =&gt; );
</code></pre></div>
<p dir="auto">I looked in all the examples and found nothing. Even when adapting to Vue.<br>
<a href="https://github.com/module-federation/module-federation-examples">https://github.com/module-federation/module-federation-examples</a><br>
<a href="https://github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host">https://github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host</a><br>
<a href="https://indepth.dev/webpack-5-module-federation-a-game-changer-in-javascript-architecture/" rel="nofollow">https://indepth.dev/webpack-5-module-federation-a-game-changer-in-javascript-architecture/</a></p>






<p dir="auto"><strong>What is the expected behavior?</strong><br>
No error and page rendering</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.1.3<br>
Node.js version: 12.19.0<br>
Operating System: Windows<br>
Additional tools: Vue.js 2.6.12</p>