Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-22xqey?file=src%2FComp.vue

Steps to reproduce

In comp.vue remove the 'asd' prop by commenting out the line.

What is expected?

The component outputs:

Hello from component

'a:b' = '123'

'a:b2' = '456'.

What is actually happening?

Vue transform fails with the following error:

[plugin:vite:vue] Transform failed with 1 error:
/home/projects/vitejs-vite-22xqey/src/Comp.vue:13:7: ERROR: Expected "}" but found ":"

/home/projects/vitejs-vite-22xqey/src/Comp.vue:13:7

Expected "}" but found ":"
11 |    __name: 'Comp',
12 |    props: {
13 |      a:b: { type: Number, required: true },
   |         ^
14 |      "a:b2": { type: Number, required: true }
15 |    },

    at failureErrorWithLog (/home/projects/vitejs-vite-22xqey/node_modules/esbuild/lib/main.js:1626:15)
    at start/< (/home/projects/vitejs-vite-22xqey/node_modules/esbuild/lib/main.js:827:29)
    at sendRequest/responseCallbacks[id] (/home/projects/vitejs-vite-22xqey/node_modules/esbuild/lib/main.js:687:17)
    at handleIncomingPacket (/home/projects/vitejs-vite-22xqey/node_modules/esbuild/lib/main.js:742:17)
    at readFromStdout (/home/projects/vitejs-vite-22xqey/node_modules/esbuild/lib/main.js:663:27)
    at EventEmitter.prototype.emit (https://vitejsvite22xqey-c4l0.w-corp.staticblitz.com/blitz.a19575a2.js:35:143926)
    at addChunk (https://vitejsvite22xqey-c4l0.w-corp.staticblitz.com/blitz.a19575a2.js:35:541674)
    at readableAddChunk (https://vitejsvite22xqey-c4l0.w-corp.staticblitz.com/blitz.a19575a2.js:35:541378)
    at Readable.prototype.push (https://vitejsvite22xqey-c4l0.w-corp.staticblitz.com/blitz.a19575a2.js:35:542062)
    at onStreamRead (https://vitejsvite22xqey-c4l0.w-corp.staticblitz.com/blitz.a19575a2.js:35:1001177)
    at _0x1064fa/< (https://vitejsvite22xqey-c4l0.w-corp.staticblitz.com/blitz.a19575a2.js:37:262368)
    at _0x5b501f (https://vitejsvite22xqey-c4l0.w-corp.staticblitz.com/blitz.a19575a2.js:37:264040)
    at _0x4523b0 (https://vitejsvite22xqey-c4l0.w-corp.staticblitz.com/blitz.a19575a2.js:37:260659)
    at _0x263935/< (https://vitejsvite22xqey-c4l0.w-corp.staticblitz.com/blitz.a19575a2.js:37:263286)
    at _0x263935 (https://vitejsvite22xqey-c4l0.w-corp.staticblitz.com/blitz.a19575a2.js:37:263237

System Info

(This is on StackBlitz)

  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 16.20.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
  npmPackages:
    vue: ^3.3.4 => 3.3.4 

Any additional comments?

We can use the following just fine. But if we add another prop that includes a colon, the component cannot render.

interface MyProps {
  'a:b': number;
}
const props = defineProps<MyProps>();

Adding a property in between two properties that contain a colon is a workaround. Note that the transform seems to alphabetically (?) sort the properties, thus 'in between' actually means alphabetically in between.

We run into this in a real-world use case caused by the following issues (only tangentially related https://github.com/vuejs/core/issues/5220 & https://github.com/vuejs/rfcs/discussions/397). To work around that issue we define the following props:

  "onUpdate:modelValue": ((/* */) => void;
  "onUpdate:record": (/* */) => void;

This was working without issues in Vue 3.2.

Exactly same problem here...

We have the same problem with hyphen in types. You can see the error in minimal example on playground.

const props = defineProps<{
 msg: string;
 'my-prop': string;
}>()