[Bug]: Rspack cannot be used with unplugin-vue-router

tmg0 commented 2 months ago

System Info

System: OS: macOS 14.6.1 CPU: (8) arm64 Apple M2 Memory: 65.63 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.20.4 - ~/.volta/tools/image/node/18.20.4/bin/node npm: 10.7.0 - ~/.volta/tools/image/node/18.20.4/bin/npm pnpm: 9.9.0 - ~/.volta/tools/image/pnpm/9.9.0/bin/pnpm bun: 1.1.27 - ~/.bun/bin/bun Browsers: Chrome: 128.0.6613.114 Safari: 17.6 npmPackages: @rspack/cli: ^1.0.1 => 1.0.1 @rspack/core: ^1.0.1 => 1.0.1

Details

unplugin-vue-router does not work with rspack, It seems to be a vfs error?

I'm not quite sure abount this issue should belongs to rspack or unplugin, unplugin has support all of the life cycle hooks of rspack, so it should not be a problem?

I would be very grateful if anyone could answer this question.

ERROR in ./node_modules/.pnpm/unplugin@1.12.3/node_modules/unplugin/dist/rspack/virtual.js?unplugin_rspack_virtual=%2F__vue-router%2Fauto-routes
  × Module parse failed:
  ╰─▶   × JavaScript parsing error: 'import', and 'export' cannot be used outside of module code
         ╭─[1:0]
       1 │ export const routes = [
         · ──────
       2 │   {
       3 │     path: '/',
         ╰────

  help:
        File was processed with these loaders:
         * commonjs|/nuxlite/node_modules/.pnpm/unplugin@1.12.3/node_modules/unplugin/dist/rspack/loaders/load.js??ruleSet[1].rules[2].use[0]
        You may need an additional loader to handle the result of these loaders.

Reproduce link

https://github.com/tmg0/nuxlite/tree/rspack/unplugin-vue-router

Reproduce Steps

pnpm i
pnpm dev

tmg0 commented 2 months ago

I have tried some other ways to support this feature, but unfortunately it doesn't support HMR

Here's an example of rsbuild config file that might be helpful to others who are facing a similar issue.

import { defineConfig } from '@rsbuild/core'
import { pluginBabel } from '@rsbuild/plugin-babel'
import { pluginVue } from '@rsbuild/plugin-vue'
import { pluginVueJsx } from '@rsbuild/plugin-vue-jsx'
import { RspackVirtualModulePlugin } from 'rspack-plugin-virtual-module'
import { resolveOptions } from 'unplugin-vue-router/options'
import { createRoutesContext } from 'unplugin-vue-router'

export default defineConfig({
  source: {
    entry: {
      index: './src/index.ts',
    },
  },

  plugins: [
    pluginBabel({
      include: /\.(?:jsx|tsx)$/,
    }),
    pluginVue(),
    pluginVueJsx(),
  ],

  tools: {
    async rspack(config) {
      const { scanPages, generateRoutes } = createRoutesContext(resolveOptions({ }))

      await scanPages()

      config.plugins?.push(new RspackVirtualModulePlugin({
        'vue-router/auto-routes': generateRoutes(),
      }))
    },
  },
})