Skip to content

Commit 5044904

Browse files
authored
fix(router): compatible with splitRouteChunks is false in react17 + csr (#6827)
1 parent 188d471 commit 5044904

File tree

2 files changed

+53
-16
lines changed

2 files changed

+53
-16
lines changed

.changeset/yellow-mugs-return.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@modern-js/runtime': patch
3+
---
4+
5+
fix(router): compatible with splitRouteChunks is false in react17 + csr
6+
fix(router): 在 react17 和 csr 模式下,兼容 splitRouteChunks 为 false 的情况

packages/runtime/plugin-runtime/src/router/cli/code/templates.ts

Lines changed: 47 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,26 @@ export const fileSystemRoutes = async ({
212212
return '';
213213
};
214214

215+
const createLazyImport = ({
216+
componentPath,
217+
routeId,
218+
webpackChunkName,
219+
eager,
220+
}: {
221+
componentPath: string;
222+
routeId?: string;
223+
webpackChunkName?: boolean;
224+
eager?: boolean;
225+
}) => {
226+
const importOptions = webpackChunkName
227+
? `/* webpackChunkName: "${routeId}" */ `
228+
: eager
229+
? `/* webpackMode: "eager" */ `
230+
: '';
231+
232+
return `() => import(${importOptions}'${componentPath}').then(routeModule => handleRouteModule(routeModule, "${routeId}")).catch(handleRouteModuleError)`;
233+
};
234+
215235
const traverseRouteTree = (route: NestedRouteForCli | PageRoute): Route => {
216236
let children: Route['children'];
217237
if ('children' in route && route.children) {
@@ -260,25 +280,36 @@ export const fileSystemRoutes = async ({
260280
}
261281

262282
if (route._component) {
263-
if (splitRouteChunks) {
264-
if (route.isRoot) {
265-
lazyImport = `() => import('${route._component}').then(routeModule => handleRouteModule(routeModule, "${route.id}")).catch(handleRouteModuleError) `;
266-
rootLayoutCode = `import RootLayout from '${route._component}'`;
267-
component = `RootLayout`;
268-
} else if (ssrMode === 'string') {
269-
lazyImport = `() => import(/* webpackChunkName: "${route.id}" */ '${route._component}').then(routeModule => handleRouteModule(routeModule, "${route.id}")).catch(handleRouteModuleError) `;
270-
component = `loadable(${lazyImport})`;
283+
if (route.isRoot) {
284+
lazyImport = createLazyImport({
285+
componentPath: route._component,
286+
routeId: route.id,
287+
});
288+
rootLayoutCode = `import RootLayout from '${route._component}'`;
289+
component = 'RootLayout';
290+
} else if (splitRouteChunks) {
291+
lazyImport = createLazyImport({
292+
componentPath: route._component,
293+
routeId: route.id,
294+
webpackChunkName: true,
295+
});
296+
// csr and streaming ssr use lazy
297+
component =
298+
ssrMode === 'string'
299+
? `loadable(${lazyImport})`
300+
: `lazy(${lazyImport})`;
301+
} else {
302+
if (ssrMode === 'string') {
303+
components.push(route._component);
304+
component = `component_${components.length - 1}`;
271305
} else {
272-
// csr and streaming
273-
lazyImport = `() => import(/* webpackChunkName: "${route.id}" */ '${route._component}').then(routeModule => handleRouteModule(routeModule, "${route.id}")).catch(handleRouteModuleError) `;
306+
lazyImport = createLazyImport({
307+
componentPath: route._component,
308+
routeId: route.id,
309+
eager: true,
310+
});
274311
component = `lazy(${lazyImport})`;
275312
}
276-
} else if (ssrMode === 'string') {
277-
components.push(route._component);
278-
component = `component_${components.length - 1}`;
279-
} else {
280-
lazyImport = `() => import(/* webpackMode: "eager" */ '${route._component}').then(routeModule => handleRouteModule(routeModule, "${route.id}")).catch(handleRouteModuleError) `;
281-
component = `lazy(${lazyImport})`;
282313
}
283314
}
284315
} else if (route._component) {

0 commit comments

Comments
 (0)