Maximum recursive updates exceeded (simple validation)

[9mm]

I have a custom file upload component which is complicated internally, but the public modelValue prop passed in is a very simple string UUID. When I emit the value back (after doing a whole bunch of image uploading, etc), I would emit something like... this.$emit('update:modelValue', 'dd2b3f4f-2b79-49d9-9db6-01eb5c0a7194')

I'm trying to use useField to simply validate the modelValue and nothing more. I'm currently getting recursive update stack exceeded errors, as I must be using it wrong.

  props: {
    modelValue: {
      type: String,
      default: '',
    },
  }
  setup(props) {
    // create outside data() to make non-reactive which is very slow
    const imageData = {};

    const {
      handleChange,
      setTouched,
    } = useField(props.validationKey, undefined, {
      initialValue: props.modelValue,
    });

    return {
      imageData,
      handleChange,
      setTouched,
    };
  },
...
  doLotsOfImageUploading(media) {
    // do lots of work here, get a UUID, tell Vee-validate that "this is the new value to validate" and emit it back out
    this.setTouched(true);
    this.handleChange(media.uuid);
    this.$emit('update:modelValue', media.uuid);
  }

Do you know what I'm doing wrong here that could cause recursive updates?

[9mm]

I should mention this only seems to be occurring when the file is hot-reloaded on save. I don't notice this error when using the app without editing files, but I imagine it still indicates some kind of problem.

[logaretm]

Hard to tell with this snippet alone, can you please reproduce this in a codesample, codesandbox or a vue cli repo will do?

[9mm]

@logaretm here you go. You know, at first I was thinking it was my fault and I just hadn't noticed this error this entire time, but now that I see the error takes over the entire codesandbox screen (of this old codesandbox from another issue I had) makes me think it was never there before and was recently introduced in some update (maybe not even vee related?). Otherwise I would have definitely noticed while coding on this sandbox (its a full page eslint error sometimes)

Look at this part in BaseInput.vue

  mounted() {
    console.log("uh oh");
  },

Simply edit that console.log text to a different message and you will see an overload in console.

https://codesandbox.io/s/custom-text-input-with-vee-validate-v4-forked-1mxqq?file=/src/components/BaseInput.vue:1680-1706

[logaretm]

I downloaded the sample to a zip file and couldn't reproduce the issue locally

[9mm]

Did that sandbox help at all? I can narrow this down to seemingly the most trivial components and it still occurs 🤔

[9mm]

@logaretm
It should happen on your zip export, you just need to run yarn/npm upgrade first.

I just now ran this exact command and then it occurs yarn outdated; yarn upgrade after restarting and running yarn serve

[logaretm]

I see, this looks like an HMR issue that somehow is triggered by vee-validate. I will take another look later this week as I couldn't figure it out at the moment.

[9mm]

Cool!

[9mm]

Hey just wanted to see if you ever had a chance to look at this. I can't quite tell if it affects production or dev only (i realize HMR is dev only but I'm not sure if it has side-effects with how vue is working)

[logaretm]

I did take a few looks over the past weeks but didn't investigate deeply. This is not a priority for me as I have not encountered this issue in my work's Vue projects, nor any recent new Vue project installations.

What I have found so far is that the HMR for some reason it registers the field over 200 times that involves a lot of updates to the values and meta which would trigger the warning.

Why is that exactly happening? I'm not sure, I suspect the HMR code registering the component is being treated as a reactive effect. If you would like to investigate it and maybe figure a course of action I can take for vee-validate that would be great, but for the time being, I'm not working full-time on this one.

[sschneider-ihre-pvs]

I also get this will all HMR disabled

[sschneider-ihre-pvs]

After making a clone of the values it seemed to work for me.