Vite Internal server error: Cannot read properties of undefined (reading '0')

In our Angular project we needed to upgrade vite and rollup two weeks ago due to vulnerabilities. Since then, vite is not working as expected and throws the following error when the page is reloaded. Local automatic page reloading after making changes is not working as well.

**[vite] Internal server error: Cannot read properties of undefined (reading '0')**
Plugin: vite:asset-import-meta-url
File: XXX/node_modules/vite/dist/client/client.mjs
at TransformContext.transform (file:///XXX/node_modules/vite/dist/node/chunks/dep-Ootdsuvy.js:49777:57)
at Object.transform (file:///XXX/node_modules/vite/dist/node/chunks/dep-Ootdsuvy.js:50963:62)
at loadAndTransform (file:///XXX/node_modules/vite/dist/node/chunks/dep-Ootdsuvy.js:53753:29)
at viteTransformMiddleware (file:///XXX/node_modules/vite/dist/node/chunks/dep-Ootdsuvy.js:63533:32)


In the IDE's console, prior to the error, vite logged that a specific chunk wasn't found. Disabling chunks in the tsconfig.json "sourceMap": false didn't solve the current error though.

The issue lies in 'vite:asset-import-meta-url'

Using the following versions for vite according to the package-lock.json:

"node_modules/@angular-devkit/build-angular":
"version": "17.3.8",
"dependencies": {
vite": "5.1.8",
...
}


"node_modules/vite": {
"version": "5.1.8",
"resolved": XXX,
"integrity": YYY,
"dependencies": {
"esbuild": "^0.19.3",
"postcss": "^8.4.35",
"rollup": "^4.22.4"
},
"bin": {
"vite": "bin/vite.js"
},
"engines": {
"node": "^18.0.0 || >=20.0.0"
},
"funding": {
"url": "https://github.com/vitejs/vite?sponsor=1"
},
"optionalDependencies": {
"fsevents": "~2.3.3"
},
"peerDependencies": {
"@types/node": "^18.0.0 || >=20.0.0",
"less": "*",
"lightningcss": "^1.21.0",
"sass": "*",
"stylus": "*",
"sugarss": "*",
"terser": "^5.4.0"
},
"peerDependenciesMeta": {
"@types/node": {
"optional": true
},
"less": {
"optional": true
},
"lightningcss": {
"optional": true
},
"sass": {
"optional": true
},
"stylus": {
"optional": true
},
"sugarss": {
"optional": true
},
"terser": {
"optional": true
}
}
},


Any idea on what's going on? Couldn't find similar questions in the docs with helpful solutions.

Tried finding where in 'vite:asset-import-meta-url' the issue is, seems to be in the HMRContext class: new Url of '${base$1}__open-in-editor?file=${encodeURIComponent(file)}' generates no body when parsed.

Continue reading...