@modern-js/app-tools 2.9.0 → 2.10.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,61 @@
 # @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

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

@@ -176,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 = [];
@@ -241,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,
@@ -275,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) => {
@@ -313,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/index.js

@@ -31,11 +31,13 @@ __export(builder_exports, {
 });
 module.exports = __toCommonJS(builder_exports);
 var import_utils = require("@modern-js/utils");
+var import_builder_rspack_provider = require("@modern-js/builder-rspack-provider");
 async function createBuilderGenerator(bundler) {
   if (bundler === "rspack") {
     try {
       const { createRspackBuilderForModern } = await Promise.resolve().then(() => __toESM(require("./builder-rspack")));
-      import_utils.logger.info("Using Rspack ✨");
+      const version = await (0, import_builder_rspack_provider.getRspackVersion)();
+      import_utils.logger.info(`Using Rspack v${version} 🦀`);
       return createRspackBuilderForModern;
     } catch (_) {
       throw new Error(

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

@@ -32,6 +32,8 @@ __export(RouterPlugin_exports, {
 module.exports = __toCommonJS(RouterPlugin_exports);
 var import_path = __toESM(require("path"));
 var import_utils = require("@modern-js/utils");
+var import_constants = require("@modern-js/utils/constants");
+var import_constants2 = require("@modern-js/utils/universal/constants");
 const PLUGIN_NAME = "ModernjsRoutePlugin";
 class RouterPlugin {
   apply(compiler) {
@@ -62,8 +64,12 @@ class RouterPlugin {
         },
         async () => {
           const stats = compilation.getStats().toJson({
+            all: false,
+            publicPath: true,
+            assets: true,
             chunkGroups: true,
-            chunks: true
+            chunks: true,
+            ids: true
           });
           const { publicPath, chunks = [] } = stats;
           const routeAssets = {};
@@ -89,7 +95,12 @@ class RouterPlugin {
           };
           const injectedContent = `
             ;(function(){
-              window.${import_utils.ROUTE_MANIFEST} = ${JSON.stringify(manifest)};
+              window.${import_constants2.ROUTE_MANIFEST} = ${JSON.stringify(manifest, (k, v) => {
+            if (k === "assets") {
+              return void 0;
+            }
+            return v;
+          })};
             })();
           `;
           const entrypointsArray = Array.from(
@@ -119,7 +130,7 @@ class RouterPlugin {
               void 0
             );
           }
-          const filename = import_path.default.join(outputPath, import_utils.ROUTE_MINIFEST_FILE);
+          const filename = import_path.default.join(outputPath, import_constants.ROUTE_MANIFEST_FILE);
           await import_utils.fs.ensureFile(filename);
           await import_utils.fs.writeFile(filename, JSON.stringify(manifest, null, 2));
         }

package/dist/cjs/commands/serve.js

@@ -36,7 +36,7 @@ var import_printInstructions = require("../utils/printInstructions");
 var import_createServer = require("../utils/createServer");
 var import_getServerInternalPlugins = require("../utils/getServerInternalPlugins");
 const start = async (api) => {
-  var _a;
+  var _a, _b;
   const appContext = api.useAppContext();
   const userConfig = api.useResolvedConfigContext();
   const hookRunners = api.useHookRunners();
@@ -49,7 +49,14 @@ const start = async (api) => {
   const serverInternalPlugins = await (0, import_getServerInternalPlugins.getServerInternalPlugins)(api);
   const app = await (0, import_prod_server.default)({
     pwd: appDirectory,
-    config: userConfig,
+    config: {
+      ...userConfig,
+      dev: userConfig.dev,
+      output: {
+        path: (_b = userConfig.output.distPath) == null ? void 0 : _b.root,
+        ...userConfig.output || {}
+      }
+    },
     appContext: {
       sharedDirectory: (0, import_utils.getTargetDir)(
         appContext.sharedDirectory,

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

@@ -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  ")
                     ];
             }
         });