Incompatible with latest version of Next.js

When using the latest version of next, the following error is thrown:

./pages/index.22C1ZZc.css:4:0
Module not found:
  Can't resolve '[...]/node_modules/next/dist/compiled/mini-css-extract-plugin/hmr/hotModuleReplacement.js'
null

Here’s a basic reproduction reproduction repository: TxHawks/style9-latest-next-repro The 1st commit is a working example using Next v10.0.9 The 2nd commit breaks after an upgrade to latest Next (v10.2.3) The 3rd commit remains broken after upgrading next-transpile-modules to its latest version (v7.2.0)

[TxHawks]

Created a pull request in next that fixes it.

Let’s see what they say

[johanholmerin]

The plugin uses the Webpack loader and plugin bundled with Next.js. getClientStyleLoader returns the path to the loader and some options, which are stringified and are used to prefix the .css import path as instructions for Webpack. It has different loaders for development and production, but we only use the production one. In addition to the loader, the MiniCssExtractPlugin from Next.js is also added. Next.js bundles it’s plugins, and the error is that hotModuleReplacement.js is not included. It’s possible that adding the file back is not enough, that some other changes will cause an issue, but it’s a good place to start. An alternative would be to stop using the bundled css handling and include the MiniCssExtractPlugin directly, although that might cause other issues. The plugin should at least be compatible with Next.js 9.x and 10.x.

You could ask in the Next.js repo and see if anyone there could offer any assistance.