Issue 1:
Bug report

What is the current behavior?

seeing this error in minified version of code:

console error: Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.

code works fine in:

non-minified version

when compiled with 4.43.0 of webpack

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

What is the expected behavior?

no exceptions

Other relevant information:

webpack version: 4.44.0

Node.js version:

Operating System:

Additional tools:

Issue 2:
What is the current behavior?

I moved from 5.beta.17 to the official 5.0.0 webpack version and the module federation project fails with with different errors as I think the main one is ChunkLoadError: Loading chunk src_components_admin_users_index_js failed..

Funny thing is that sometimes it works sometimes not. Sometimes its loading all the chunks sometimes not..

Both host and plugin projects live in S3 bucket and when I try to connect from my local pc to the s3 bucket for the plugin everything works smoothly. I don't know how this chunk name was created as I don't see it in the s3 bucket.

I am developing a host and plugin project using module federation since the beginning and everything was ok until I move to 5.0.0.

The 1st error which I get is:

GET ... 404 ChunkLoadError: Loading chunk src_components_admin_users_index_js failed.. --> But there is not a chunk with this name at all..

2nd error which I get and it is super weird is about duplicated graphql packages.

** I had the same issue in the beginning but forcing the dep to be singleton worked perfectly before.

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

Host project: webpack.config:

/** @type {import('webpack').Configuration} */
module.exports = {
output: {
publicPath: dotenv.parsed.REACT_APP_PUBLIC_PATH,
uniqueName: 'platform',
filename: '[name].js',
library: 'platform',
chunkFilename: '[name][chunkhash].js'
},
devtool: 'source-map',
cache: false,
resolve: {
extensions: ['.jsx', '.js', '.json'],
alias: {... }
},
module: {
rules: [
.... loaders,
// I leave this one here as I needed to do in order to run the project locally after migration to 5.00
{
test: /\.m?js/,
resolve: {
fullySpecified: false
}
}
]
},
plugins: [
new ModuleFederationPlugin({
name: 'platform',
library: { type: 'var', name: 'platform' },
filename: 'remoteManifest.js',
remotes: {
app1: 'app1'
},
exposes: {
....Components..
},
shared: {
...dependencies,
react: {
eager: true,
singleton: true,
requiredVersion: dependencies.react
},
'react-dom': {
eager: true,
singleton: true,
requiredVersion: dependencies['react-dom']
},
'react-router-dom': {
eager: true,
singleton: true,
requiredVersion: dependencies['react-router-dom']
},
'@apollo/client': {
singleton: true,
requiredVersion: dependencies['@apollo/client']
},
graphql: {
singleton: true,
requiredVersion: dependencies['graphql']
},
}
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'public/index.html'),
filename: './index.html',
inject: true,
favicon: path.resolve(__dirname, 'public/favicon.ico')
})
]
};

webpack.config remote plugin:

/** @type {import('webpack').Configuration} */
module.exports = {
output: {
path: DIST_DIR,
uniqueName: 'plugin',
filename: '[name].js',
library: 'plugin',
chunkFilename: '[name][chunkhash].js',
publicPath: dotenv.parsed.REACT_APP_PUBLIC_PATH
},
devtool: 'source-map',
resolve: {
extensions: ['.jsx', '.js', '.json'],
alias: {}
},
devServer: {
historyApiFallback: true,
inline: true,
port: parseInt(dotenv.parsed.PORT)
},
module: {
rules: [
loaders...,
{
test: /\.m?js/,
type: 'javascript/auto',
resolve: {
fullySpecified: false
}
}
]
},
plugins: [
new ModuleFederationPlugin({
name: 'app1',
library: { type: 'var', name: 'app1' },
filename: 'remoteManifest.js',
remotes: {
platform: 'platform'
},
exposes: {
....components
},
shared: {
...dependencies,
react: {
singleton: true,
requiredVersion: dependencies.react
},
'react-dom': {
singleton: true,
requiredVersion: dependencies['react-dom']
},
'@apollo/client': {
singleton: true,
requiredVersion: dependencies['@apollo/client']
},
graphql: {
singleton: true,
requiredVersion: dependencies['graphql']
}
}
})
]
};

And my package.json: ( they look pretty much the same in both ):

"scripts": {
"start": "webpack-dev-server --mode development --liveReload",
"build:prod": "webpack --mode production",
"generate": "graphql-codegen --config codegen.yml",
.. more scripts...
},
"dependencies": {
"@apollo/client": "^3.2.3",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/runtime": "^7.11.2",
"dotenv": "^8.2.0",
"exceljs": "^4.1.1",
"file-saver": "^2.0.2",
"graphql": "15.3.0",
"jsdoc": "^3.6.4",
"json-loader": "^0.5.7",
"lodash": "^4.17.19",
"mini-css-extract-plugin": "^0.9.0",
"moment": "^2.27.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-flexa": "^0.9.1",
"react-router-dom": "5.2.0",
"react-select": "^3.1.0"
},

Code to get remote scripts:

export const useDynamicScript = () => {
const [ready, setReady] = useState(false);
const [failed, setFailed] = useState(false);

useEffect(() => {
const fetchManifests = async (urls) => {
Promise.all(urls.map((url) => loadScript(url))).then(() => setReady(true));
};
setReady(false);
setFailed(false);

let urls = Object.entries(process.env)
.filter((x) => x[0].endsWith('PACKAGE'))
.map((y) => y[1]);

fetchManifests(urls);
}, []);

return {
ready,
failed
};
};

export const loadComponent = (scope, module) => {
return async () => {
// Initializes the share scope. This fills it with known provided modules from this build and all remotes
await __webpack_init_sharing__('default');
const container = window[scope]; // or get the container somewhere else
// Initialize the container, it may provide shared modules
await container.init(__webpack_share_scopes__.default);
const factory = await window[scope].get(module);
const Module = factory();

return Module;
};
};

const loadScript = (url) =>
new Promise((resolve) => {
const element = document.createElement('script');
element.async = true;
element.src = `${url}remoteManifest.js`;
element.type = 'text/javascript';

document.head.appendChild(element);

element.addEventListener('load', resolve, {
once: true
});
});

What I tried?

Connecting to the s3 bucket from my local machine and everything works perfectly.

Adding resolutions in the package.jsons in both of the projects.

Clean installs multiple times

Singleton/Eager in both of them ( another topic is that I dont think its needed - just tried everything which I could think of)

What is the expected behavior?

It should load normally as its in local mode.

Other relevant information:

webpack version: 5.0.0

Node.js version: 12.10

Operating System:

Additional tools: Hosted in S3 bucket