Issue with Vite 3.0.9 defaults
mikob opened this issue · comments
For posterity I'm posting this issue for others that have it. The solution is in the next comment.
Default config after creating a new vue 3 project via npm init vue@latest
10:40:52 AM [vite] Internal server error: Cannot read properties of undefined (reading 'length')
517 at memoizedBinarySearch (file:///home/mikob/workspace/1000waystolearnspanish/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4d
518 a11a5e.js:9959:25)
519 at traceSegmentInternal (file:///home/mikob/workspace/1000waystolearnspanish/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4d
520 a11a5e.js:10062:17)
521 at originalPositionFor$1 (file:///home/mikob/workspace/1000waystolearnspanish/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4
522 da11a5e.js:10049:25)
523 at formatError (file:///home/mikob/workspace/1000waystolearnspanish/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a5e.js
524 :40924:54)
525 at TransformContext.error (file:///home/mikob/workspace/1000waystolearnspanish/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-
526 4da11a5e.js:40858:19)
527 at Object.transform (file:///home/mikob/workspace/1000waystolearnspanish/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-4da11a
528 5e.js:41114:25)
529 at async loadAndTransform (file:///home/mikob/workspace/1000waystolearnspanish/node_modules/.pnpm/vite@3.1.8/node_modules/vite/dist/node/chunks/dep-
530 4da11a5e.js:37373:29)
This is due to the css imports:
<style>
/* Import Vue Flow Form base CSS */
@import "~@ditdot-dev/vue-flow-form/dist/vue-flow-form.css";
/* Import one of the Vue Flow Form CSS themes (optional) */
@import "~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-minimal.css";
/* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-green.css'; */
/* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-purple.css'; */
</style>
vite doesn't know about the "~" alias by default. Solution is to chance css imports to:
<style>
/* Import Vue Flow Form base CSS */
@import "@ditdot-dev/vue-flow-form/dist/vue-flow-form.css";
/* Import one of the Vue Flow Form CSS themes (optional) */
@import "@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-minimal.css";
/* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-green.css'; */
/* @import '~@ditdot-dev/vue-flow-form/dist/vue-flow-form.theme-purple.css'; */
</style>