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

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.

[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"],
  ],
}