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

charismafight commented 2 months ago

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
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'

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

posva commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago