Invalid assignment target in v-model data binding when building for production

[DamianGlowala]

Vue version

3.3.2

Link to minimal reproduction

https://github.com/DamianGlowala/nuxt-invalid-asignment-target-repro

Steps to reproduce

1. npm install
2. npm run build

What is expected?

Project successfully building for production.

What is actually happening?

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i5-12600K
    Memory: 1.14 GB / 15.80 GB
  Binaries:
    Node: 20.1.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.6.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.1635.0), Chromium (112.0.1722.46)
    Internet Explorer: 11.0.22621.1

Any additional comments?

It works fine in development.

[elonehoo]

It seems that the

v-model:is-open="
   isWatchYouTubeEmployerTalkVideoModalOpen
"

should be changed to

v-model:is-open="isWatchYouTubeEmployerTalkVideoModalOpen"

[DamianGlowala]

This is how Prettier formats my code and there should be no issue with that. Notice how lengthy the variable name is (hence splitting into a separate line). The latter example you included is indeed what I need to do manually to build the application.

This looks like an edge case that only fails in a specific situation. Modyfing the code slightly (e.g. removing some elements) will make this error disappear, but I still see no reason for it to fail in the included reproduction.

[orimajp]

I had the same problem.
This problem seems to occur when the character constant used to specify the variable name contains spaces.

[shumiarrow]

I had the same problem when building nuxt in production.
This error appears only with ref-value variables.
When using reactive variable there is no error.

[PieronCZ]

I have the same problem as well.
I don't concider changing code format to one line as a fix as this would be very unstable solution.
Who is responsible for this issue, is it esbuild or vite directly?

[Usman024]

It seems that the

v-model:is-open="
   isWatchYouTubeEmployerTalkVideoModalOpen
"

should be changed to

v-model:is-open="isWatchYouTubeEmployerTalkVideoModalOpen"

I was getting error while
npm run build
which were Nuxt Build Error: [vite:define] Transform failed with 5 errors:
ERROR: Invalid assignment target

fixing v-model structure
solved my issue

[NathanAP]

Really hope this gets fixed because I lost some time trying to find out what was that 😥

[Anton-Plagemann]

For me it was a ! triggering this error:

<SubscriptionAdmins v-model="subscription!" />

Removing it solved the issue:

<div v-if="subscription">
  <SubscriptionAdmins v-model="subscription" />
</div>