Issue 1:
Bug report

What is the current behavior?

When trying to run production build of app errors out on

node dist/main.js

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type number (3320)

main.js

const uiBasePath = path_1.default.dirname(/*require.resolve*/(3320));

If the current behavior is a bug, please provide the steps to reproduce.

Use https://github.com/lukepolo/webpack-resolve-bug/tree/main/dist, run node dist/main.js , and you should see the error.

What is the expected behavior?

To properly resolve the path as a string

Other relevant information:

webpack version: 5.48.0

Node.js version: v12.16.3

Operating System: osx

Additional tools:

Issue 2:
Bug report

What is the current behavior?

Page no rendering

main.js return error : Uncaught SyntaxError: Unexpected token '!=='

If the current behavior is a bug, please provide the steps to reproduce.

I have 2 apps :

shell : manager, head of app

fragment: one of the multiple apps. Will be duplicated to have n apps in MFE.

SHELL

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://localhost:3001/remoteEntry.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>

App.vue

<template>
<div id="app">
SHELL
<compo>COME FROM FRAGMENT</compo>
</div>
</template>

<script>
export default {
name: "ShellApp",
components: {
Compo: () => import('fragment1/Compo').catch((err) => ({
render: h => h('div', [
h('pre', err.name),
h('pre', err.stack)
])
}))
},
}
</script>

webpack.js

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

FRAGMENT

webpack.js

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"
},
})
]
}

Compo.vue

<template>
<div class="compo"><slot></slot></div>
</template>

<script>
export default {
name:"Content"
}
</script>

Explanation

When i use this line in shell (webpack config) and nothing import in index.html, all work fine :

fragment1: "fragment1@http://localhost:3001/remoteEntry.js"

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 index.html. So I change shell with

add script in index.html : <script src="http://localhost:3001/remoteEntry.js"></script>

change webpack config remote : fragment1: "fragment1"

When I run everything I get the following error in the browser (main.js) : Uncaught SyntaxError: Unexpected token '!=='

/*!****************************!*\
!*** 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__) => {

"use strict";
var error = new Error();
module.exports = new Promise((resolve, reject) => {
if(typeof !== "undefined") return resolve(); // THIS LINE
__webpack_require__.l("fragment1", (event) => {
if(typeof !== "undefined") return resolve();
var errorType = event && (event.type === 'load' ? 'missing' : event.type);
var realSrc = event && event.target && event.target.src;
error.message = 'Loading script failed.\n(' + errorType + ': ' + realSrc + ')';
error.name = 'ScriptExternalLoadError';
error.type = errorType;
error.request = realSrc;
reject(error);
}, "");
}).then(() => );

I looked in all the examples and found nothing. Even when adapting to Vue.

https://github.com/module-federation/module-federation-examples

https://github.com/module-federation/module-federation-examples/tree/master/dynamic-system-host

https://indepth.dev/webpack-5-module-federation-a-game-changer-in-javascript-architecture/

What is the expected behavior?

No error and page rendering

Other relevant information:

webpack version: 5.1.3

Node.js version: 12.19.0

Operating System: Windows

Additional tools: Vue.js 2.6.12