Solving the style upload issue with NextJS and Module Federation in ReactJS

Question

Solving the style upload issue with NextJS and Module Federation in ReactJS

My current project utilizes React 18 and webpack 5 with the module federation plugin. I am exploring the possibility of integrating Next JS with module federation, but I am encountering an issue where the host project is not able to fetch styles from the remote project properly. This inconsistency in styling is causing a visually unappealing result, with some styles loading correctly while others fail to upload.

In my setup:

baseguicomponent -> host project
droninfocomponent -> remote project

The main problem lies in the rendering of styles across the projects.

Below is the configuration provided in my next.config.js file for the host project:

[...]

This piece of code showcases how the modules are configured within the project, along with the shared dependencies between them.

For the host index.js file:

[...]

And the corresponding package.json for the host project:

[...]

Similarly, for the remote project, here is the next.config.js configuration:

[...]

With this setup, the remote index.js file looks like this:

[...]

Followed by the package.json for the remote project:

[...]

However, despite setting up the configurations as illustrated above, I am facing difficulties sharing the _app.js file for the remote project. The loss of proper styling integration on the host project is puzzling because the standalone remote module appears unaffected. I have struggled to find adequate examples or resources related to module federation implementations in Next JS, leading to difficulty in resolving the styling discrepancies.

css reactjs next.js webpack-5 webpack-module-federation

Answer 1

Answer №1

Utilize MiniCssExtractPlugin: Instead of using style-loader to extract styles into separate CSS files, consider using MiniCssExtractPlugin. This plugin allows you to convert styles into one or multiple distinct CSS files.

In both local next.config.js and host next.config.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    // ...
    webpack(config) {
        config.module.rules.push({
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
            ],
        });

        config.plugins.push(
            new MiniCssExtractPlugin({
                filename: '[name].css',
            })
        );

        // ...
    },
};

Use css-loader with modules: To avoid class name conflicts, enable the modules parameter of the css-loader by setting it to true. This will automatically transform class names to unique identifiers.

module.exports = {
    // ...
    webpack(config) {
        config.module.rules.push({
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                    },
                },
            ],
        });

        // ...
    },
};

Try @loadable/component: For dynamically loading components and styles, give @loadable/component a try. This library offers more precise control over which styles and components are loaded in each module.

Install @loadable/component:

npm install @loadable/component

In your code:

import loadable from '@loadable/component';

const DronInfoApp = loadable(() => import('droninfocomponent/DronInfoApp'));

// ...

return (
    <div>
        <Head>
            {/* ... */}
        </Head>
        <main>
            <Suspense fallback={null}>
                <DronInfoApp />
            </Suspense>
        </main>
    </div>
);

Answer 2

Utilize MiniCssExtractPlugin: Instead of using style-loader to extract styles into separate CSS files, consider using MiniCssExtractPlugin. This plugin allows you to convert styles into one or multiple distinct CSS files.

In both local next.config.js and host next.config.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    // ...
    webpack(config) {
        config.module.rules.push({
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
            ],
        });

        config.plugins.push(
            new MiniCssExtractPlugin({
                filename: '[name].css',
            })
        );

        // ...
    },
};

Use css-loader with modules: To avoid class name conflicts, enable the modules parameter of the css-loader by setting it to true. This will automatically transform class names to unique identifiers.

module.exports = {
    // ...
    webpack(config) {
        config.module.rules.push({
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                    },
                },
            ],
        });

        // ...
    },
};

Try @loadable/component: For dynamically loading components and styles, give @loadable/component a try. This library offers more precise control over which styles and components are loaded in each module.

Install @loadable/component:

npm install @loadable/component

In your code:

import loadable from '@loadable/component';

const DronInfoApp = loadable(() => import('droninfocomponent/DronInfoApp'));

// ...

return (
    <div>
        <Head>
            {/* ... */}
        </Head>
        <main>
            <Suspense fallback={null}>
                <DronInfoApp />
            </Suspense>
        </main>
    </div>
);

Solving the style upload issue with NextJS and Module Federation in ReactJS

Answer №1

Similar questions

"Error message "TypeError: element.type is undefined" indicates that the element is not recognized as a Mui

The error message "Unexpected token < in JSON at position 0" is indicating a SyntaxError in the

Make updates to _app.tsx or _app.jsx in Next.js but the changes are not reflecting on the live site. This issue may be related to the

Lock GridView headers when only scrolling vertically

react-responsive: The children of a Responsive component do not have the capability to receive props

What is the best way to align a div right below an image that has been clicked on?

Styling HTML Text Using Your Own Unique CSS Class Style

Error: The function sort cannot be applied to the result of calling the calendar method on the moment object

Is it possible to utilize webpack for bundling a custom server in Next.js?

With Next.js14, an error occurs when building with Nodejs20. The application runs smoothly on localhost, but encounters errors during the deployment process, resulting in a 500 internal server error

What is the best way to modify the color of a button within an AngularJS function by utilizing the same button?

Align the image and caption at the center in Bootstrap 4

Waiting for the initial render before using document.getElementById() in next.js

Why is React's nested routing failing to render properly?

Solving the error message "window is not defined" in Nextjs

The width of the Div element is not following the specified dimensions, and it also has an unspecified margin

Retrieve all references to child elements in React

Creating a loader for a specific component in Angular based on the view

Maintain the aspect ratio of a div with CSS styling

When the dropdown form options in HTML are clicked, they appear disproportionately large compared to the initial select box