Using Vue component in a create-react-app and getting an error

[timsayshey]

I'm trying to get include a Vue component in a React app but I get the following error:

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/test.5138b6c8.vue') is not a valid name.

To reproduce just run the following:

npx create-react-app my-app
cd my-app
npm i -S vuera
npm start

Then I added the .babelrc file:

{
  "presets": ["react"],
  "plugins": ["vuera/babel"]
}

Added a simple test.vue file:

<template>
    <div>Hello</div>
</template>

In my App.js I have:

import React from 'react'
import Test from './test.vue'

export default () => (
  <div>
    <h1>I'm a react component</h1>
    <div>
      <Test message='Hello from Vue!' />
    </div>
  </div>
)

Does anyone have simple steps to get a fresh react app up and running with Vue components included?

Thanks!

[theenoahmason]

I have tried everything. same problem. plz help!

[timsayshey]

Figured it out. This requires doing a yarn eject then making various changes to the webpack config. I created a working demo app for those that find this in the future. Hopefully it'll save you all the hours I lost trying to get this working:
https://github.com/timsayshey/vuera-react-vue-demo-app