mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
9e1e9bf311
### Bug Fix fixes #53366 ### Change Add `query` and [`matchResource`](https://webpack.js.org/api/loaders/#inline-matchresource) to the module mapping. ### Why `mod.resource` and all other paths inside `packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts` are already using the query: https://github.com/vercel/next.js/blob/e127c51327ee9191098fb7b73c681db934505dcc/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L506-L507 https://github.com/vercel/next.js/blob/e127c51327ee9191098fb7b73c681db934505dcc/packages/next/src/build/webpack/plugins/flight-client-entry-plugin.ts#L584-L585 ### Motivation We are using a static extraction css-in-js solution which uses the [inline match resource feature](https://webpack.js.org/api/loaders/#inline-matchresource) (see more in #53366) As a css-in-js file contains the TSX and the CSS code we have to split the file into two modules which share the same `resource.path`. This works well however there is a problem in the mapping inside `.next/server/app/page_client-reference-manifest.js`. The `ssrModuleMapping` from `addSSRIDMapping` in https://github.com/vercel/next.js/blob/e127c51327ee9191098fb7b73c681db934505dcc/packages/next/src/build/webpack/plugins/flight-manifest-plugin.ts#L270 links to the latest module (the css part) and not the the initial one (the js part). Therefore the css module is rendered [react-server-dom-webpack](https://www.npmjs.com/package/react-server-dom-webpack/v/0.0.1?activeTab=versions) and breaks. 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.` Co-authored-by: Shu Ding <[email protected]>
12 lines
174 B
JavaScript
12 lines
174 B
JavaScript
'use client'
|
|
|
|
import styles from './a.module.css!=!./a.txt'
|
|
|
|
export default function Home() {
|
|
return (
|
|
<div id="red" className={styles.red}>
|
|
Red
|
|
</div>
|
|
)
|
|
}
|