Subscribe on changes!

Production handles warnings differently from development

avatar
May 5th 2022

Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

have a template with a list greater than 1, with length spelled incorrectly, that looks like:

<strong>{{tags[0]}}</strong>
<template v-if="tags.length > 1">
    <template v-for="index in (tags.legnth - 1)">
        , <strong>{{tags[index]}}</strong>
    </template>
</template>

What is expected?

Consistent warning/error handling between environments

What is actually happening?

Development shows no template error, test shows a warning, production hard errors.

Even the playground shows a warning on load, but still renders, would be nice for prod and development to do the same.


We recently had a bug that prevented the page from loading in production.

<template v-for="index in (tags.legnth - 1)">

Obvious failure since length was spelled wrong. What was weird though was that no error or warning showed up in development and the page loads fine. In test, I get

[Vue warn]: The v-for range expect an integer value but got NaN.

but the page still loads fine. And in production, a hard error, page doesn't load. Some consistency would be nice, or at least a way to change the behaviour.

avatar
May 6th 2022

This is the way all Vue warnings have always worked:

  • Warnings are shown during dev, and must be fixed before shipping to prod.
  • An unhandled warning during dev means it could lead to a hard error during prod.
avatar
May 6th 2022

For this specific case the error behavior is indeed inconsistent. It should also error in dev.

avatar
May 6th 2022

but I'm not getting a warning at all in dev. This bug was hard to figure out for us especially because I could only debug in prod without vue dev tools (disabled in prod). There was no warning in dev at all nvm, I see that this case is being fixed in the above commit. thanks!