-
Notifications
You must be signed in to change notification settings - Fork 26.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Fix CSS modules imported from client components in app dir with next build #38329
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -120,6 +120,7 @@ function useFlightResponse( | |
rscCache.set(id, entry) | ||
|
||
let bootstrapped = false | ||
let remainingFlightResponse = '' | ||
const forwardReader = forwardStream.getReader() | ||
const writer = writable.getWriter() | ||
function process() { | ||
|
@@ -138,11 +139,41 @@ function useFlightResponse( | |
rscCache.delete(id) | ||
writer.close() | ||
} else { | ||
const responsePartial = decodeText(value) | ||
const css = responsePartial | ||
.split('\n') | ||
.map((partialLine) => { | ||
const line = remainingFlightResponse + partialLine | ||
remainingFlightResponse = '' | ||
|
||
try { | ||
const match = line.match(/^M\d+:(.+)/) | ||
if (match) { | ||
return JSON.parse(match[1]) | ||
.chunks.filter((chunkId: string) => | ||
chunkId.endsWith('.css') | ||
) | ||
.map( | ||
(file: string) => | ||
`<link rel="stylesheet" href="/_next/${file}">` | ||
) | ||
.join('') | ||
} | ||
return '' | ||
} catch (err) { | ||
// The JSON is partial | ||
remainingFlightResponse = line | ||
return '' | ||
} | ||
Comment on lines
+163
to
+167
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. rather than overparsing why not rewrite this a while loop that looks for the next line break. only process if there is a next line break. Here is basically the same algo in React: https://github.com/facebook/react/blob/main/packages/react-client/src/ReactFlightClientStream.js#L100-L109 |
||
}) | ||
.join('') | ||
|
||
writer.write( | ||
encodeText( | ||
`<script>(self.__next_s=self.__next_s||[]).push(${htmlEscapeJsonString( | ||
JSON.stringify([1, id, decodeText(value)]) | ||
)})</script>` | ||
css + | ||
`<script>(self.__next_s=self.__next_s||[]).push(${htmlEscapeJsonString( | ||
JSON.stringify([1, id, responsePartial]) | ||
)})</script>` | ||
) | ||
) | ||
process() | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This approach isn't going to work with React Float. it might make sense to use float here (when ready) to call preload but we shouldn't insert the link element into the dom this way.
I thought that the app router and layout router got passed the manifest. The router itself should do the link insertion using regular rendering of react elements.
Is that just intended for a later implementation?