babel-plugin-transform-vue-jsx
babel-plugin-transform-vue-jsx copied to clipboard
`h` is not auto-injected with Laravel-Mix and Vue using @vue/babel-plugin-transform-vue-jsx v1.0.0-beta.3
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:
This is a problem because h
is colliding with ES Lint's no-unused-vars
rule:
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.
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', ], ],
}