Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

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

Copy link
Copy link
Open
@agm1984

Description

@agm1984
Issue body actions

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions

      Morty Proxy This is a proxified and sanitized view of the page, visit original site.