The plugin doesnt work with module federation

[popuguytheparrot]

Bug report

The plugin doesnt work with module federation. When build the styles of the application host, an error is thrown.

ERROR in 4565.css
(0 , _identifier.getUndoPath) is not a function
TypeError: (0 , _identifier.getUndoPath) is not a function
at MiniCssExtractPlugin.renderContentAsset 

"mini-css-extract-plugin": "2.3.0",
"webpack-5": "npm:webpack@5.53.0",

Actual Behavior

Build fall with Error

Expected Behavior

Application will build without error

How Do We Reproduce?

// npm alias
const webpack = require('webpack-5');
const ModuleFederationPlugin = require('webpack-5').container.ModuleFederationPlugin;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyPlugin = require('copy-webpack-plugin');

const { join } = require('path');

module.exports = {
    entry: './src/indexMf',
    devServer: {
        contentBase: join(__dirname, 'public'),
        port: 7777,
        historyApiFallback: true,
        proxy: [
            {
                context: ['/api', '/uaa'],
                target: URL',
                changeOrigin: true,
            },
        ],
    },
    output: {
        filename: '[name].[contenthash:8].bundle.js',
        publicPath: '/',
        assetModuleFilename: 'resources/[hash][ext][query]',
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js'],
        alias: {
            src: join(__dirname, 'src'),
        },
    },
    module: {
        rules: [
            {
                test: /bootstrap\.tsx$/,
                loader: 'bundle-loader',
                options: {
                    lazy: true,
                },
            },
            {
                test: /\.tsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: [
                        '@babel/preset-env',
                        [
                            '@babel/preset-react',
                            {
                                runtime: 'automatic',
                            },
                        ],
                        '@babel/preset-typescript',
                    ],
                    plugins: [
                        '@babel/plugin-proposal-class-properties',
                        [
                            '@fcc/babel-plugin-jsx-fingerprint',
                            {
                                key: 'marker',
                                ignore: ['Fragment', 'IntlProvider', 'StylesProvider'],
                            },
                        ],
                        [
                            'babel-plugin-styled-components',
                            {
                                ssr: false,
                                pure: true,
                                minify: true,
                                transpileTemplateLiterals: true,
                                displayName: false,
                                fileName: false,
                            },
                        ],
                    ],
                },
            },
            {
                test: /\.css$/i,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.svg$/i,
                type: 'asset/resource',
                use: 'svgo-loader',
            },
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource',
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin(),
        new webpack.ProvidePlugin({
            React: 'react',
        }),
        new webpack.DefinePlugin({
            'process.env.PROXY_USE_PREVIEW': process.env.PROXY_USE_PREVIEW,
        }),
        new ModuleFederationPlugin({
            name: 'app1',
            remotes: {
                ClientTariffs: 'app2@http://localhost:3000/remoteEntry.js',
            },
            shared: [{ react: { singleton: true }, 'react-dom': { singleton: true } }],
        }),
        new HtmlWebpackPlugin({
            title: 'Corporate CRM',
            filename: './index.html',
            favicon: './public/favicon.ico',
            templateParameters: {
                PUBLIC_URL: '',
            },
        }),
        new CopyPlugin({
            patterns: [
                { from: 'public/resources', to: 'resources' },
                { from: 'public/manifest.json', to: './' },
                { from: 'public/robots.txt', to: './' },
            ],
        }),
    ],
};

[alexander-akait]

Update webpack to the latest version and plugin too

[alexander-akait]

And you still on webpack v4, check it

[popuguytheparrot]

@alexander-akait nope

"mini-css-extract-plugin": "2.3.0",
 "webpack-5": "npm:webpack@5.53.0",
 
 npx webpack-cli info

  System:
    OS: macOS 11.5.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 723.47 MB / 16.00 GB
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - /usr/local/bin/npm
  Browsers:
    Chrome: 93.0.4577.63
    Safari: 14.1.2
  Packages:
    copy-webpack-plugin: 9.0.1 => 9.0.1 
    html-webpack-plugin: 5.3.2 => 5.3.2 
    webpack:  5.53.0 
    webpack-cli: 4.8.0 => 4.8.0 

[alexander-akait]

"webpack-5": "npm:webpack@5.53.0"

You should not do it, rename package to webpack

[popuguytheparrot]

i need two version of webpack and i building MF this command

"build": "WEBPACK_PACKAGE=webpack-5 webpack --mode=production --config ./webpack.config.js",

[alexander-akait]

You have mixed verisons of webpack, it breaks some resolutions, please create different directory with package.json and move all webpack v5 deps there and run build script from this directory