Next.js integration caching breaks with custom webpack loader rules

[sjaq]

Describe the bug

I'm not really sure of the entire flow of this issue as the whole webpack compilation flow is a bit too magical for me to completely comprehend 100%. But what seems to be happening in our case is that files references inside previously cached Vanilla extract CSS files aren't emitted during a consecutive build and fails with an error like this:

RealContentHashPlugin
Some kind of unexpected caching problem occurred.
An asset was cached with a reference to another asset (a89d799b) that's not in the compilation anymore.
Either the asset was incorrectly cached, or the referenced asset should also be restored from cache.
Referenced by:
 - static/css/0a230cf04b9515d0.css: ...onts/roboto-regular-a89d799b.woff) format("woff"...

I've added a minimal reproduction in the referenced repository, essential parts of the configuration are inside next.config.js where I've set up a custom loader for font files like this:

    config.module.rules.push({
      test: /\.(eot|ttf|woff|woff2)$/,
      type: 'asset/resource',
      generator: {
        filename: `static/fonts/[name]-[contenthash:8][ext]`
      }
    });

Then I add a globalFontFace rule which I include in the _app.tsx. Running npm run build works the first time, but the second time it fails with the error given above (it build again after deleting the .next folder).

When I switch the setup to use native CSS modules everything works fine (see the css-modules branch of the reporoduction repo).

Additionally I have to disable outputFileTracing when using the vanilla extract setup with our custom loader, but that might be a different issue...

Reproduction

https://github.com/sjaq/ve-reproduction

System Info

System:
    OS: macOS 13.3
    CPU: (10) arm64 Apple M1 Max
    Memory: 42.28 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.0.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.4 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 114.0.5735.133
    Firefox: 114.0.1
    Safari: 16.4
  npmPackages:
    @vanilla-extract/css: ^1.11.1 => 1.11.1
    @vanilla-extract/next-plugin: ^2.1.3 => 2.1.3

Used Package Manager

npm

Logs

sjaq@ontuig ~/Code/Projects/ve-reproduction (main) $ npm run build # First run

> ve-reproduction@0.1.0 build
> next build

- warn You have enabled experimental feature (appDir) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

- info Linting and checking validity of types
- info Creating an optimized production build
- info Compiled successfully
- info Collecting page data
- info Generating static pages (3/3)
- info Finalizing page optimization

Route (pages)                              Size     First Load JS
┌ ○ /                                      4.22 kB        77.4 kB
├   └ css/e16d911485b9f398.css             46 B
├   /_app                                  0 B            73.1 kB
├ ○ /404                                   182 B          73.3 kB
└ λ /api/hello                             0 B            73.1 kB
+ First Load JS shared by all              73.3 kB
  ├ chunks/framework-305cb810cde7afac.js   45.2 kB
  ├ chunks/main-3719bec94bd586eb.js        26.9 kB
  ├ chunks/pages/_app-b4232248edcac9c3.js  298 B
  ├ chunks/webpack-8fa1640cc84ba8fe.js     750 B
  └ css/33ea05cb1cdc6779.css               161 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)

sjaq@ontuig ~/Code/Projects/ve-reproduction (main) $ npm run build # Second run with cached assets

> ve-reproduction@0.1.0 build
> next build

- warn You have enabled experimental feature (appDir) in next.config.js.
- warn Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use at your own risk.

- info Linting and checking validity of types
Failed to compile.

RealContentHashPlugin
Some kind of unexpected caching problem occurred.
An asset was cached with a reference to another asset (ea0ede1f) that's not in the compilation anymore.
Either the asset was incorrectly cached, or the referenced asset should also be restored from cache.
Referenced by:
 - static/css/0a230cf04b9515d0.css: ...onts/roboto-regular-ea0ede1f.woff2) format("woff...

RealContentHashPlugin
Some kind of unexpected caching problem occurred.
An asset was cached with a reference to another asset (a89d799b) that's not in the compilation anymore.
Either the asset was incorrectly cached, or the referenced asset should also be restored from cache.
Referenced by:
 - static/css/0a230cf04b9515d0.css: ...onts/roboto-regular-a89d799b.woff) format("woff"...


> Build failed because of webpack errors
- info Creating an optimized production build .%

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[sjaq]

Still seeing this in the latest version, am I really the only one running into this?