extendPages not resolving component

[yanniznik]

Environment

• Operating System: Darwin
• Node Version: v18.18.2
• Nuxt Version: 2.17.3
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: yarn@1.22.19
• Builder: webpack
• User Config: bridge, modules, serverHandlers, devServerHandlers, devServer, typescript, nitro, buildModules
• Runtime Modules: @/modules/addLocale.ts
• Build Modules: (), @nuxt/bridge@3.0.1-28459804.a0dceb3

Reproduction

Stackblitz: https://stackblitz.com/edit/github-nafqpn?file=modules%2FaddLocale.ts Repo: https://github.com/yanniznik/nuxt-bridge-extendPages

1. Add a module file and load it in nuxt.config.ts under modules
2. Use the nuxt3 extendPages method to add a new route
3. yarn dev
4. in Chrome dev console, run $nuxt.$router.options.routes
5. Go to /Localeand get 404 instead of component

Describe the bug

Current: The page doesn't load (404 not found). The new "/Locale" route was added from a module using extendPage. Looking at the route object clearly shows that the route doesn't have a component attached

Expected: the component is attached to the route so that it can be loaded normally

Additional context

The exact same setu in Nuxt3 works. /Locale is apccessible Example stablitz with Nuxt3, same setup: https://stackblitz.com/github/nuxt/examples/tree/main/examples/advanced/module-extend-pages?embed=1&file=pages/index.vue&theme=dark

Logs

No response

[yanniznik]

A workaround can be used in nuxt.config.ts with:

router: {
    extendRoutes(routes, resolve) {
      routes.unshift({
        path: '/newRoute',
        component: resolve('aVueComponent.vue'),
      })
    }
}

instead of using extendPage which is not working at the moment.

[wattanx]

For nuxt 2, build:extendRoutes is called. https://github.com/nuxt/nuxt/blob/main/packages/kit/src/pages.ts#L13

Therefore, component should be used instead of file.

extendPages((pages, resolve) => {
  pages.unshift({
    path: '/locale',
-  file: resolver.resolve('../Locale/Locale.vue'),
+  component: resolver.resolve('../Locale/Locale.vue'),
  });
});