Error calling React from Vue ("h is not a function")

[tmepple]

I'm having issues calling a React component from a freshly generated Vue project and must be doing something wrong.

So, starting with vue --version at 2.9.3 (the latest released version) and accepting the defaults in the vue-cli script.

vue init webpack myapp
cd myapp
yarn add vuera react react-dom

Now, I modified the generated /src/main.js entrypoint to import and use the VuePlugin from vuera:

import Vue from 'vue'
import App from './App'
import { VuePlugin } from 'vuera'

Vue.config.productionTip = false

Vue.use(VuePlugin)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

Modified the generated App.vue to import and attempt to use the React component:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
    <react-component message="Hello"></react-component>
  </div>
</template>

<script>
/* eslint-disable */
import HelloWorld from "./components/HelloWorld";
import ReactComponent from "./components/ReactComponent";

export default {
  name: "App",
  components: {
    HelloWorld,
    "react-component": ReactComponent
  }
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Finally added the simple React component /components/ReactComponent.js:

import React from 'react'

export default class ReactComponent extends React.Component {
  render() {
    return (
      <div>
        <p>This was rendered with React!</p>
        <p>{this.props.message}</p>
      </div>
    )
  }
}

Webpack compiles everything fine, but when requesting http://localhost:8080 my React component is not rendered under the "Hello World" Vue component. Instead I get 4 errors in the console starting with "Uncaught TypeError: h is not a function".

I also tried using the ReactWrapper but had the same result.

I'm at the latest vuera 0.2.1, vue 2.5.13, react & react-dom 16.2.0, webpack 3.11.0.

This library looks to be awesome once it's working, thanks for any help!

[tmepple]

Ok, I figured it out and now it works.

In .babelrc in a default Vue project the first plugin specified is transform-vue-jsx which was converting my jsx into an h function call suitable for Vue.

The fix is to replace that with transform-react-jsx (this and the vue plugin are mutually exclusive) and yarn add --dev babel-plugin-transform-react-jsx. Now it works perfectly. Thanks again for the great library.

[Enigma10]

@tmepple @akxcv Hi Guys, Can help me with this? I am not able to fix this issue with CLI 3 which is having babel.config.js instead of .babelrc.

[elevatebart]

Hey @Enigma10 have you tryed using overrides ? they worked like a charm for me.
Something like this

module.exports = api => ({
    presets: ["@babel/env"],
    overrides: [
        {
            test: ["./src"],
            presets: [["@vue/app"]]
        }
    ]
});

[mpan-wework]

https://github.com/mpan-wework/vuera-test/blob/afa01e5f25adc0c64a46873e185a8e64464ce42e/babel.config.js#L1-L11

[suenot]

Spend a lot of time to solve this problem. "@vue/app" in current version included vue jsx support, that conflicted with react jsx.
My babel.config.js:

module.exports = {
  presets: [
    ["@babel/preset-env"],
    ["@babel/preset-react"],
  ],
  plugins: [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["@babel/plugin-syntax-jsx"],
    ["@babel/plugin-transform-react-jsx"],
    ["@babel/plugin-syntax-dynamic-import"],
    ["@babel/plugin-transform-runtime"],
  ],
}

[suenot]

@akxcv, is it possible to use vue jsx and react jsx together?

[akxcv]

In theory, yes, if during build time you can use Babel with different transforms for Vue and React files.
For example, you could set up Webpack to transform .vue files with @vue/app and .jsx files with React's plugin pipeline.

[amc1999]

@mpan-wework solution works great for me, thank you. There is only minor tweak - I prefer not to comment out entire preset // '@vue/app' but rather disable only Vue jsx plug-in:

// babel.config.js
module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {'jsx': false}],
    ['@babel/preset-react'],
    ['@babel/preset-env']
  ],
  plugins: [
    ['transform-react-jsx'],
    ['@babel/plugin-syntax-dynamic-import']
  ]
}