search

vuejs / babel-plugin-transform-vue-jsx

babel plugin for vue 2.0 jsx
1.85k stars 132 forks source link

`h` is not auto-injected with Laravel-Mix and Vue using @vue/babel-plugin-transform-vue-jsx v1.0.0-beta.3 #178

Open agm1984 opened 5 years ago

agm1984 commented 5 years ago

I am using Laravel and Vue, and to make JSX work, I use the following packages:

npm install @babel/plugin-syntax-jsx  @vue/babel-plugin-transform-vue-jsx  @vue/babel-helper-vue-jsx-merge-props --save-dev

Then I use this .babelrc in my project root:

{
    "plugins": ["@babel/plugin-syntax-dynamic-import", "@vue/babel-plugin-transform-vue-jsx"]
}

The dynamic-import one is not related to this, and Laravel Mix has its own .babelrc file that mine is merged with (automatically).

The problem I am facing is that the docs for this plugin say:

Starting with version 3.4.0 we automatically inject const h = this.$createElement in any method and getter (not functions or arrow functions) declared in ES2015 syntax that has JSX so you can drop the (h) parameter.

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

But this is not the behaviour I see: image

image

This is a problem because h is colliding with ES Lint's no-unused-vars rule: image

I don't know what to do about that because I can't disable no-unused-vars across the entire project, and I don't want to add // eslint-disable-line no-unused-vars in every functional component.

Thanks for your time,

Here are my versions:

"devDependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-syntax-jsx": "^7.2.0",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0-beta.3",
    "@vue/babel-plugin-transform-vue-jsx": "^1.0.0-beta.3",
    "babel-eslint": "^10.0.1",
    "browser-sync": "^2.26.3",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^5.2.0",
    "eslint": "^5.8.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-vue": "^4.7.1",
    "laravel-mix": "^3.0.0",
    "laravel-mix-bundle-analyzer": "^1.0.2",
    "laravel-mix-purgecss": "^4.1.0",
    "lodash": "^4.17.11",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.15.2",
    "sass-loader": "^7.1.0",
    "stylelint-config-recommended": "^2.1.0",
    "tailwindcss": "^1.0.0-beta.4",
    "vue": "^2.5.21",
    "vue-template-compiler": "^2.5.21"
},

I notice the docs say v3.4.0, but I am using this plugin as v1.0.0-beta.3 which is the one that is installed via npm install @vue/babel-plugin-transform-vue-jsx. I don't know if that will be related, but it is an observation.

lovefreeprogramming commented 5 years ago

try to use vue cli will be easy,plugins and configs will be included by @vue/babel-preset-app

module.exports = { presets: [ require("@vue/babel-preset-app") // '@vue/app', ], ],

}