rsnext/test/e2e/app-dir/dynamic-css/app
Jiachi Liu 8b82225fea
Fix ASL bundling for dynamic css (#64451)
### Why

For app page rendering on edge, the `AsyncLocalStorage` (ALS) should be
bundled as same instance across layers. We're accessing the ALS in
`next/dynamic` modules during SSR for preloading CSS chunks. There's a
bug that we can't get the ALS store during SSR in edge, I digged into it
and found the root cause is:

We have both import paths:
`module (rsc layer) -> request ALS (shared layer)`
`module (ssr layer) -> request ALS (shared layer)`

We expect the ALS to be the same module since we're using the same layer
but found that they're treated as different modules due to applying
another loader transform on ssr layer. They're resulted in the same
`shared` layer, but with different resource queries. This PR excluded
that transform so now they're identical across layers.


### What

For webpack, we aligned the loaders applying to the async local storage,
so that they're resolved as the same module now.

For turbopack, we leverage module transition, sort of creating a new
`app-shared` layer for these modules, and apply the transition to all
async local storage instances therefore the instances of them are only
bundled once.
To make the turbopack chanegs work, we change how the async local
storage modules defined, separate the instance into a single file and
mark it as "next-shared" layer with import:

```
any module -> async local storage --- use transition, specify "next-shared" layer ---> async local storage instance
```

Closes NEXT-3085
2024-04-17 10:18:09 +02:00
..
another [turbopack] Fix css FOUC in dynamic component (#64021) 2024-04-10 18:44:17 +02:00
ssr Fix ASL bundling for dynamic css (#64451) 2024-04-17 10:18:09 +02:00
layout.js [turbopack] Fix css FOUC in dynamic component (#64021) 2024-04-10 18:44:17 +02:00
page.js [turbopack] Fix css FOUC in dynamic component (#64021) 2024-04-10 18:44:17 +02:00