CODEWITHSUNDEEP
vue.jsvite
Swapnil
Swapnil

Reputation: 91

Internal server error: Cannot read property 'length' of undefined

Getting an error

[vite] Internal server error: Cannot read property 'length' of undefined

This is happening while trying to run my vue project using vite.

Below is the error stack:

Build failed with 1 error: node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:59574:34: ERROR: [plugin: vite:dep-scan] Cannot read property 'length' of undefined 2:44:29 PM [vite] Internal server error: Cannot read property 'length' of undefined at matches (/Users/pandocorp/Desktop/pando/codes/pando-app/frontend/shipper/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:59574:35) at /Users/pandocorp/Desktop/pando/codes/pando-app/frontend/shipper/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:59633:58 at Array.find () at Context.resolveId (/Users/pandocorp/Desktop/pando/codes/pando-app/frontend/shipper/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:59633:42) at Object.resolveId (/Users/pandocorp/Desktop/pando/codes/pando-app/frontend/shipper/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:36609:55) at processTicksAndRejections (internal/process/task_queues.js:95:5) at async ModuleGraph.resolveUrl (/Users/pandocorp/Desktop/pando/codes/pando-app/frontend/shipper/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:56244:26) at async ModuleGraph.getModuleByUrl (/Users/pandocorp/Desktop/pando/codes/pando-app/frontend/shipper/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:56124:23) at async doTransform (/Users/pandocorp/Desktop/pando/codes/pando-app/frontend/shipper/node_modules/vite/dist/node/chunks/dep-27bc1ab8.js:55582:20)

My vite.config.js

import { defineConfig } from 'vite';
import { createVuePlugin } from 'vite-plugin-vue2';

const config = require('./config');
const path = require('path');

export default defineConfig({
plugins: [createVuePlugin()],
server: {
port: 8080,
},
resolve: {
alias: [
{
'@': path.resolve(__dirname, './src'),
},
{
'@common': path.resolve(__dirname, '../common-v2'),
},
// {
// find: path.resolve(__dirname, '../static'),
// replacement: config.dev.assetsSubDirectory,
// ignore: ['.'],
// },
// {
// find: path.resolve(__dirname, '../firebase-messaging-sw.js'),
// replacement: 'firebase-messaging-sw.js',
// ignore: ['.'],
// },
],
},
build: {
chunkSizeWarningLimit: 600,
cssCodeSplit: false,
},
});

Upvotes: 8

Views: 7352

Answers (3)

MonoThreaded
MonoThreaded

Reputation: 12033

Same problem encountered while getting throug Amplify "getting started" (which requires a new alias)

The solution for me was to rewrite the config as follows

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

Upvotes: 0

Paolo
Paolo

Reputation: 21056

I had the same issue with a brand new Vite project. I don't know if this is your case, but I created this new project under a directory of another project like so:

/some/path/my-project              <- "parent project"
/some/path/my-project/...          <- other project files
/some/path/my-project/node_modules
/some/path/my-project/...          <- other project files
/some/path/my-project/brand-new-vite-project <--- THIS ONE!

This nesting seems to generate the issue, because I moved the brand new project elsewhere and everything worked as expected.

Upvotes: 1

Austin White
Austin White

Reputation: 148

When I encountered this error, adding the following to vite.config.js seemed to resolve it.

resolve: {
    alias: [
        {
            find: /^~(.*)$/,
            replacement: 'node_modules/$1',
        },
    ],
},

Upvotes: 1

Related Questions