Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')

[charismafight]

Hi there,
I created a new vue project by 'vue create' to test this package, followed the installation and migrating part, I've got 'Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')' error from router.ts. I found out that routes imported from 'vue-router/auto-routes' is undefined. And I have also created another project using vite, and it worked correctly. The only difference is the vite.config.ts and vue.config.js. Anybody can help me solving this problem? Thanks.

vue.config.js

module.exports = {
  configureWebpack: {
    resolve: { extensions: [".ts", ".tsx", ".js", ".json"] },
    plugins: [
      require('unplugin-vue-router/webpack')({
        /* options */
      }),
    ],
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }
      ]
    }
  },
}

tsconfig.json

{
  "include": [
    // other files...
    "./typed-router.d.ts"
  ],
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "target": "es2016",
    "module": "commonjs", /* Specify what module code is generated. */
    "types": [
      "unplugin-vue-router/client"
    ],
    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
    "strict": true, /* Enable all strict type-checking options. */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
}

typed-router.d.ts

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
// It's recommended to commit this file.
// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.

declare module 'vue-router/auto-routes' {
  import type {
    RouteRecordInfo,
    ParamValue,
    ParamValueOneOrMore,
    ParamValueZeroOrMore,
    ParamValueZeroOrOne,
  } from 'vue-router'

  /**
   * Route name map generated by unplugin-vue-router
   */
  export interface RouteNamedMap {
    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
  }
}

tsconfig.json

{
  "include": [
    // other files...
    "./typed-router.d.ts"
  ],
  "compilerOptions": {
    "moduleResolution": "Bundler",
    "target": "es2016",
    "module": "commonjs", /* Specify what module code is generated. */
    "types": [
      "unplugin-vue-router/client"
    ],
    "esModuleInterop": true, /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
    "strict": true, /* Enable all strict type-checking options. */
    "skipLibCheck": true /* Skip type checking all .d.ts files. */
  }
}

router.ts

import { createRouter, createWebHistory } from 'vue-router'
import { routes } from 'vue-router/auto-routes'

export const router = createRouter({
    history: createWebHistory(),
    routes,
});

main.js

import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

createApp(App)
    .use(router)
    .mount('#app')

[posva]

There are probably some updates needed for webpack. See #488 .
For the moment, use Vite. It's the recommended bundler for new projects too.

[charismafight]

npm list webpack showed 'webpack@5.94.0', I reinstalled it and still not worked, any further suggestion?
In fact, I want to migrate an exsiting project and keep the deployment config, so I create a new project with webpack just for test.

[zhangmo8]

npm list webpack showed 'webpack@5.94.0', I reinstalled it and still not worked, any further suggestion?

In fact, I want to migrate an exsiting project and keep the deployment config, so I create a new project with webpack just for test.

Is it convenient to post a whole smallest project to help me understand and solve the error report?

[charismafight]

npm list webpack showed 'webpack@5.94.0', I reinstalled it and still not worked, any further suggestion?
In fact, I want to migrate an exsiting project and keep the deployment config, so I create a new project with webpack just for test.

Is it convenient to post a whole smallest project to help me understand and solve the error report?

@zhangmo8 Sure, thanks a lot.
vuerouter.zip

[zhangmo8]

npm list webpack showed 'webpack@5.94.0', I reinstalled it and still not worked, any further suggestion?
In fact, I want to migrate an exsiting project and keep the deployment config, so I create a new project with webpack just for test.

Is it convenient to post a whole smallest project to help me understand and solve the error report?

@zhangmo8 Sure, thanks a lot. vuerouter.zip

It's working normally. Make sure eslint works when you give us the minimum demo @charismafight
vuerouter66.zip

[charismafight]

It's working normally.

That's weird, I've tried your version and it's still not worked. ( I just use npm intall and npm run serve)

Make sure eslint works when you give us the minimum demo @charismafight

Okay, I will note that.

[zhangmo8]

What's your Node version and npm version @charismafight

[charismafight]

@zhangmo8
node v20.13.1
npm 10.8.2

[zhangmo8]

It's strange that I can run normally in my local.

[zam157]

Are you on Windows? I have the same problem using rspack on Windows

[ElysiaEgo]

Same problem on Windows with rsbuild. Moving the project to Linux without changes and it works perfectly.

[Deuscx]

made a config in Windows which is useful for me

  dev: {
    // windows unplugin-vue-router not support hmr, so reload server
    watchFiles: {
      type: 'reload-server',
      paths: ['./typed-router.d.ts'],
    },
  },
  tools: {
    async rspack(config) {
      const { scanPages, generateRoutes } = createRoutesContext(resolveOptions({ }))
      await scanPages()
      config.plugins?.push(new RspackVirtualModulePlugin({
        'vue-router/auto-routes': generateRoutes(),
      }))

https://github.com/Deuscx/starter-rspack-vue/blob/main/rsbuild.config.ts#L21-L38