Error with Vue 3 and @vue/babel-plugin-jsx

[mayoujin]

Hi authors and contributors!

There is a runtime error occurs when using reshadow with Vuejs 3 and its new @vue/babel-plugin-jsx (replace Vuejs 2 @vue/babel-plugin-transform-vue-jsx) babel transform plugin of vue-3-like jsx.

Vuejs 3 component error code:

// Test.jsx
import styled from 'reshadow';

export default () => {
  return () => styled()(
    <div>Test</div>
  )
}

using styled()(...) wrapper causes runtime error and prints out to dev tools console:

Test.jsx?5f72:15 Uncaught (in promise) ReferenceError: h is not defined
...

When styled()(...) wrapper is not using everything is works without errors.

Probably error related with different babel jsx transform plugins used by Vue 3 app and reshadow.

• Vue 3 uses @vue/babel-plugin-jsx
• reshadow uses Vuejs 2 compatible @vue/babel-plugin-transform-vue-jsx(see code)

Could you please fix such error for Vuejs 3 compatibility.

Environment:

babel.config.js

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'reshadow/babel',
      {
        postcss: true,
        target: 'vue',
      },
    ],
  ],
}

package.json

{
  "name": "vue3-ts-gql-spa",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve ./src/main.js",
    "build": "vue-cli-service build ./src/main.js",
    "lint": "vue-cli-service lint ./src/main.js",
  },
  "main": "./src/main.js",
  "dependencies": {
    "core-js": "^3.6.5",
    "reshadow": "0.0.1-alpha.78",
    "vue": "^3.0.0-rc.13",
    "webpack": "^4.44.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.5.0",
    "@typescript-eslint/parser": "^4.5.0",
    "@vue/babel-plugin-jsx": "^1.0.0-rc.3",
    "@vue/cli-plugin-babel": "4.5.8",
    "@vue/cli-plugin-eslint": "4.5.8",
    "@vue/cli-plugin-router": "^4.5.8",
    "@vue/cli-plugin-typescript": "~4.5.8",
    "@vue/cli-service": "4.5.8",
    "@vue/compiler-sfc": "^3.0.2",
    "autoprefixer": "^10.0.1",
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.1",
    "eslint": "^7.12.0",
    "eslint-plugin-vue": "^7.1.0",
    "postcss": "^8.1.4",
    "postcss-easy-import": "^3.0.0",
    "postcss-loader": "^4.0.4",
    "postcss-nested": "^5.0.1",
    "postcss-simple-vars": "^6.0.1",
    "prettier": "^2.1.2",
    "typescript": "^4.0.3"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

~bug

[lttb]

Hi @mayoujin,

Thank you very much for the issue.

I'll try to check it this weekend

[mayoujin]

Hi.
If there is progress on the subject?