Remote into Web Component from React giving an error saying " Module does not exist in container"

[pranavbedi]

Bug report

What is the current behavior?

When I bring the To-Do-List component into the main app, it says it is unable to be found. This error does not happen when i try use a react component but only when I try to use a Web Component.

The error i get is :
container_entry:12 Uncaught (in promise) Error: Module "./ToDoList_remoteEntry.js" does not exist in container.
while loading "./ToDoList_remoteEntry.js" from webpack/container/reference/ToDoList
at eval (container_entry:12:11)

This is the webpack config file in the main app:

`const path = require("path");
const webpack = require('webpack');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;

module.exports = {
entry: "/src/index.js",
output: {
path: path.resolve(__dirname, "dist"),
publicPath: "auto",
},
devServer: {
port: 9000,
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"],
},
{
test: /.css$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
],
},
plugins: [
new webpack.ProvidePlugin({
process: 'process/browser',
}),
new ModuleFederationPlugin({
remotes: {
AccountsSummaryApp_Remote:
"AccountsSummaryApp@http://localhost:9001/accountsSummaryApp_remote.js",
AccountDetailsApp_Remote:
"AccountDetailsApp@http://localhost:9002/accountDetailsApp_remote.js",
ToDoList:
"ToDoList@http://localhost:3001/ToDoList_remoteEntry.js",
},
}),
new HtmlWebpackPlugin({
template: "src/index.html",
}),
],
};
`

and this is the webpack config for the To-Do-List component:

`
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const Dotenv = require('dotenv-webpack');
const deps = require("./package.json").dependencies;
module.exports = (_, argv) => ({
output: {
publicPath: "http://localhost:3001/",
},

resolve: {
extensions: [".ts", ".tsx", ".jsx", ".js", ".json"],
},

devServer: {
port: 3001,
historyApiFallback: true,
},

module: {
rules: [
{
test: /.m?js/,
type: "javascript/auto",
resolve: {
fullySpecified: false,
},
},
{
test: /.(css|s[ac]ss)$/i,
use: ["style-loader", "css-loader", "postcss-loader"],
},
{
test: /.(ts|tsx|js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},

plugins: [
new ModuleFederationPlugin({
name: 'ToDoList',
filename: 'ToDoList_remoteEntry.js',
exposes: {'./ToDoList': './src/ToDoList.js', // Ensure this is the correct file path
},
shared: {
...deps,
},
}),
new HtmlWebPackPlugin({
template: "./src/index.html",
}),
new Dotenv()
],
});
'

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

What is the expected behavior?
The web component is imported successfully

Other relevant information:
webpack version: 5.65.0
Node.js version: 20.12.0
Operating System: Windows
Additional tools: