Vue3 升级 - 错误:[插件:vite:dep-scan] 无法读取未定义的属性(读取"长度")



我在一个ve2项目中成功地从webpack迁移到vite,现在我正在从ve2升级到ve3。

我一直做到本指南的第4步:https://v3-migration.vuejs.org/migration-build.html#installation,现在构建过程给了我这个错误。

ERROR: [plugin: vite:dep-scan] Cannot read properties of undefined (reading 'length')

看起来vite compat builder无法找到文件/src/main.js,因为如果我重命名甚至删除该文件,错误仍然相同。

我错过什么了吗?

✘ [ERROR] [plugin vite:dep-scan] Cannot read properties of undefined (reading 'length')
node_modules/vite/dist/node/chunks/dep-59dc6e00.js:60384:34:
60384 │     if (importee.length < pattern.length) {
╵                                   ^
at matches (/home/user/projects/ipfs-search/dweb-search-frontend/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:60384:35)
at /home/user/projects/ipfs-search/dweb-search-frontend/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:60443:58
at Array.find (<anonymous>)
at Context.resolveId (/home/user/projects/ipfs-search/dweb-search-frontend/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:60443:42)
at Object.resolveId (/home/user/projects/ipfs-search/dweb-search-frontend/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38837:55)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async resolve (/home/user/projects/ipfs-search/dweb-search-frontend/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:39049:26)
at async /home/user/projects/ipfs-search/dweb-search-frontend/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:39257:34
at async callback (/home/user/projects/ipfs-search/dweb-search-frontend/node_modules/esbuild/lib/main.js:929:28)
at async handleRequest (/home/user/projects/ipfs-search/dweb-search-frontend/node_modules/esbuild/lib/main.js:709:30)
This error came from the "onResolve" callback registered here:
node_modules/vite/dist/node/chunks/dep-59dc6e00.js:39253:18:
39253 │             build.onResolve({
╵                   ~~~~~~~~~
at setup (/home/user/projects/ipfs-search/dweb-search-frontend/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:39253:19)
at handlePlugins (/home/user/projects/ipfs-search/dweb-search-frontend/node_modules/esbuild/lib/main.js:851:23)
at Object.buildOrServe (/home/user/projects/ipfs-search/dweb-search-frontend/node_modules/esbuild/lib/main.js:1145:7)
at /home/user/projects/ipfs-search/dweb-search-frontend/node_modules/esbuild/lib/main.js:2087:17
at new Promise (<anonymous>)
at Object.build (/home/user/projects/ipfs-search/dweb-search-frontend/node_modules/esbuild/lib/main.js:2086:14)
at Object.build (/home/user/projects/ipfs-search/dweb-search-frontend/node_modules/esbuild/lib/main.js:1935:51)
at /home/user/projects/ipfs-search/dweb-search-frontend/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38997:54
at Array.map (<anonymous>)
The plugin "vite:dep-scan" was triggered by this import
html:/home/user/projects/ipfs-search/dweb-search-frontend/index.html:1:7:
1 │ import "/src/main.js"
╵        ~~~~~~~~~~~~~~
Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-59dc6e00.js:60384:34: ERROR: [plugin: vite:dep-scan] Cannot read properties of undefined (reading 'length')

vite.config.js:

import { defineConfig } from 'vite';
import path from 'path';
import createVuePlugin from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
createVuePlugin({
template: {
compilerOptions: {
compatConfig: {
MODE: 2,
},
},
},
}),
],
server: {
port: 8080,
},
resolve: {
alias: [
{
vue: '@vue/compat',
},
{
find: '@',
replacement: path.resolve(__dirname, 'src'),
},
],
},
});

受Frido Emans回答的启发,我发现问题是使用列表进入alias。最后我替换了

export default defineConfig({
plugins: [vue()],
resolve: {
alias: [
{
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
{
find: "./runtimeConfig",
replacement: "./runtimeConfig.browser",
},
]
},
});

by(注意别名列表不见了)

export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"./runtimeConfig": "./runtimeConfig.browser",
"@": fileURLToPath(new URL("./src", import.meta.url))
}
},
});

我找到了答案;vite.config.js中的别名:

{
vue: '@vue/compat',
},

似乎是导致错误的原因。

注意,这个代码片段是从vue.js的官方vue.js迁移指南中直接复制过来的。在我删除它之后,错误消失了,并且出现了更多可理解的错误,正如我所预料的那样。

最新更新