Layout RFC doesn't refresh virtual CSS modules in HMR

[1aron]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 22.1.0: Sun Oct  9 20:15:52 PDT 2022; root:xnu-8792.41.9~2/RELEASE_ARM64_T8112
Binaries:
  Node: 18.12.1
  npm: 8.19.3
  Yarn: N/A
  pnpm: 7.17.0
Relevant packages:
  next: 12.3.1
  eslint-config-next: 12.3.1
  react: 18.2.0
  react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

No response

Link to the code that reproduces this issue

https://github.com/master-co/css/tree/beta/examples/next.js

To Reproduce

This is a monorepo:

git clone https://github.com/master-co/css.git
git checkout beta

First, build the Master CSS:

npm run build

Change to the Next.js 13 ( appDir ) directory:

cd examples/next.js

npm run dev

Try to modify the class names of Master CSS syntax ( E.g. https://github.com/master-co/css/blob/beta/examples/next.js/app/page.tsx#L51 ):

-               <div className={styles.thirteen + ' font:40 font:sans font:bold'}>
+               <div className={styles.thirteen + ' font:42 font:sans font:bold'}>

Archive.

This issue has basically nothing to do with Master CSS and can be reproduced by writing a simple webpack virtual module.

Installation

Install Master CSS in Next.js

const { MasterCSSWebpackPlugin } = require('@master/css.webpack')

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        appDir: true,
    },
    webpack: (config) => {
        config.plugins.push(
            new MasterCSSWebpackPlugin(),
        )
        return config
    }
}

module.exports = nextConfig

Related

• [appDir] Next.js appDir can not resolve virtual CSS files injected by webpack-virtual-modules #44266

Describe the Bug

Master CSS's AOT mode works by scanning source code and extracting potential class names to generate corresponding CSS rules.

Updating virtual CSS via webpack-virtual-modules works fine in Next.js 12 HMR, but in Next.js 13 appDir it is not refreshed properly by HMR.

In Next.js 12, external CSS assets that have changed are refreshed by updating the timestamp variable with ?t=xxx at the end of href to refresh the CSS modification.

Next.js 13 uses a special way to update external resources in the Network to refresh CSS changes. This method should be fine, but it does not capture changes in virtual modules correctly.

Expected Behavior

When a virtual CSS module is updated, Next.js' HMR should automatically refresh the corresponding target.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[1aron]

We fixed the issue.

Because Next.js will initialize webpack three times according to the environment nodejs, runtime, undefined during construction.

We just need to move the configuration to the top level to avoid multiple instances being created:

const { CSSExtractorPlugin } = require('@master/css-extractor.webpack')

/** @type {import('webpack').Configuration} */
const webpackConfig = {
    plugins: [
        new CSSExtractorPlugin()
    ]
}

/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: (config) => {
        config.plugins.push(webpackConfig.plugins)
        return config
    }
}

module.exports = nextConfig

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.