After upgrading to Webpack 5, third party module CSS stop loading – ReactJS

I’m encountering an issue after upgrading from Webpack 4 to Webpack 5 where the SunEditor CSS isn’t loading correctly within the component. I’ve tried using mini-css-extract-plugin along with various polyfills, but none have resolved the problem.

I’m currently importing CSS in the component as follows:

import ‘./../node_modules/suneditor/dist/css/suneditor.min.css’;

Webpack.config.js rules are:

module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: '/node_modules/',
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    'targets':
                                    {
                                        'esmodules': true
                                    }
                                }
                            ],
                            '@babel/preset-react'
                        ],
                        plugins: [
                            '@babel/plugin-proposal-nullish-coalescing-operator'
                        ]
                    }
                },
                {
                    test: /\.css$/i,
                    use: ["style-loader", "css-loader"]
                }
            ]
        },
        externals: {
            'react': 'React',
            'react-dom': 'ReactDOM',
            'axios': 'axios'
        },
        resolve: {
            fallback: {
                querystring: require.resolve('querystring-es3'),
            },
        }

Does anyone know here how it can be resolved?

Read more here: Source link