I have an application that uses module federation and webpack. Everything is working fine when I deploy the application locally to a nginx docker image. However, when the pipeline runs and I access it from the browser from its dev URL, I can see that the bundle.js and remoteEntry.js files have the content of index.html. So my page is rendered blank. Here is a screenshot, side by side, of both local and deployed applications sources:
This is my first time using webpack, so I don’t know what exactly is missing. Below is my webpack.config:
const HtmlWebPackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
const path = require("path");
const deps = require("./package.json").dependencies;
const htmlPlugin = new HtmlWebPackPlugin({
template: "./public/index.html",
filename: "./index.html",
});
module.exports = {
mode: "development",
entry: "./src/index.tsx",
resolve: {
extensions: [".ts", ".tsx", ".js"],
modules: [path.resolve(__dirname, "src"), "node_modules"],
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
publicPath: "mfe-prompt/", //This line only exists on the pipe. Locally, I have the exact same file without this single line
},
devServer: {
static: path.join(__dirname, "dist"),
port: 3000,
headers: {
"Access-Control-Allow-Origin": "*",
},
},
module: {
rules: [
{
test: /.(ts|tsx|js)$/,
exclude: /node_modules/,
loader: "ts-loader",
},
{
test: /.s[ac]ss$/i,
use: ["style-loader", "css-loader", "sass-loader"],
},
],
},
plugins: [
htmlPlugin,
new ModuleFederationPlugin({
name: "prompt_mfe",
filename: "remoteEntry.js",
exposes: {
"./Prompt": "./src/containers/Prompt/Prompt.tsx",
},
shared: {
...deps,
react: { singleton: true, eager: true, requiredVersion: deps.react },
"react-dom": {
singleton: true,
eager: true,
requiredVersion: deps["react-dom"],
},
"react-router-dom": {
singleton: true,
eager: true,
requiredVersion: deps["react-router-dom"],
},
"@dds/react": {
singleton: true,
eager: true,
requiredVersion: deps["@dds/react"],
},
"prop-types": {
singleton: true,
eager: true,
requiredVersion: deps["prop-types"],
},
},
}),
],
};
Don’t know if its useful, but this is my nginx conf:
worker_processes 4;
events {
worker_connections 1024;
}
http {
server {
listen 80;
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
}
}