White page deploying react app with webpack in IIS Server - reactjs

Question

I'm trying to deploy a react web application based in microfrontends using ModuleFederationPlugin and webpack, but when I try to deploy one of microfrontends in isolation I get a white page without errors.
My webpack configuration to production:
const { merge } = require('webpack-merge')
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const commonConfig = require('./webpack.common')
const packageJson = require('../package.json')
const prodConfig = {
mode: 'production',
output: {
filename: '[name].[contenthash].js',
publicPath: '/Microfrontends/marketing/'
},
plugins: [
new ModuleFederationPlugin({
name: 'marketing',
filename: 'remoteEntry.js',
exposes: {
'./MarketingModule': './src/bootstrap'
},
shared: packageJson.dependencies
})
]
}
module.exports = merge(commonConfig, prodConfig)
My webpack common with babel:
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
module: {
rules: [
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-react', '#babel/preset-env'],
plugins: ['#babel/plugin-transform-runtime']
}
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: './public/index.html'
})
]
}
My App.js component with React-Router:
export default function App({ history }) {
return (
<Fragment>
<StylesProvider generateClassName={generateClassName}>
<Router history={history}>
<Switch>
<Route exact path="/Microfrontends/marketing/pricing" component={Pricing} />
<Route path="/Microfrontends/marketing/" component={Landing} />
</Switch>
</Router>
</StylesProvider>
</Fragment>
)
}
When I deploy in server all status requests are 200 and the chrome console hasn't errors

Answer 1

Try adding or changing the homepage attribute in the package.json file.
Set it to be relative to the path by using homepage: '.';.
If you still get a white page after doing this it may be that the basename for your Router is not set:
<Router basename='/name' history={history}>
<Switch>
<Route exact path="/Microfrontends/marketing/pricing" component={Pricing} />
<Route path="/Microfrontends/marketing/" component={Landing} />
</Switch>
</Router>