Urgent - you just broke v1.1.2!

[DM2489]

Hi,

All of my code that use JSX have just started to break, although the specifically target v1.1.2, the new v1.2.1 update has broken them.

h is not defined

Here is an example of one of our package.json file:

"requires": {
        "@babel/core": "7.7.4",
        "@babel/preset-env": "7.7.4",
        "@vue/babel-preset-jsx": "1.1.2",
        "babelify": "10.0.0",
        "browserify": "16.5.0",
        "chokidar": "3.3.0",
        "colors": "^1.4.0",
        "del": "5.1.0",
        "gulp": "4.0.2",
        "gulp-babel": "8.0.0",
        "gulp-concat": "2.6.1",
        "gulp-cssmin": "0.2.0",
        "gulp-filter": "6.0.0",
        "gulp-if": "3.0.0",
        "gulp-newer": "1.4.0",
        "gulp-rename": "1.4.0",
        "gulp-sass": "4.0.2",
        "gulp-tap": "2.0.0",
        "gulp-uglify": "3.0.2",
        "merge": "1.2.1",
        "path": "0.12.7",
        "pump": "3.0.0",
        "through2": "3.0.1"
      }
"babel": {
    "presets": [
      "@babel/preset-env",
      "@vue/babel-preset-jsx"
    ]
  }

Here is relevant package-lock.json file extract, before the v1.2.1 update was launched.

"@vue/babel-helper-vue-jsx-merge-props": {
  "version": "1.0.0",
  "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0.tgz",
  "integrity": "sha512-6tyf5Cqm4m6v7buITuwS+jHzPlIPxbFzEhXR5JGZpbrvOcp1hiQKckd305/3C7C36wFekNTQSxAtgeM0j0yoUw=="
},
"@vue/babel-plugin-transform-vue-jsx": {
  "version": "1.1.2",
  "resolved": "https://registry.npmjs.org/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.1.2.tgz",
  "integrity": "sha512-YfdaoSMvD1nj7+DsrwfTvTnhDXI7bsuh+Y5qWwvQXlD24uLgnsoww3qbiZvWf/EoviZMrvqkqN4CBw0W3BWUTQ==",
  "requires": {
    "@babel/helper-module-imports": "^7.0.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "html-tags": "^2.0.0",
    "lodash.kebabcase": "^4.1.1",
    "svg-tags": "^1.0.0"
  }
},
"@vue/babel-preset-jsx": {
  "version": "1.1.2",
  "resolved": "https://registry.npmjs.org/@vue/babel-preset-jsx/-/babel-preset-jsx-1.1.2.tgz",
  "integrity": "sha512-zDpVnFpeC9YXmvGIDSsKNdL7qCG2rA3gjywLYHPCKDT10erjxF4U+6ay9X6TW5fl4GsDlJp9bVfAVQAAVzxxvQ==",
  "requires": {
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
    "@vue/babel-sugar-functional-vue": "^1.1.2",
    "@vue/babel-sugar-inject-h": "^1.1.2",
    "@vue/babel-sugar-v-model": "^1.1.2",
    "@vue/babel-sugar-v-on": "^1.1.2"
  }
},
"@vue/babel-sugar-functional-vue": {
  "version": "1.1.2",
  "resolved": "https://registry.npmjs.org/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.1.2.tgz",
  "integrity": "sha512-YhmdJQSVEFF5ETJXzrMpj0nkCXEa39TvVxJTuVjzvP2rgKhdMmQzlJuMv/HpadhZaRVMCCF3AEjjJcK5q/cYzQ==",
  "requires": {
    "@babel/plugin-syntax-jsx": "^7.2.0"
  }
},
"@vue/babel-sugar-inject-h": {
  "version": "1.1.2",
  "resolved": "https://registry.npmjs.org/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.1.2.tgz",
  "integrity": "sha512-VRSENdTvD5htpnVp7i7DNuChR5rVMcORdXjvv5HVvpdKHzDZAYiLSD+GhnhxLm3/dMuk8pSzV+k28ECkiN5m8w==",
  "requires": {
    "@babel/plugin-syntax-jsx": "^7.2.0"
  }
},
"@vue/babel-sugar-v-model": {
  "version": "1.1.2",
  "resolved": "https://registry.npmjs.org/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.1.2.tgz",
  "integrity": "sha512-vLXPvNq8vDtt0u9LqFdpGM9W9IWDmCmCyJXuozlq4F4UYVleXJ2Fa+3JsnTZNJcG+pLjjfnEGHci2339Kj5sGg==",
  "requires": {
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
    "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
    "camelcase": "^5.0.0",
    "html-tags": "^2.0.0",
    "svg-tags": "^1.0.0"
  }
},
"@vue/babel-sugar-v-on": {
  "version": "1.1.2",
  "resolved": "https://registry.npmjs.org/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.1.2.tgz",
  "integrity": "sha512-T8ZCwC8Jp2uRtcZ88YwZtZXe7eQrJcfRq0uTFy6ShbwYJyz5qWskRFoVsdTi9o0WEhmQXxhQUewodOSCUPVmsQ==",
  "requires": {
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
    "camelcase": "^5.0.0"
  }
},

Here is an example package-lock.json file after v1.2.1 was launched. We are still referencing v1.1.2 in our package.json files.

"@vue/babel-helper-vue-jsx-merge-props": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz",
      "integrity": "sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA=="
    },
    "@vue/babel-plugin-transform-vue-jsx": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.2.1.tgz",
      "integrity": "sha512-HJuqwACYehQwh1fNT8f4kyzqlNMpBuUK4rSiSES5D4QsYncv5fxFsLyrxFPG2ksO7t5WP+Vgix6tt6yKClwPzA==",
      "requires": {
        "@babel/helper-module-imports": "^7.0.0",
        "@babel/plugin-syntax-jsx": "^7.2.0",
        "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
        "html-tags": "^2.0.0",
        "lodash.kebabcase": "^4.1.1",
        "svg-tags": "^1.0.0"
      }
    },
    "@vue/babel-preset-jsx": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/@vue/babel-preset-jsx/-/babel-preset-jsx-1.1.2.tgz",
      "integrity": "sha512-zDpVnFpeC9YXmvGIDSsKNdL7qCG2rA3gjywLYHPCKDT10erjxF4U+6ay9X6TW5fl4GsDlJp9bVfAVQAAVzxxvQ==",
      "requires": {
        "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
        "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
        "@vue/babel-sugar-functional-vue": "^1.1.2",
        "@vue/babel-sugar-inject-h": "^1.1.2",
        "@vue/babel-sugar-v-model": "^1.1.2",
        "@vue/babel-sugar-v-on": "^1.1.2"
      }
    },
    "@vue/babel-sugar-functional-vue": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@vue/babel-sugar-functional-vue/-/babel-sugar-functional-vue-1.2.1.tgz",
      "integrity": "sha512-SUUrD936wKcgWPauuwrZ9OIitH0Rhc3BzDrdq2LE7JfPSGKR1OXyihnsia++lPufiY7A/cEkbRgNyMFIYm7L9w==",
      "requires": {
        "@babel/plugin-syntax-jsx": "^7.2.0"
      }
    },
    "@vue/babel-sugar-inject-h": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@vue/babel-sugar-inject-h/-/babel-sugar-inject-h-1.2.1.tgz",
      "integrity": "sha512-JV8QicpnLaKurpm5K5pBlK8jDTdIpmGW7e1R88DRveLAFlW5un6cl+JM2100/7+t0xI08F3GQ1NWIb8d1YYBzA==",
      "requires": {
        "@babel/plugin-syntax-jsx": "^7.2.0"
      }
    },
    "@vue/babel-sugar-v-model": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@vue/babel-sugar-v-model/-/babel-sugar-v-model-1.2.1.tgz",
      "integrity": "sha512-6kTx+hZVJ6dclAwWXSvfnv4XlkzCzKthQ/xlnypFW8+9uhy3E5ehNiAaHfr83R8+7d3DlvbZrQ9xgbZc1quuJg==",
      "requires": {
        "@babel/plugin-syntax-jsx": "^7.2.0",
        "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
        "@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
        "camelcase": "^5.0.0",
        "html-tags": "^2.0.0",
        "svg-tags": "^1.0.0"
      }
    },
    "@vue/babel-sugar-v-on": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@vue/babel-sugar-v-on/-/babel-sugar-v-on-1.2.1.tgz",
      "integrity": "sha512-rQhM52dC/vWxgMmi8ZY5MwudOb9sWrqN4gffbPDV44TNqyd2j1+PmW2qLR0QfcDsAccR5U+gcguHc3qhLSrXNw==",
      "requires": {
        "@babel/plugin-syntax-jsx": "^7.2.0",
        "@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
        "camelcase": "^5.0.0"
      }
    },

It would be nice to not break the old version of the package!

[DM2489]

Updating to v1.2.1 doesn't fix the issue - h is still not being auto injected.

[jvbianchi]

Have you changed you babel.config.js like: https://github.com/vuejs/jsx/releases/tag/v1.2.1 ?

[DM2489]

According to https://www.npmjs.com/package/@vue/babel-preset-jsx, inject-h should be enabled by default.

I enabled compositionAPI as well just in case, but no changes.

[Tronix117]

Exactly the same here, we have some pending deployments that fails the CI, because of that, some modules using "^1.1.2" get updated to v1.2.1, and breaks everything !

If this release brings composition-api, I guess it's a breaking change and should be labeled as v2.0.0...

[LinusBorg]

Hey!

We're sorry this broke your projects. This is totally unintended and we will fix it asap.

I unfortunately can't do anything about this myself as I don't work on this repo, but I hope to give you some workarounds for the moment:

Yarn

Use the resolutions field in package.json:

{
  resolutions: {
    "**/@vue/babel-helper-vue-jsx-merge-props": "1.1.2",
    "**/@vue/babel-plugin-transform-vue-jsx": "1.1.2",
    "**/@vue/babel-sugar-composition-api-inject-h": "1.1.2",
    "**/@vue/babel-sugar-composition-api-render-instance": "1.1.2",
    "**/@vue/babel-sugar-functional-vue": "1.1.2",
    "**/@vue/babel-sugar-inject-h": "1.1.2",
    "**/@vue/babel-sugar-v-model": "1.1.2",
    "**/@vue/babel-sugar-v-on": "1.1.2"
  }
}

Run yarn again and this should force yarn to resolve the versions of these sub-dependencies to 1.1.2.

NPM

Now, npm doesn't provide a mechanism like this out of the box. there's a package called npm-force-resolutions that does a similar thing, inspired by the yarn feature.

I haven't used it myself yet, but have seen it mentioned multiple times for these kinds of scenarios, so you might want to give it a try if time is of great concern.

{
  "scripts": {
    "preinstall": "npx npm-force-resolutions"
  },
  "resolutions": {
	"@vue/babel-helper-vue-jsx-merge-props": "1.1.2",
    "@vue/babel-plugin-transform-vue-jsx": "1.1.2",
    "@vue/babel-sugar-composition-api-inject-h": "1.1.2",
    "@vue/babel-sugar-composition-api-render-instance": "1.1.2",
    "@vue/babel-sugar-functional-vue": "1.1.2",
    "@vue/babel-sugar-inject-h": "1.1.2",
    "@vue/babel-sugar-v-model": "1.1.2",
    "@vue/babel-sugar-v-on": "1.1.2"
  }
}

[Tronix117]

Thanks for your feedback @LinusBorg, unforunately, it's not working for me on our pipeline. I did an npm ci just before my npm i, it's a temporary fix, but does the job for this weekend CI, until it's resolved

[haoqunjiang]

I just re-checked the code diff and I don't see how it could affect old use cases unless you intentionally enable the compositionAPI option.

So, is there any reproduction repo that I can refer to?

[lpj145]

Same thing here, Broke all jsx components, not have h

[haoqunjiang]

@lpj145 do you have any code sample that can reproduce the error?

[lpj145]

Just

import { VLoading, VBox } from '~/vue_shareds'

export default () => <div class="row min-vh-100 align-items-center justify-content-center">
 <VBox
   shadow
   rounded
   color="white"
   class="text-center px-4 py-4"
 >
   <VLoading>
     Carregando Sintomas...
   </VLoading>
 </VBox>
</div>

// Or something like that
export default {
 render() {
    return (<div> Hello Guys</div>)
 }
}

[lpj145]

@sodatea simple example of course, but, give me this error:

to solve i need to put:

I forgotten to put, i tried: @vue/app preset, babel-preset and jsx-preset like doc.

[haoqunjiang]

Got it. Not related to Composition API support, but due to this one: #87

[luobogor]

I have solved this problem, add these to package.json dependencies , delete your node_modules and run npm install again

"dependencies": {
    "@vue/babel-preset-jsx": "1.1.2",
    "@vue/babel-helper-vue-jsx-merge-props": "1.0.0",
    "@vue/babel-plugin-transform-vue-jsx": "1.1.2",
    "@vue/babel-sugar-functional-vue": "1.1.2",
    "@vue/babel-sugar-inject-h": "1.1.2",
    "@vue/babel-sugar-v-model": "1.1.2",
    "@vue/babel-sugar-v-on": "1.1.2",
    // ....
}