@modern-js/app-tools 2.8.1-alpha.3 → 2.10.0

package/CHANGELOG.md

@@ -1,5 +1,105 @@
 # @modern-js/app-tools
 
+## 2.10.0
+
+### Patch Changes
+
+- 0da32d0: chore: upgrade jest and puppeteer
+  chore: 升级 jest 和 puppeteer 到 latest
+- 0d9962b: fix: add types field in package.json
+  fix: 添加 package.json 中的 types 字段
+- fbefa7e: chore(deps): bump webpack from 5.75.0 to 5.76.2
+
+  chore(deps): 将 webpack 从 5.75.0 升级至 5.76.2
+
+- 7b5dd99: feat(app-tools): support builder-plugin-node-polyfill & output.disableNodePolyfill false when use Rspack
+
+  feat(app-tools): 在启动 Rspack 时，支持 builder-plugin-node-polyfill 插件以及将 output.disableNodePolyfill 设置为 false
+
+- 6db4864: feat: add output.splitRouteChunks
+  feat: 添加 output.splitRouteChunks 配置
+- dcc5610: perf: improve routerPlugin performance
+  perf: 优化 routerPlugin 的性能
+- 84c4372: fix: should get publicPath from webpack stats in router-plugin
+  fix: 应该从 webpack stats 获得 publicPath
+- Updated dependencies [d8bbf28]
+- Updated dependencies [a8db932]
+- Updated dependencies [3e0bd50]
+- Updated dependencies [92d247f]
+- Updated dependencies [0da32d0]
+- Updated dependencies [d3f0642]
+- Updated dependencies [a16b9b0]
+- Updated dependencies [0d9962b]
+- Updated dependencies [fbefa7e]
+- Updated dependencies [4d54233]
+- Updated dependencies [6db4864]
+- Updated dependencies [82326ee]
+- Updated dependencies [d6b6e29]
+- Updated dependencies [cfdbf80]
+- Updated dependencies [ed55acb]
+  - @modern-js/prod-server@2.10.0
+  - @modern-js/builder-webpack-provider@2.10.0
+  - @modern-js/builder-rspack-provider@2.10.0
+  - @modern-js/builder-shared@2.10.0
+  - @modern-js/plugin-data-loader@2.10.0
+  - @modern-js/server@2.10.0
+  - @modern-js/types@2.10.0
+  - @modern-js/node-bundle-require@2.10.0
+  - @modern-js/new-action@2.10.0
+  - @modern-js/plugin-i18n@2.10.0
+  - @modern-js/plugin-lint@2.10.0
+  - @modern-js/upgrade@2.10.0
+  - @modern-js/plugin@2.10.0
+  - @modern-js/utils@2.10.0
+  - @modern-js/core@2.10.0
+  - @modern-js/builder-plugin-esbuild@2.10.0
+  - @modern-js/builder-plugin-node-polyfill@2.10.0
+  - @modern-js/builder@2.10.0
+
+## 2.9.0
+
+### Patch Changes
+
+- 49bb8cd0ef: fix: move chunkmap.css comment to bottom of head
+  fix: 将 chunkmap.css 标记移动到 head 底部
+- 83423193bb: fix: fix chunk css location in template
+  fix: 修复异步加载的 css 在模版文件中的位置
+- e1b6881b39: fix: should not replace to alias when filePath is not in src
+  fix: 不应该替换为别名，当 filePath 不在 src 目录中时
+- 5cb90eddaf: fix: fix data-loader compat in windows
+  fix: 修复 data loader 在 windows 下的兼容性问题
+- e9ae517226: fix: optimize the regexp for route matching rules
+  fix: 优化路由匹配正则
+- 4d89ad2a86: fix: the asset may be removed by InlineChunkHtmlPlugin
+  fix: asset 可能会被 InlineChunkHtmlPlugin 移除
+- Updated dependencies [7035d5c22f]
+- Updated dependencies [49bb8cd0ef]
+- Updated dependencies [76b26883bb]
+- Updated dependencies [f31a254d78]
+- Updated dependencies [1f047183c3]
+- Updated dependencies [88328d914b]
+- Updated dependencies [dd56401486]
+- Updated dependencies [07569e577e]
+- Updated dependencies [da66232feb]
+  - @modern-js/builder-webpack-provider@2.9.0
+  - @modern-js/prod-server@2.9.0
+  - @modern-js/server@2.9.0
+  - @modern-js/builder-rspack-provider@2.9.0
+  - @modern-js/builder@2.9.0
+  - @modern-js/core@2.9.0
+  - @modern-js/builder-plugin-esbuild@2.9.0
+  - @modern-js/builder-plugin-node-polyfill@2.9.0
+  - @modern-js/builder-shared@2.9.0
+  - @modern-js/plugin-data-loader@2.9.0
+  - @modern-js/plugin-lint@2.9.0
+  - @modern-js/new-action@2.9.0
+  - @modern-js/plugin-i18n@2.9.0
+  - @modern-js/node-bundle-require@2.9.0
+  - @modern-js/plugin@2.9.0
+  - @modern-js/types@2.9.0
+  - @modern-js/upgrade@2.9.0
+  - @modern-js/utils@2.9.0
+
 ## 2.8.0
 
 ### Minor Changes

package/dist/cjs/analyze/generateCode.js

@@ -99,6 +99,7 @@ const generateCode = async (appContext, config, entrypoints, api) => {
   const getRoutes = isV5 ? import_getClientRoutes.getClientRoutesLegacy : import_getClientRoutes.getClientRoutes;
   await Promise.all(entrypoints.map(generateEntryCode));
   async function generateEntryCode(entrypoint) {
+    var _a;
     const { entryName, isAutoMount, customBootstrap, fileSystemRoutes } = entrypoint;
     if (isAutoMount) {
       if (fileSystemRoutes) {
@@ -161,7 +162,8 @@ const generateCode = async (appContext, config, entrypoints, api) => {
             ssrMode: useSSG ? "string" : mode,
             nestedRoutesEntry: entrypoint.nestedRoutesEntry,
             entryName: entrypoint.entryName,
-            internalDirectory
+            internalDirectory,
+            splitRouteChunks: (_a = config2 == null ? void 0 : config2.output) == null ? void 0 : _a.splitRouteChunks
           })
         });
         if (entrypoint.nestedRoutesEntry && (0, import_utils.isUseSSRBundle)(config2)) {

package/dist/cjs/analyze/index.js

@@ -247,6 +247,14 @@ var analyze_default = ({
           imports
         };
       },
+      validateSchema() {
+        return {
+          target: "output.splitRouteChunks",
+          schema: {
+            type: "boolean"
+          }
+        };
+      },
       async fileChange(e) {
         const appContext = api.useAppContext();
         const { appDirectory } = appContext;

package/dist/cjs/analyze/templates.js

@@ -113,7 +113,6 @@ const html = (partials) => `
 </head>
 
 <body>
-  <!--<?- chunksMap.css ?>-->
   <noscript>
     We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue.
   </noscript>
@@ -177,13 +176,16 @@ const routesForServer = ({
     ${routesCode}
   `;
 };
+const createMatchReg = (keyword) => new RegExp(`("${keyword}":\\s)"([^,]+)"`, "g");
 const fileSystemRoutes = async ({
   routes,
   ssrMode,
   nestedRoutesEntry,
   entryName,
-  internalDirectory
+  internalDirectory,
+  splitRouteChunks = true
 }) => {
+  const components = [];
   const loadings = [];
   const errors = [];
   const loaders = [];
@@ -242,20 +244,30 @@ const fileSystemRoutes = async ({
         };
       }
       if (route._component) {
-        if (route.isRoot) {
-          rootLayoutCode = `import RootLayout from '${route._component}'`;
-          component = `RootLayout`;
-        } else if (ssrMode === "string") {
-          lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}')`;
-          component = `loadable(${lazyImport})`;
+        if (splitRouteChunks) {
+          if (route.isRoot) {
+            rootLayoutCode = `import RootLayout from '${route._component}'`;
+            component = `RootLayout`;
+          } else if (ssrMode === "string") {
+            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}')`;
+            component = `loadable(${lazyImport})`;
+          } else {
+            lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}')`;
+            component = `lazy(${lazyImport})`;
+          }
         } else {
-          lazyImport = `() => import(/* webpackChunkName: "${route.id}" */  '${route._component}')`;
-          component = `lazy(${lazyImport})`;
+          components.push(route._component);
+          component = `component_${components.length - 1}`;
         }
       }
     } else if (route._component) {
-      lazyImport = `() => import('${route._component}')`;
-      component = `loadable(${lazyImport})`;
+      if (splitRouteChunks) {
+        lazyImport = `() => import('${route._component}')`;
+        component = `loadable(${lazyImport})`;
+      } else {
+        components.push(route._component);
+        component = `component_${components.length - 1}`;
+      }
     }
     const finalRoute = {
       ...route,
@@ -276,20 +288,38 @@ const fileSystemRoutes = async ({
   for (const route of routes) {
     if ("type" in route) {
       const newRoute = traverseRouteTree(route);
-      routeComponentsCode += `${JSON.stringify(newRoute, null, 2).replace(/"(loadable.*\))"/g, "$1").replace(/"(loadableLazy.*\))"/g, "$1").replace(/"(\(\)[^,]+)",/g, "$1,").replace(/"(lazy\(.*\))"/g, "$1").replace(/"(loading_[^"]+)"/g, "$1").replace(/"(loader_[^"]+)"/g, "$1").replace(/"(RootLayout)"/g, "$1").replace(/"(error_[^"]+)"/g, "$1").replace(/\\"/g, '"')},`;
+      const routeStr = JSON.stringify(newRoute, null, 2);
+      const keywords = [
+        "component",
+        "lazyImport",
+        "loader",
+        "loading",
+        "error"
+      ];
+      const regs = keywords.map(createMatchReg);
+      const newRouteStr = regs.reduce((acc, reg) => acc.replace(reg, "$1$2"), routeStr).replace(/"(RootLayout)"/g, "$1").replace(/\\"/g, '"');
+      routeComponentsCode += `${newRouteStr},`;
     } else {
       const component = `loadable(() => import('${route._component}'))`;
       const finalRoute = {
         ...route,
         component
       };
-      routeComponentsCode += `${JSON.stringify(finalRoute, null, 2).replace(/"(loadable[^"]*)"/g, "$1").replace(/"(lazy[^"]*)"/g, "$1")},`;
+      const keywords = ["component", "lazyImport"];
+      const routeStr = JSON.stringify(finalRoute, null, 2);
+      const regs = keywords.map(createMatchReg);
+      const newRouteStr = regs.reduce((acc, reg) => acc.replace(reg, "$1$2"), routeStr).replace(/\\"/g, '"');
+      routeComponentsCode += `${newRouteStr},`;
     }
   }
   routeComponentsCode += `
 ];`;
   const importLoadingCode = loadings.map((loading, index2) => {
     return `import loading_${index2} from '${loading}';
+`;
+  }).join("");
+  const importComponentsCode = components.map((component, index2) => {
+    return `import component_${index2} from '${component}';
 `;
   }).join("");
   const importErrorComponentsCode = errors.map((error, index2) => {
@@ -314,6 +344,7 @@ const fileSystemRoutes = async ({
   await import_utils.fs.writeJSON(loadersMapFile, loadersMap);
   return `
     ${importLazyCode}
+    ${importComponentsCode}
     ${rootLayoutCode}
     ${importLoadingCode}
     ${importErrorComponentsCode}

package/dist/cjs/builder/builder-rspack/index.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +16,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var builder_rspack_exports = {};
 __export(builder_rspack_exports, {
@@ -23,7 +33,18 @@ module.exports = __toCommonJS(builder_rspack_exports);
 var import_builder_rspack_provider = require("@modern-js/builder-rspack-provider");
 var import_generator = require("../generator");
 function createRspackBuilderForModern(options) {
-  return (0, import_generator.generateBuilder)(options, import_builder_rspack_provider.builderRspackProvider);
+  return (0, import_generator.generateBuilder)(options, import_builder_rspack_provider.builderRspackProvider, {
+    async modifyBuilderInstance(builder) {
+      applyBuilderPlugins(builder, options);
+    }
+  });
+}
+async function applyBuilderPlugins(builder, options) {
+  const { normalizedConfig } = options;
+  if (!normalizedConfig.output.disableNodePolyfill) {
+    const { builderPluginNodePolyfill } = await Promise.resolve().then(() => __toESM(require("@modern-js/builder-plugin-node-polyfill")));
+    builder.addPlugins([builderPluginNodePolyfill()]);
+  }
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/builder/shared/builderPlugins/adapterSSR.js

@@ -42,13 +42,16 @@ const builderPluginAdapterSSR = (options) => ({
     api.modifyBundlerChain(
       async (chain, { target, CHAIN_ID, isProd, HtmlPlugin: HtmlBundlerPlugin, isServer }) => {
         const builderConfig = api.getNormalizedConfig();
-        applyRouterPlugin(chain, options);
-        await applySSRLoaderEntry(chain, options, isServer);
+        const { normalizedConfig: normalizedConfig2 } = options;
+        if ((0, import_utils.isSSR)(normalizedConfig2)) {
+          applyRouterPlugin(chain, options);
+          await applySSRLoaderEntry(chain, options, isServer);
+        }
         if (["node", "service-worker"].includes(target)) {
           applyFilterEntriesBySSRConfig({
             isProd,
             chain,
-            appNormalizedConfig: options.normalizedConfig
+            appNormalizedConfig: normalizedConfig2
           });
         }
         if ((0, import_adapterHtml.isHtmlEnabled)(builderConfig, target)) {

package/dist/cjs/builder/shared/bundlerPlugins/RouterPlugin.js

@@ -62,6 +62,9 @@ class RouterPlugin {
         },
         async () => {
           const stats = compilation.getStats().toJson({
+            all: false,
+            publicPath: true,
+            assets: true,
             chunkGroups: true,
             chunks: true
           });

package/dist/esm/analyze/generateCode.js

@@ -245,7 +245,7 @@ var generateCode = function() {
         }
         function _generateEntryCode() {
             _generateEntryCode = _asyncToGenerator(function(entrypoint) {
-                var entryName, isAutoMount, customBootstrap, fileSystemRoutes, initialRoutes, nestedRoute, routes, config2, ssr, useSSG, mode, hasPageRoute, _ref, code2, _, _tmp, routesServerFile, code3, serverLoaderCombined, serverLoaderFile, _ref1, importStatements, plugins, _ref2, renderFunction, exportStatement, code, entryFile, _ref3, asyncEntryCode, bootstrapFile;
+                var entryName, isAutoMount, customBootstrap, fileSystemRoutes, _config2_output, initialRoutes, nestedRoute, routes, config2, ssr, useSSG, mode, hasPageRoute, _ref, code2, _, _tmp, routesServerFile, code3, serverLoaderCombined, serverLoaderFile, _ref1, importStatements, plugins, _ref2, renderFunction, exportStatement, code, entryFile, _ref3, asyncEntryCode, bootstrapFile;
                 return __generator(this, function(_state) {
                     switch(_state.label){
                         case 0:
@@ -322,7 +322,8 @@ var generateCode = function() {
                                     ssrMode: useSSG ? "string" : mode,
                                     nestedRoutesEntry: entrypoint.nestedRoutesEntry,
                                     entryName: entrypoint.entryName,
-                                    internalDirectory: internalDirectory
+                                    internalDirectory: internalDirectory,
+                                    splitRouteChunks: config2 === null || config2 === void 0 ? void 0 : (_config2_output = config2.output) === null || _config2_output === void 0 ? void 0 : _config2_output.splitRouteChunks
                                 })
                             ];
                         case 4:

package/dist/esm/analyze/index.js

@@ -638,6 +638,14 @@ var analyze_default = function(param) {
                         });
                     })();
                 },
+                validateSchema: function validateSchema() {
+                    return {
+                        target: "output.splitRouteChunks",
+                        schema: {
+                            type: "boolean"
+                        }
+                    };
+                },
                 fileChange: function fileChange(e) {
                     return _asyncToGenerator(function() {
                         var appContext, appDirectory, filename, eventType, isPageFile, absoluteFilePath, isRouteComponent, resolvedConfig, generateCode, entrypoints;

package/dist/esm/analyze/templates.js

@@ -237,7 +237,7 @@ var renderFunction = function(param) {
     }).join("\n"), "\n    ]\n  })(").concat(fileSystemRoutes2 ? "" : "App", ")\n\n\n  if(!AppWrapper.init && typeof appInit !== 'undefined') {\n    AppWrapper.init = appInit;\n  }\n\n\n  if (IS_BROWSER) {\n    ").concat(customBootstrap ? "customBootstrap(AppWrapper, () => ".concat(bootstrap, ");") : "".concat(bootstrap, ";"), "\n  }\n\n  return AppWrapper\n");
 };
 var html = function(partials) {
-    return "\n<!DOCTYPE html>\n<html>\n<head>\n  <%= meta %>\n  <title><%= title %></title>\n\n  ".concat(partials.top.join("\n"), "\n\n  <script>\n    window.__assetPrefix__ = '<%= assetPrefix %>';\n  </script>\n  ").concat(partials.head.join("\n"), "\n\n</head>\n\n<body>\n  <!--<?- chunksMap.css ?>-->\n  <noscript>\n    We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue.\n  </noscript>\n  <div id=\"<%= mountId %>\"><!--<?- html ?>--></div>\n  ").concat(partials.body.join("\n"), "\n  <!--<?- chunksMap.js ?>-->\n  <!--<?- SSRDataScript ?>-->\n  <!--<?- bottomTemplate ?>-->\n</body>\n\n</html>\n");
+    return "\n<!DOCTYPE html>\n<html>\n<head>\n  <%= meta %>\n  <title><%= title %></title>\n\n  ".concat(partials.top.join("\n"), "\n\n  <script>\n    window.__assetPrefix__ = '<%= assetPrefix %>';\n  </script>\n  ").concat(partials.head.join("\n"), "\n\n</head>\n\n<body>\n  <noscript>\n    We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue.\n  </noscript>\n  <div id=\"<%= mountId %>\"><!--<?- html ?>--></div>\n  ").concat(partials.body.join("\n"), "\n  <!--<?- chunksMap.js ?>-->\n  <!--<?- SSRDataScript ?>-->\n  <!--<?- bottomTemplate ?>-->\n</body>\n\n</html>\n");
 };
 var routesForServer = function(param) {
     var routes = param.routes;
@@ -296,13 +296,17 @@ var routesForServer = function(param) {
     }
     return "\n    ".concat(importLoadersCode, "\n    ").concat(routesCode, "\n  ");
 };
+var createMatchReg = function(keyword) {
+    return new RegExp('("'.concat(keyword, '":\\s)"([^,]+)"'), "g");
+};
 var fileSystemRoutes = function() {
     var _ref = _asyncToGenerator(function(param) {
-        var routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, loadings, errors, loaders, loadersMap, loadersMapFile, importLazyCode, rootLayoutCode, getDataLoaderPath, traverseRouteTree, routeComponentsCode, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, route, newRoute, component, finalRoute, importLoadingCode, importErrorComponentsCode, importLoadersCode, _iteratorNormalCompletion1, _didIteratorError1, _iteratorError1, _iterator1, _step1, _step_value, key, loaderInfo;
+        var routes, ssrMode, nestedRoutesEntry, entryName, internalDirectory, _param_splitRouteChunks, splitRouteChunks, components, loadings, errors, loaders, loadersMap, loadersMapFile, importLazyCode, rootLayoutCode, getDataLoaderPath, traverseRouteTree, routeComponentsCode, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, route, newRoute, routeStr, keywords, regs, newRouteStr, component, finalRoute, keywords1, routeStr1, regs1, newRouteStr1, importLoadingCode, importComponentsCode, importErrorComponentsCode, importLoadersCode, _iteratorNormalCompletion1, _didIteratorError1, _iteratorError1, _iterator1, _step1, _step_value, key, loaderInfo;
         return __generator(this, function(_state) {
             switch(_state.label){
                 case 0:
-                    routes = param.routes, ssrMode = param.ssrMode, nestedRoutesEntry = param.nestedRoutesEntry, entryName = param.entryName, internalDirectory = param.internalDirectory;
+                    routes = param.routes, ssrMode = param.ssrMode, nestedRoutesEntry = param.nestedRoutesEntry, entryName = param.entryName, internalDirectory = param.internalDirectory, _param_splitRouteChunks = param.splitRouteChunks, splitRouteChunks = _param_splitRouteChunks === void 0 ? true : _param_splitRouteChunks;
+                    components = [];
                     loadings = [];
                     errors = [];
                     loaders = [];
@@ -351,20 +355,30 @@ var fileSystemRoutes = function() {
                                 };
                             }
                             if (route._component) {
-                                if (route.isRoot) {
-                                    rootLayoutCode = "import RootLayout from '".concat(route._component, "'");
-                                    component = "RootLayout";
-                                } else if (ssrMode === "string") {
-                                    lazyImport = '() => import(/* webpackChunkName: "'.concat(route.id, "\" */  '").concat(route._component, "')");
-                                    component = "loadable(".concat(lazyImport, ")");
+                                if (splitRouteChunks) {
+                                    if (route.isRoot) {
+                                        rootLayoutCode = "import RootLayout from '".concat(route._component, "'");
+                                        component = "RootLayout";
+                                    } else if (ssrMode === "string") {
+                                        lazyImport = '() => import(/* webpackChunkName: "'.concat(route.id, "\" */  '").concat(route._component, "')");
+                                        component = "loadable(".concat(lazyImport, ")");
+                                    } else {
+                                        lazyImport = '() => import(/* webpackChunkName: "'.concat(route.id, "\" */  '").concat(route._component, "')");
+                                        component = "lazy(".concat(lazyImport, ")");
+                                    }
                                 } else {
-                                    lazyImport = '() => import(/* webpackChunkName: "'.concat(route.id, "\" */  '").concat(route._component, "')");
-                                    component = "lazy(".concat(lazyImport, ")");
+                                    components.push(route._component);
+                                    component = "component_".concat(components.length - 1);
                                 }
                             }
                         } else if (route._component) {
-                            lazyImport = "() => import('".concat(route._component, "')");
-                            component = "loadable(".concat(lazyImport, ")");
+                            if (splitRouteChunks) {
+                                lazyImport = "() => import('".concat(route._component, "')");
+                                component = "loadable(".concat(lazyImport, ")");
+                            } else {
+                                components.push(route._component);
+                                component = "component_".concat(components.length - 1);
+                            }
                         }
                         var finalRoute = _objectSpreadProps(_objectSpread({}, route), {
                             lazyImport: lazyImport,
@@ -385,13 +399,34 @@ var fileSystemRoutes = function() {
                             route = _step.value;
                             if ("type" in route) {
                                 newRoute = traverseRouteTree(route);
-                                routeComponentsCode += "".concat(JSON.stringify(newRoute, null, 2).replace(/"(loadable.*\))"/g, "$1").replace(/"(loadableLazy.*\))"/g, "$1").replace(/"(\(\)[^,]+)",/g, "$1,").replace(/"(lazy\(.*\))"/g, "$1").replace(/"(loading_[^"]+)"/g, "$1").replace(/"(loader_[^"]+)"/g, "$1").replace(/"(RootLayout)"/g, "$1").replace(/"(error_[^"]+)"/g, "$1").replace(/\\"/g, '"'), ",");
+                                routeStr = JSON.stringify(newRoute, null, 2);
+                                keywords = [
+                                    "component",
+                                    "lazyImport",
+                                    "loader",
+                                    "loading",
+                                    "error"
+                                ];
+                                regs = keywords.map(createMatchReg);
+                                newRouteStr = regs.reduce(function(acc, reg) {
+                                    return acc.replace(reg, "$1$2");
+                                }, routeStr).replace(/"(RootLayout)"/g, "$1").replace(/\\"/g, '"');
+                                routeComponentsCode += "".concat(newRouteStr, ",");
                             } else {
                                 component = "loadable(() => import('".concat(route._component, "'))");
                                 finalRoute = _objectSpreadProps(_objectSpread({}, route), {
                                     component: component
                                 });
-                                routeComponentsCode += "".concat(JSON.stringify(finalRoute, null, 2).replace(/"(loadable[^"]*)"/g, "$1").replace(/"(lazy[^"]*)"/g, "$1"), ",");
+                                keywords1 = [
+                                    "component",
+                                    "lazyImport"
+                                ];
+                                routeStr1 = JSON.stringify(finalRoute, null, 2);
+                                regs1 = keywords1.map(createMatchReg);
+                                newRouteStr1 = regs1.reduce(function(acc, reg) {
+                                    return acc.replace(reg, "$1$2");
+                                }, routeStr1).replace(/\\"/g, '"');
+                                routeComponentsCode += "".concat(newRouteStr1, ",");
                             }
                         }
                     } catch (err) {
@@ -412,6 +447,9 @@ var fileSystemRoutes = function() {
                     importLoadingCode = loadings.map(function(loading, index2) {
                         return "import loading_".concat(index2, " from '").concat(loading, "';\n");
                     }).join("");
+                    importComponentsCode = components.map(function(component, index2) {
+                        return "import component_".concat(index2, " from '").concat(component, "';\n");
+                    }).join("");
                     importErrorComponentsCode = errors.map(function(error, index2) {
                         return "import error_".concat(index2, " from '").concat(error, "';\n");
                     }).join("");
@@ -454,7 +492,7 @@ var fileSystemRoutes = function() {
                     _state.sent();
                     return [
                         2,
-                        "\n    ".concat(importLazyCode, "\n    ").concat(rootLayoutCode, "\n    ").concat(importLoadingCode, "\n    ").concat(importErrorComponentsCode, "\n    ").concat(importLoadersCode, "\n    ").concat(routeComponentsCode, "\n  ")
+                        "\n    ".concat(importLazyCode, "\n    ").concat(importComponentsCode, "\n    ").concat(rootLayoutCode, "\n    ").concat(importLoadingCode, "\n    ").concat(importErrorComponentsCode, "\n    ").concat(importLoadersCode, "\n    ").concat(routeComponentsCode, "\n  ")
                     ];
             }
         });