Subscribe on changes!

Weird bugs with `export default` after updating to vite-plugin-vue 4.2.0+

avatar
Aug 25th 2023

Vue version

3.3.4

Link to minimal reproduction

Impossible to reproduce

Steps to reproduce

Unfortunately the bug is so random, I haven't managed to narrow the issue, but I tried different cases, which will hopefully help with identifying the issue.

Error:

C:/[...].vue:134:0: ERROR: Unexpected "export"
  Plugin: vite:vue
  File: C:/[...].vue:134:0

  Unexpected "export"
  131|
  132|  let comp: Composer;
  133|
     |   ^
  134|  export default defineComponent({
     |  ^
  135|

And here's a chunk of code.

let comp: Composer;

export default defineComponent({

When I modify that chunk like this:

let comp: Composer;

export let aaaaaaaaaaaaa = 5;

export default defineComponent({

the error changes:

Expected ";" but found "_sfc_main"
  133|  //#endregion
  134|
  135|  let compconst _sfc_main = export let aaaaaaaaaaaaa = 5;
     |                ^
  136|
  137|  export default defineComponent({

and it looks like whitespaces matter???

let comp: Composer;



export let aaaaaaaaaaaaa = 5;

export default defineComponent({

produces

Expected ";" but found "_sfc_main"
  133|  //#endregion
  134|
  135|  let comp: Coconst _sfc_main = export let aaaaaaaaaaaaa = 5;
     |                    ^
  136|
  137|  export default defineComponent({

What is expected?

No error

What is actually happening?

When I updated the plugin, my build broke. Unfortunately I didn't manage to narrow the code to minimal reproduction as this bug seems absolutely random but it's clear something is wrong with SFC processing. I have two relatively similar components with export default defineComponent(), but only one of them produces this error and only in versions starting from 4.2 as it works perfectly with previous plugin versions.

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (8) x64 Intel(R) Core(TM) i5-8265U CPU @ 1.60GHz
    Memory: 1.16 GB / 7.82 GB
  Binaries:
    Node: 20.5.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.8.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.2 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome: 116.0.5845.111
    Edge: Spartan (44.22621.1992.0), Chromium (116.0.1938.54)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    vue: ^3.3.4 => 3.3.4

Any additional comments?

No response

avatar
Aug 28th 2023

Sorry, can't help with mere error logs.

avatar
Aug 28th 2023

@sodatea after dedicating more time, I've managed to find the problem! Turns out it was caused by using reactivity transform macros!

Here's min repro: https://stackblitz.com/edit/vitejs-vite-gpxdap?file=src%2Fcomponents%2FHelloWorld.vue

I know it's deprecated but warning says it will be removed in 3.4, but currently it's 3.3, but it's already broken. Switching to vue-macros package fixes the issue.

avatar
Sep 1st 2023

Reactivity Transform has been deprecated and we moved it to Vue Macros. Please try @vue-macros/reactivity-transform. See docs

See also https://github.com/vuejs/rfcs/discussions/369#discussioncomment-5059028