match resource imports are not working in React Server Components (App Router)

[jantimon]

Verify canary release

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

Provide environment information

npx --no-install next info

    Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.5.0: Mon Apr 24 20:52:24 PDT 2023; root:xnu-8796.121.2~5/RELEASE_ARM64_T6000
    Binaries:
      Node: 18.16.0
      npm: 9.5.1
      Yarn: 1.22.19
      pnpm: N/A
    Relevant Packages:
      next: 13.4.13-canary.6
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: N/A
    Next.js Config:
      output: N/A

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

App Router

Link to the code that reproduces this issue or a replay of the bug

https://github.com/jantimon/next-css-import-bug-reproduction

To Reproduce

1. Open http://localhost:3000/use-client in your browser.

"use client"
import styles from './page.module.css!=!../example.txt'

export default function Home() {
  return <div className={styles.demo}>Demo</div>
}

2. You will see a red text saying "Demo".
   
3. Open http://localhost:3000/rsc in your browser.

import styles from './page.module.css!=!../example.txt'

export default function Home() {
  return <div className={styles.demo}>Demo</div>
}

4. You will see a text saying "Demo" - however it is black.
   
5. Both texts will have the very same css class names.

Describe the Bug

Our css-in-js solution extracts css statically and therefore needs to add css from react (.tsx,...) files.

Unfortunately I encountered a bug in Next.js (version 13.4.13-canary.6 but probably all previous versions behave similar) when using React Server Components (RSC). It appears that the new App Router does not fully support the !=! pattern for overwriting the resource name in the request string.

The compilation works and the correct css modules class name is used.
However the css is not linked to the page.

Adding use client will fix the issue but disable server components.

Expected Behavior

Overwriting the resource name should work for React Server Components (RSC) the same way it does for client components.

Findings

The reason seems to be an invalid mapping inside .next/server/app/page_client-reference-manifest.js.
The ssrModuleMapping from addSSRIDMapping in

next.js/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts

Line 270 in e127c51

function addSSRIdMapping() {

points to a css module.

Therefore the linked css module is rendered by react-server-dom-webpack and unfortunately the default export of the css module is not a valid react component.

=> the SSR/SSG fails with the error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

Update:

The reason for the wrong mapping is the path handling inside flight-client-entry-plugin.ts:

next.js/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts

Line 189 in e127c51

const modResource = mod.resourceResolveData?.path || mod.resource

mod.resource includes the querystring
but
mod.resourceResolveData.path does not include the query string:

 resource: '/my-next-app/app/Fancy.tsx?./Fancy',
 resourceResolveData: {
    path: '/my-next-app/app/Kaput.tsx',
    query: '?./Fancy', 
    ....
}

Possible solutions:

Use the querystring also in cases where mod.resourceResolveData is available:

const modResource = mod.resourceResolveData 
  ? mod.resourceResolveData.path + mod.resourceResolveData.query
  : mod.resource

Or another possible solution would be to also use mod.matchResource:

const modResource = mod.matchResource || (mod.resourceResolveData 
  ? mod.resourceResolveData.path + mod.resourceResolveData.query
  : mod.resource)

[github-actions]

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