search

johanholmerin / style9

CSS-in-JS compiler inspired by Meta's stylex
MIT License
570 stars 27 forks source link

Incompatible with latest version of Next.js #44

Closed TxHawks closed 3 years ago

TxHawks commented 3 years ago

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 commented 3 years ago

The issue seems to have been introduced in v10.2.1 and is true with both webpack 4 and 5

johanholmerin commented 3 years ago

Can confirm that this broke with next.js#24573. Probably possible to solve, but painful. Would be happy to accept a PR that fixes it. In the meantime I added a note about it in the documentation.

TxHawks commented 3 years ago

I don't have much experience with webpack configurations, but this seems like an issue that could definitely block adoption for us (and probably others), so I would like to take a stab at it.

Any pointers as to where in the code should I start looking?

johanholmerin commented 3 years ago

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.

TxHawks commented 3 years ago

Created a pull request in next that fixes it.

Let's see what they say