definePage fails with rsbuild

[gltjk]

Hi, I just moved one of my vite project to rsbuild and found meta information given by definePage disappeared.

Here is a demo project: https://github.com/gltjk/rsbuild-unplugin-vue-router

I used definePage in src/pages/index.vue:

<script setup>
definePage({
  meta: {
    title: 'Home',
  },
});
</script>

and in src/pages/about.vue

<script setup>
definePage({
  meta: {
    title: 'About',
  },
});
</script>

I also rendered the whole route object on the page. Here are the screenshots of those two pages, where it is clearly seen that the meta object is empty.

There is also an error shown in the terminal when the project starts. Here is it:

error   Compile error: 
Failed to compile, check the errors for troubleshooting.
File: /Users/username/project-path/rsbuild-vue/src/pages/about.vue?definePage&vue&lang.tsx:1:1
  × ModuleError: At least one <template> or <script> is required in a single file component. /Users/username/project-path/rsbuild-vue/src/pages/about.vue (from: /Users/username/project-path/rsbuild-vue/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0])
  │     at parse$1 (/Users/username/project-path/rsbuild-vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1864:7)
  │     at Object.loader (/Users/username/project-path/rsbuild-vue/node_modules/vue-loader/dist/index.js:64:36)
  │     at LOADER_EXECUTION (/Users/username/project-path/rsbuild-vue/node_modules/@rspack/core/dist/index.js:10363:18)
  │     at runSyncOrAsync2 (/Users/username/project-path/rsbuild-vue/node_modules/@rspack/core/dist/index.js:10364:6)
  │     at node:internal/util:433:21
  │     at new Promise (<anonymous>)
  │     at runSyncOrAsync2 (node:internal/util:419:12)
  │     at runLoaders (/Users/username/project-path/rsbuild-vue/node_modules/@rspack/core/dist/index.js:10833:54)

File: /Users/username/project-path/rsbuild-vue/src/pages/index.vue?definePage&vue&lang.tsx:1:1
  × ModuleError: At least one <template> or <script> is required in a single file component. /Users/username/project-path/rsbuild-vue/src/pages/index.vue (from: /Users/username/project-path/rsbuild-vue/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0])
  │     at parse$1 (/Users/username/project-path/rsbuild-vue/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1864:7)
  │     at Object.loader (/Users/username/project-path/rsbuild-vue/node_modules/vue-loader/dist/index.js:64:36)
  │     at LOADER_EXECUTION (/Users/username/project-path/rsbuild-vue/node_modules/@rspack/core/dist/index.js:10363:18)
  │     at runSyncOrAsync2 (/Users/username/project-path/rsbuild-vue/node_modules/@rspack/core/dist/index.js:10364:6)
  │     at node:internal/util:433:21
  │     at new Promise (<anonymous>)
  │     at runSyncOrAsync2 (node:internal/util:419:12)
  │     at runLoaders (/Users/username/project-path/rsbuild-vue/node_modules/@rspack/core/dist/index.js:10833:54)

It seems that the definePage part is rendered as a separate SFC rather than part of the original vue file.

Here is my rsbuild.config.mjs for reference:

import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';
import { rspack as VueRouter } from 'unplugin-vue-router';

export default defineConfig({
  plugins: [pluginVue()],
  tools: {
    rspack: {
      plugins: [VueRouter()],
    },
  },
});

For other information please refer to the repository I posted above or feel free to discuss here.

I'm not sure why this happened and am hoping for assistance. Thanks!

[mrhammadasif]

Its the same behaviour with vite for me. I am using it with layouts, but the router.meta is empty object for me, I tried with SFC Route Block and also definePage()

[Thy3634]

Its the same behaviour with vite for me. I am using it with layouts, but the router.meta is empty object for me, I tried with SFC Route Block and also definePage()

me too, got an empty meta object

[pot-code]

you can even make it work in rsbuild?

× ESModulesLinkingError: export 'routes' (imported as 'routes') was not found in 'vue-router/auto-routes' 
(possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, loadRouteLocation, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)

it always resolves to vue-router in my case