webpack build error `Uncaught SyntaxError: Unexpected token /`

Hello, just tried to integrate extract-css-chunks-webpack-plugin to my project after successfully integrated react-universal-component and redux-first-router which are amazing 😃

I encounter a problem by simply transforming my ExtractTextPlugin to ExtractCssChunks. Here is my config:

module: {
    rules: {
        test: /\.s?css$/,
        exclude: /node_modules\/^(?!prismjs)/,
        use: ExtractCssChunks.extract({
                fallback: 'style-loader',
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                            modules: true,
                            localIdentName: '[name]__[local]',
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                        },
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                            sourceComments: true,
                        },
                    },
                ],
            }),
    }),
},
new ExtractCssChunks({
                filename: '[name].css',
                allChunks: false,
            },
        ),

The webpack compilation is OK and I have no warning, but when I try to load my website, I get an error: Uncaught SyntaxError: Unexpected token / which refer to this piece of built code:

if (true) {
	module.hot.accept();
	if (module.hot.data) {
		var neverUsed = 1501864374091
		__webpack_require__("./node_modules/extract-css-chunks-webpack-plugin/hotModuleReplacement.js")("/", "index.css");
	}
}
require("__webpack_require__."./node_modules/extract-css-chunks-webpack-plugin/hotModuleReplacement.js"

Problem is at

//                             👇
require("__webpack_require__."./node_modules/extract-css-chunks-webpack-plugin/hotModuleReplacement.js"

I absolutely don’t know why this problem occurs, and if I replace all my occurrences of ExtractCssChunks by ExtractTextPlugin, it works well, but I get the warning:

[UNIVERSAL-IMPORT] no css chunks hash found at "window.__CSS_CHUNKS__". Make sure you are using: https://www.npmjs.com/package/extract-css-chunks-webpack-plugin . If you are not serving CSS, disregard this message.

Sorry if this is not a bug, I’ll put this question/issue on stackoverflow.

[GuillaumeCisco]

Just discovered that removing fallback: 'style-loader', make it works. Maybe it will help.

[faceyspacey]

You actually dont need it for SPAs. You’re right. So disregard that warning–it’s just a warning. In the future, i’ll find a way to hide it for people with your use case.

Both packages dont need to be used together. You dont need webpack-flush-chunks. And definitely not in your case.

Here’s what I would do: either make the demo look like the unique parts of your setup:

https://github.com/faceyspacey/universal-demo

or make your setup look like the demo.

Do as much as you can to combine the 2 in order to find what’s causing the breakage, starting with the webpack config. Maybe try with less loaders. You know, just setup some simple files and try to find what could be breaking it. Plenty of people every day are getting it to work in Reactlandia chat. If you have any problems we can meet there this weekend 😃

Dont forget to read today’s article and spread the news!