search

ditdot-dev / vue-flow-form

Create conversational conditional-logic forms with Vue.js.
https://www.ditdot.hr/en/vue-flow-form
MIT License
785 stars 175 forks source link

Issue with Vite 3.0.9 defaults #268

Closed mikob closed 2 years ago

mikob commented 2 years ago

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>
mikob commented 2 years ago

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>