h auto-injection doesn't work

[4refael]

Hi

So I just installed vue-jsx for the first time, and I'm trying to run the provided example code that demonstrates h auto-injection, just copy pasted it to my app.js file

Vue.component('jsx-example', {
  render () { // h will be injected
    return <div id="foo">bar</div>
  }
})

The above doesn't compile and produces an error:

Module build failed: TypeError: C:/laragon/www/vue-jsx/src/app.js: Duplicate declaration "h" (This is an error on an internal node. Probably an internal error)
    at File.buildCodeFrameError (C:\laragon\www\vue-jsx\node_modules\babel-core\lib\transformation\file\index.js:427:15)
    at Scope.checkBlockScopedCollisions (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\scope\index.js:398:27)
    at Scope.registerBinding (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\scope\index.js:592:16)
    at Scope.registerDeclaration (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\scope\index.js:496:14)
    at Object.BlockScoped (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\scope\index.js:244:28)
    at Object.newFn (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\visitors.js:318:17)
    at NodePath._call (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\path\context.js:76:18)
    at NodePath.call (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\path\context.js:44:14)
    at NodePath.visit (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\path\context.js:105:12)
    at TraversalContext.visitQueue (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitMultiple (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\context.js:103:17)
    at TraversalContext.visit (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\context.js:190:19)
    at Function.traverse.node (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\index.js:114:17)
    at NodePath.visit (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\path\context.js:115:19)
    at TraversalContext.visitQueue (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\context.js:150:16)
    at TraversalContext.visitSingle (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\context.js:108:19)
    at TraversalContext.visit (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\context.js:192:19)
    at Function.traverse.node (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\index.js:114:17)
    at traverse (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\index.js:79:12)
    at NodePath.traverse (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\path\index.js:144:25)
    at Scope._crawl (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\scope\index.js:828:10)
    at Scope.crawl (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\scope\index.js:749:10)
    at Scope.init (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\scope\index.js:744:32)
    at NodePath.setScope (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\path\context.js:151:30)
    at NodePath.setContext (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\path\context.js:166:8)
    at NodePath._getKey (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\path\family.js:166:8)
    at NodePath.get (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\path\family.js:138:17)
    at PluginPass.ObjectProperty (C:\laragon\www\vue-jsx\node_modules\babel-plugin-transform-es2015-function-name\lib\index.js:18:26)
    at newFn (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\visitors.js:276:21)
    at NodePath._call (C:\laragon\www\vue-jsx\node_modules\babel-traverse\lib\path\context.js:76:18)

Should note that it does work when I add h as an argument (render (h) {...}). So guess it's a problem with the auto injection? Unless I'm doing something wrong here..

[DM2489]

Confirm - I've just added h manually to one of my render functions that made something work.

[pera]

I believe this issue is a duplicate of this regression from last year: https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/65

[pera]

@rellect does your babel.config.js includes Vue's babel preset ("presets": ["vue-app"]) and the JSX plugin (plugins: ["transform-vue-jsx"]) ? that would explain your issue since @vue/babel-preset-app already has the JSX plugin, so your project would try to inject h two times into each render function.

[4refael]

@pera Not using the vue-app preset, but just to test I tried to remove transform-vue-jsx from the plugins and surprisingly it compiles with no errors. Not sure what's going on really..

[homerious]

I have the same question when I run my unit test while I run dev and build was normal. Thank to @rellect and @pera ' s advice. I checked my .babelrc and found there is a 'transform-vue-jsx' in the plugin option and another 'transform-vue-jsx' in env option => test => plugin. So I delete the 'transform-vue-jsx' declear in the env. And it works. it seems to two plugins will each declare the 'h' when auto inject. Hope this would help somebody in the same situation like me.

[Zhuzhenghao]

transform-vue-jsx'

I solve this problem with removing 'transform-vue-jsx' declear in the babel.config.js. But I can't figure it out

[rkingon]

To confirm, I was hitting this issue too (vue cli 3).

I removed "@vue/babel-preset-jsx" and left just "@vue/app" in my babel config & now all appears to work as expected.

I am assuming @vue/app now supports JSX and the docs have yet to be updated.

[muzi131313]

yeah, @vue/app now supports JSX, removed transform-vue-jsx, my project works okay too