Build error when having multiple attritbutes with colon in name in defineProps

danielbender1989

Sep 20th 2023

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/quasarframework-webpack-lgobhe?file=src%2Fcomponents%2FDTable.vue

Steps to reproduce

Go to reproduction Link
Error comes during build

What is expected?

When using an interface with multiple colons as attributes, it compiles without problems and can be used in the component.

Example:

<template>
  <div>Hello</div>
</template>

<script setup lang="ts">
defineProps<{
  'onUpdate:Y'?: (y: number) => void;
  'onUpdate:X'?: (x: number) => void;
}>();
</script>

What is actually happening?

During build an error is thrown. If there is only one prop with a colon in the attribute it doesn't throw.

Error in error handler: Error: offset is longer than source length! offset 206 > length 184 at numberToPos (/home/projects/quasarframework-webpack-lgobhe/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:18524:15) at formatError (/home/projects/quasarframework-webpack-lgobhe/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39102:35) at error (/home/projects/quasarframework-webpack-lgobhe/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39076:19) at transform (/home/projects/quasarframework-webpack-lgobhe/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39320:25)

Unexpected token, expected "," (7:14) Error in error handler: Error: offset is longer than source length! offset 206 > length 184 at numberToPos (/home/projects/quasarframework-webpack-lgobhe/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:18524:15) at formatError (/home/projects/quasarframework-webpack-lgobhe/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39102:35) at error (/home/projects/quasarframework-webpack-lgobhe/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39076:19) at transform (/home/projects/quasarframework-webpack-lgobhe/node_modules/vite/dist/node/chunks/dep-6e2fe41e.js:39320:25)

11:55:03 [vite] Internal server error: Unexpected token, expected "," (7:14) Plugin: vite:vue File: /home/projects/quasarframework-webpack-lgobhe/src/components/DTable.vue

11:55:09 [vite] Internal server error: Unexpected token, expected "," (7:14) Plugin: vite:vue File: /home/projects/quasarframework-webpack-lgobhe/src/components/DTable.vue

11:55:49 [vite] Internal server error: Unexpected token, expected "," (7:14) Plugin: vite:vue File: /home/projects/quasarframework-webpack-lgobhe/src/components/DTable.vue

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz   
    Memory: 12.65 GB / 31.88 GB
  Binaries:
    Node: 18.17.1 - C:\Program Files\nodejs\node.EXE
    npm: 9.3.1 - ~\AppData\Roaming\npm\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.31)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

No response

danielbender1989

Sep 20th 2023

Duplicate of https://github.com/vuejs/core/issues/8910

GitHub Track