Imported routes from vue-router/auto-routes is undefined

[negezor]

After upgrading unplugin-vue-router from 0.7.0 to 0.8.5 and replacing vue-router/auto/routes imports with vue-router/auto-routes. I get the error

[vite] Error when evaluating SSR module /src/router.ts:
|- TypeError: Cannot read properties of undefined (reading 'map')
    at eval (/home/negezor/projects/votv/src/router.ts:97:39)

I had the following code in this code section:

import { routes } from 'vue-router/auto-routes';
import { setupLayouts } from 'virtual:generated-layouts';

console.log('routes', routes); // routes undefined

// ...

// 97 line
const routesWithLayouts = setupLayouts(routes);

I am using the following Vite configuration:

import { defineConfig } from 'vite';

import vuePlugin from '@vitejs/plugin-vue';
import layoutsPlugin from 'vite-plugin-vue-layouts';
import vueRouterPlugin from 'unplugin-vue-router/vite';
import { getFileBasedRouteName } from 'unplugin-vue-router';

export default defineConfig({
    plugins: [
        vueRouterPlugin({
            dts: './src/typed-router.d.ts',
            getRouteName: (node) => {
                let routeName = getFileBasedRouteName(node).substring(1);

                if (routeName === '') {
                    return 'index';
                }

                if (routeName.at(-1) === '/') {
                    routeName = routeName.substring(0, routeName.length - 1);
                }

                if (node.children.size !== 0) {
                    routeName += '-root';
                }

                return routeName
                    .replace(/\[|\]/g, '')
                    .replace(/\//g, '-');
            },
            routesFolder: {
                src: 'src',
                filePatterns: 'pages/**/*',
                path: (file) => {
                    const sourceDir = file.substring(file.lastIndexOf('src/') + 5);

                    return sourceDir.substring(sourceDir.indexOf('pages') + 6);
                },
            }
        }),
        vuePlugin(),
        layoutsPlugin({
            importMode: () => 'sync',
            layoutsDirs: [
                'src/layouts'
            ],
        })
    ]
});

Adding logs: true shows the presence of routes in the console, but it is still undefined in the code. Rolling back the changes to 0.7.0 version solves the problem. I am using the following module versions:
vite: 5.2.3
vue: 3.4.21
vue-router: 4.3.0
unplugin-vue-router: 0.8.5
vite-plugin-vue-layouts: 0.11.0

[posva]

Can you reproduce without the other plugins? Did you follow the migration steps in the changelog?

[negezor]

After a bit of debugging I realized that it was broken in SSR. When I tried to open the application as SPA, all the routers were in place. I've done all the changelog steps and also looked at diff versions, but I still don't understand what's going wrong.

[posva]

I see. I haven’t found any issue about using this with SSR so I will move this to a discussion until a boiled down reproduction is provided

[negezor]

You moved the issue to discussions too quickly 😅 I made a reproduction, followed all the steps in the console it will be:
https://github.com/negezor/vite-ssr-unplugin-vue-router-348

Server started at http://localhost:5173
routes undefined

2:21:40 PM [vite] Error when evaluating SSR module /src/router.ts:
|- Error: Imported routes from vue-router/auto-routes is undefined
    at eval (/home/negezor/projects/vite-ssr-unplugin-vue-router-348/src/router.ts:7:9)
    at async instantiateModule (file:///home/negezor/projects/vite-ssr-unplugin-vue-router-348/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:55006:9)

2:21:40 PM [vite] Error when evaluating SSR module /src/main.ts: failed to import "/src/router.ts"
|- Error: Imported routes from vue-router/auto-routes is undefined
    at eval (/home/negezor/projects/vite-ssr-unplugin-vue-router-348/src/router.ts:7:9)
    at async instantiateModule (file:///home/negezor/projects/vite-ssr-unplugin-vue-router-348/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:55006:9)

2:21:40 PM [vite] Error when evaluating SSR module /src/entry-server.ts: failed to import "/src/main.ts"
|- Error: Imported routes from vue-router/auto-routes is undefined
    at eval (/home/negezor/projects/vite-ssr-unplugin-vue-router-348/src/router.ts:7:9)
    at async instantiateModule (file:///home/negezor/projects/vite-ssr-unplugin-vue-router-348/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:55006:9)

Error: Imported routes from vue-router/auto-routes is undefined
    at /home/negezor/projects/vite-ssr-unplugin-vue-router-348/src/router.ts:6:11
    at async instantiateModule (file:///home/negezor/projects/vite-ssr-unplugin-vue-router-348/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:55006:9)

[posva]

Thanks, I will give it a look

[hc-chumak]

Hi!

@negezor, try to use ssr.noExternal option for development mode in defineConfig:

import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import VueRouter from 'unplugin-vue-router/vite'

export default ({ mode }) => {
  return defineConfig({
    ssr: {
      noExternal: mode === 'development' ? ['vue-router'] : []
    },
    plugins: [
      VueRouter(),
      Vue()
    ]
  })
}

[negezor]

It really works!

@posva There seems to be more information here now as to which way to dig.

[posva]

Added 63beb30