在开发模式中启动预构建未更新路由表导致页面加载失败

[Hector-Zhuang]

相关平台

H5

浏览器版本: Chrome 121.0.6167.85 (Build officiel) (arm64) 使用框架: React

复现步骤

在 H5 开发环境并开启 prebundle 后，假设新增一个页面 pages/test/index，并且相应代码也已创建，但打开此页面时出现白屏因为其代码未被加载。

反之同理，假设已存在一个页面 pages/test/index，在重新启动 dev server 后并从 pages 删除这个页面，此页面仍可正常访问。

期望结果

若 app.config.ts 的 pages 选项出现变更时，路由表应于 pages 同步。

实际结果

目前路由表无法与 pages 同步。

环境信息

  Taro CLI 3.6.23 environment info:
    System:
      OS: macOS 14.0
      Shell: 5.9 - /bin/zsh
    Binaries:
      Node: 21.5.0 - /opt/homebrew/bin/node
      Yarn: 1.22.19 - /usr/local/bin/yarn
      npm: 10.2.4 - /opt/homebrew/bin/npm
    npmPackages:
      @tarojs/cli: 3.6.23 => 3.6.23 
      @tarojs/components: 3.6.23 => 3.6.23 
      @tarojs/helper: 3.6.23 => 3.6.23 
      @tarojs/plugin-framework-react: 3.6.23 => 3.6.23 
      @tarojs/plugin-platform-alipay: 3.6.23 => 3.6.23 
      @tarojs/plugin-platform-h5: 3.6.23 => 3.6.23 
      @tarojs/plugin-platform-jd: 3.6.23 => 3.6.23 
      @tarojs/plugin-platform-qq: 3.6.23 => 3.6.23 
      @tarojs/plugin-platform-swan: 3.6.23 => 3.6.23 
      @tarojs/plugin-platform-tt: 3.6.23 => 3.6.23 
      @tarojs/plugin-platform-weapp: 3.6.23 => 3.6.23 
      @tarojs/react: 3.6.23 => 3.6.23 
      @tarojs/runtime: 3.6.23 => 3.6.23 
      @tarojs/shared: 3.6.23 => 3.6.23 
      @tarojs/taro: 3.6.23 => 3.6.23 
      @tarojs/taro-loader: 3.6.23 => 3.6.23 
      @tarojs/webpack5-runner: 3.6.23 => 3.6.23 
      babel-preset-taro: 3.6.23 => 3.6.23 
      eslint-config-taro: 3.6.23 => 3.6.23 
      react: ^18.0.0 => 18.0.0 

---

补充信息

此问题的在于 packages/taro-loader/src/h5.ts 的 67 行。

  if (options.bootstrap) return `import(${stringify(join(options.sourceDir, `${isMultiRouterMode ? pageName : options.entryFileName}.boot`))})`

启动 prebundle 后，bootstrap 为 true，直接返回打开 dev server 时构建的 app.config.ts，导致下面重新创建路由表的代码被忽略：

  const routesConfig = isMultiRouterMode ? `config.routes = []
config.route = ${genResource(pageName, pages, this, options.filename)}
config.pageName = "${pageName}"` : `config.routes = [
  ${config.pages?.map(path => genResource(path, pages, this)).join(',')}
]`