Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Urgent - you just broke v1.1.2! #165

Closed
DM2489 opened this issue Oct 16, 2020 · 21 comments · Fixed by #166 or #167
Closed

Urgent - you just broke v1.1.2! #165

DM2489 opened this issue Oct 16, 2020 · 21 comments · Fixed by #166 or #167

Comments

@DM2489
Copy link

DM2489 commented Oct 16, 2020

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
Copy link
Author

DM2489 commented Oct 16, 2020

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

@jvbianchi
Copy link

jvbianchi commented Oct 16, 2020

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

@DM2489
Copy link
Author

DM2489 commented Oct 16, 2020

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
Copy link

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
Copy link
Member

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
Copy link

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
Copy link
Member

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
Copy link

lpj145 commented Oct 17, 2020

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

@haoqunjiang
Copy link
Member

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

@lpj145
Copy link

lpj145 commented Oct 17, 2020

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
Copy link

lpj145 commented Oct 17, 2020

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

to solve i need to put:
image

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

@haoqunjiang
Copy link
Member

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

@luobogor
Copy link

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

@haoqunjiang
Copy link
Member

Fixed in 1.2.2

@haoqunjiang
Copy link
Member

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

@leidenglai
Copy link

leidenglai commented Oct 19, 2020

Fixed in 1.2.2

v-model 也被1.2.1影响了
image

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

@haoqunjiang
Copy link
Member

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

@leidenglai
Copy link

leidenglai commented Oct 19, 2020

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

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

@toBeTheLight
Copy link

toBeTheLight commented Oct 20, 2020

@sodatea @leidenglai
Same issue.

@toBeTheLight
Copy link

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

haoqunjiang added a commit that referenced this issue Oct 20, 2020
So that it can get the correct `this` scope.
Partially reverts #87.
Fixes #165 (comment)
haoqunjiang added a commit that referenced this issue Oct 20, 2020
So that it can get the correct `this` scope.
Partially reverts #87.
Fixes #165 (comment)
@haoqunjiang
Copy link
Member

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
9 participants