mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Niklas MischkulnigandGitHub
d3529bad5d
- Before, there was a separate AST traversal that collected `next-dynamic` imports - Now, we use transitions (which are inserted by the existing next-custom-transform) to tell Turbopack about the next-dynamic imports - Unlike Webpack (where the react-loadable identifiers are `path/to/parent-module -> ./imported-client`), Turbopack just uses the module id: `[project]/path/to/imported-client.js [app-client] (ecmascript, next/dynamic entry)` - the `next-dynamic` transition only inserts the marker module (i.e. for the SSR `import()`) - the `next-dynamic-client` transition inserts the marker module and changes the module context (used to get the client module name) - Now, we use the correct `AvailabilityInfo` for the next/dynamic chunks to preload, and they are not explicitly emitted. If they are for some reason not the same chunks that are actually emitted for the dynamic import, you get a hard error. (Previously, they didn't use the same `AvailabilityInfo` as the real async chunks, so they usually bundled another copy of React, and also had a different chunk name hash) - For Turbopack, react-loadable manifests are now scoped per page instead of globally
51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
import { __turbopack_module_id__ as id } from "../components/hello" with {
|
|
"turbopack-transition": "next-client-dynamic",
|
|
"turbopack-chunking-type": "none"
|
|
};
|
|
import { __turbopack_module_id__ as id1 } from "../components/hello" with {
|
|
"turbopack-transition": "next-client-dynamic",
|
|
"turbopack-chunking-type": "none"
|
|
};
|
|
import { __turbopack_module_id__ as id2 } from "../components/hello" with {
|
|
"turbopack-transition": "next-client-dynamic",
|
|
"turbopack-chunking-type": "none"
|
|
};
|
|
import dynamic from 'next/dynamic';
|
|
const DynamicComponentWithCustomLoading = dynamic(()=>import('../components/hello', {
|
|
with: {
|
|
"turbopack-transition": "next-dynamic"
|
|
}
|
|
}), {
|
|
loadableGenerated: {
|
|
modules: [
|
|
id
|
|
]
|
|
},
|
|
loading: ()=><p>...</p>
|
|
});
|
|
const DynamicClientOnlyComponent = dynamic(()=>import('../components/hello', {
|
|
with: {
|
|
"turbopack-transition": "next-dynamic"
|
|
}
|
|
}), {
|
|
loadableGenerated: {
|
|
modules: [
|
|
id1
|
|
]
|
|
},
|
|
ssr: false
|
|
});
|
|
const DynamicClientOnlyComponentWithSuspense = dynamic(()=>import('../components/hello', {
|
|
with: {
|
|
"turbopack-transition": "next-dynamic"
|
|
}
|
|
}), {
|
|
loadableGenerated: {
|
|
modules: [
|
|
id2
|
|
]
|
|
},
|
|
ssr: false,
|
|
suspense: true
|
|
});
|