Urgent - you just broke v1.1.2!

Question

Urgent - you just broke v1.1.2!

DM2489 opened this issue 5 years ago · 21 comments

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!

Answer 1 · 2020-10-16T15:17:08.000Z

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

Answer 2 · 2020-10-16T15:18:50.000Z

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

Answer 3 · 2020-10-16T15:22:24.000Z

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.

Answer 4 · 2020-10-16T18:11:57.000Z

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...

Answer 5 · 2020-10-16T18:34:15.000Z

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"
  }
}

Answer 6 · 2020-10-16T19:31:20.000Z

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

Answer 7 · 2020-10-17T00:26:37.000Z

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?

Answer 8 · 2020-10-17T01:30:18.000Z

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

Answer 9 · 2020-10-17T02:19:20.000Z

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

Answer 10 · 2020-10-17T02:24:24.000Z

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>)
 }
}

Answer 11 · 2020-10-17T02:26:14.000Z

@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.

Answer 12 · 2020-10-17T02:59:55.000Z

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

Answer 13 · 2020-10-17T07:51:08.000Z

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",
    // ....
}

Answer 14 · 2020-10-17T10:42:50.000Z

Fixed in 1.2.2

Answer 15 · 2020-10-17T10:45:30.000Z

I'm really sorry for the inconvenience. I didn't realize that the PR has only taken into effect in the new version.

Answer 16 · 2020-10-19T07:13:01.000Z

Fixed in 1.2.2

v-model 也被1.2.1影响了

设置package.json：
"resolutions": { "**/@vue/babel-sugar-v-model": "1.1.2" },
这样就好了，所以是否 @vue/babel-sugar-v-model 也需要升级解决下

Answer 17 · 2020-10-19T07:21:33.000Z

@leidenglai 有复现的代码吗？我当时写了个 test case 发现没问题，就先没改了。

Answer 18 · 2020-10-19T11:53:53.000Z

@leidenglai 有复现的代码吗？我当时写了个 test case 发现没问题，就先没改了。

这是转换后的代码，第三个箭头处调用的this指向有问题，不应该是当前作用域

Answer 19 · 2020-10-20T03:12:28.000Z

@sodatea @leidenglai
Same issue.

Answer 20 · 2020-10-20T05:37:18.000Z

  render() {
    return (
      <AComponent vModel={this.visible}>
        <div class="resume-filter__wrap">
          {
              ([1,2,3]).map(item => {
              return (
                <AComponent vModel={this.other}>{{item}}</AComponent>
              )
            })
          }
        </div>
      </AComponent>
    )
  }

It will be compiled to this, when vModel is not in the direct function.

  render: function render() {
    var _this = this;

    var h = arguments[0];
    return h(_AComponent__WEBPACK_IMPORTED_MODULE_1__["default"], {
      "model": {
        value: _this.visible,
        callback: function callback($$v) {
          _this.visible = $$v;
        }
      }
    }, [h("div", {
      "class": "resume-filter__wrap"
    }, [[1, 2, 3].map(function (item) {
      var _this2 = this;

      return h(_AComponent__WEBPACK_IMPORTED_MODULE_1__["default"], {
        "model": {
          value: _this.other,
          callback: function callback($$v) {
            _this2.$set(_this, "other", $$v);
          }
        }
      }, [{
        item: item
      }]);
    })])]);
  }

Answer 21 · 2020-10-20T08:50:38.000Z

@leidenglai @toBeTheLight thanks for the reproduction! Fixed in v1.2.3