I want to deploy a microfrontend made with React and Webpack 5 Module Federation. When I start the app locally and enter to http://localhost:5100/remoteEntry.js
loads the js file with the right content. The problem is when I deploy the app (I’ve deployed on Vercel & Render), when I access to https://smart-form-jet.vercel.app/remoteEntry.js
, it loads the js file but not with the exposed component I’ve indicated in the Webpack config, and not with the same content as locally.
This is my repo: https://github.com/aronilie/smart-form
This is my Webpack config:
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: argv.mode === "development"
? "http://localhost:5100/"
: "https://smart-form-jet.vercel.app/",
},
resolve: {
extensions: [".tsx", ".ts", ".jsx", ".js", ".json"],
},
devServer: {
port: 5100,
},
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",
},
},
// Other loaders
],
},
plugins: [
new ModuleFederationPlugin({
name: "smartForm",
filename: "remoteEntry.js",
remotes: {},
exposes: {
"./SmartForm": "./src/SmartForm.jsx",
},
shared: {
...deps,
react: {
singleton: true,
requiredVersion: deps.react,
},
"react-dom": {
singleton: true,
requiredVersion: deps["react-dom"],
},
},
}),
new HtmlWebPackPlugin({
template: "./src/index.html",
}),
new Dotenv(),
],
});
I would be very grateful if someone could help me, thanks.