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

Question

I migrated from webpack to vite successfully in a vue2 project and now I am upgrading from vue2 to vue3.

I made it until step 4 in this guide: https://v3-migration.vuejs.org/migration-build.html#installation, and now the build process gives me this error.

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

It looks like the vite compat builder is not able to find the file /src/main.js, because if I rename or even delete the file, the error remains the same.

Did I miss something?

✘ [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'),
      },
    ],
  },
});

Analogical

Answer 1

Inspired by Frido Emans answer, I found the issue was using a list into alias. I ended up replacing

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

by (notice the alias list is gone)

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

Sakhuja

It did not help me. – Decoder

Answer 2

Well I found an answer; the alias in vite.config.js:

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

seemed to cause the error.

Note that this snippet was copied directly from the official vue.js vue3 migration guide. After I removed it, the error disappeared, and more comprehensible errors came, as the ones I expected.

Analogical

Answer 3

If you want to keep "alias" as a list, you have to define a Record as follows.

export default defineConfig({
  plugins: [vue()],
    resolve: {
      alias: [
        // required for in-browser template compilation
        // https://vuejs.org/guide/scaling-up/tooling.html#note-on-in-browser-template-compilation
        {
          find: 'vue',
          replacement: 'vue/dist/vue.esm-bundler.js',
        },
        {
          find: "@",
          replacement: fileURLToPath(new URL("./src", import.meta.url)),
        },
      ]
    }
});

In the Vite documentation you will see that "alias type is: Record<string, string> | Array<{ find: string | RegExp, replacement: string, customResolver?: ResolverFunction | ResolverObject }>

Vite docs: https://vitejs.dev/config/shared-options#resolve-alias

Oslo

Answer 4

I also came across a similar issue:

error during build:
[vite:dts] Cannot read properties of undefined (reading 'push')

With my configurations set like:

import react from '@vitejs/plugin-react'
import path from 'path'
import { defineConfig } from 'vitest/config'
import dts from 'vite-plugin-dts'
import tailwindcss from 'tailwindcss'
import { UserConfigExport } from 'vite'


const app = async (): Promise<UserConfigExport> => {
  return defineConfig({
    plugins: [
      react(),
      dts({
        insertTypesEntry: true,
        outDir: 'dist',
      })
    ],
    css: {
      postcss: {
        plugins: [tailwindcss({
          config: path.resolve(__dirname, 'tailwind.config.js'),
        })],
      },
      modules: {
        exportGlobals: true,
      }
    },
    optimizeDeps: {
      include: ['react', 'react-dom', 'tailwindcss', 'react/jsx-runtime'],
    },
    build: {
      lib: {
        entry: path.resolve(__dirname, 'src/lib/index.ts'),
        name: "index",
        fileName: (format) => `index.${format}.js`,
      },
      sourcemap: true,
      rollupOptions: {
        external: ['react', 'react/jsx-runtime', 'react-dom', 'tailwindcss'],
        output: [
          {
            globals: {
              react: 'React',
              'react/jsx-runtime': 'react/jsx-runtime',
              'react-dom': 'ReactDOM',
              tailwindcss: 'tailwindcss',
            },
            entryFileNames: `index.d.ts`,
            format: "module",
          },
          {
            entryFileNames: `index.es.js`,
            format: 'es',
            preserveModules: true,
          },
          {
             entryFileNames: `index.cjs`,
             format: 'cjs',
          },
        ],
        input: "src/lib/index.ts",
        plugins: [dts(), react()], // THIS WAS MY ISSUE
      },
      outDir: 'dist'
    },
    test: {
      globals: true,
      environment: 'jsdom',
    },
  })
}
// https://vitejs.dev/config/
export default app

Despite this configuration working previously, I figured it was an array somewhere where it wasn't supposed to be. I removed the line that's specified above and everything worked (after removing others and seeing if that worked...)

Bouffe