search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
46.67k stars 8.19k forks source link

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

Open DamianGlowala opened 1 year ago

DamianGlowala commented 1 year ago

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?

image

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 commented 1 year ago

It seems that the

v-model:is-open="
   isWatchYouTubeEmployerTalkVideoModalOpen
"

should be changed to

v-model:is-open="isWatchYouTubeEmployerTalkVideoModalOpen"
DamianGlowala commented 1 year ago

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 commented 10 months ago

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

shumiarrow commented 9 months ago

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 commented 7 months ago

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 commented 3 months ago

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 commented 1 month ago

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