Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue transform fails when using multiple quoted property names in a row that contain a colon in a component's property definition #8635

Closed
WilcoKruijer opened this issue Jun 24, 2023 · 2 comments · Fixed by #8654

Comments

@WilcoKruijer
Copy link

WilcoKruijer commented Jun 24, 2023

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 #5220 & vuejs/rfcs#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.

@ahas
Copy link

ahas commented Sep 5, 2023

Exactly same problem here...

@gsmetal
Copy link

gsmetal commented Sep 29, 2023

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;
}>()

@github-actions github-actions bot locked and limited conversation to collaborators Nov 25, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants