vuera using babel, render function not defined

[Ntonis]

Hi, I am trying to render a vue component inside react app using vuera.The issue is that when i am adding vuera/babel plugin into .babelrc and launch the app i am getting that error:

[Vue warn]: Failed to mount component: template or render function not defined. found in \ \

.babelrc

{
    "presets": [
        "@babel/preset-env","@babel/preset-react"
    ],
    "plugins": ["vuera/babel","@babel/plugin-proposal-class-properties","@babel/plugin-syntax-dynamic-import"]
}

webpack conf:

//const { VueLoaderPlugin } = require('vue-loader')
const HtmlWebPackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const VueLoaderPlugin = require('vue-loader/lib/plugin') //new!
// const { VueLoaderPlugin } = require('vue-loader')

//const CopyPlugin = require('copy-webpack-plugin');
const Dotenv = require('dotenv-webpack')

const path = require('path');
module.exports = {
 resolve: {
    modules: ['src','node_modules']
  },
  entry: './src/index.js',
  output: {
    //path: path.resolve(__dirname, 'dist'),
    path: __dirname + '/dist',
    filename: 'main.js',
    publicPath: '/'
  },
  devServer: {
      historyApiFallback: true
   },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          'css-loader',
        ],

      },

      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader',
      },
       {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'fonts/'
            }
          }
        ]
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          runtimeCompiler: false
        }
      }

    ]
  },
  plugins: [
    // make sure to include the plugin for the magic
    new VueLoaderPlugin(),

    new HtmlWebPackPlugin({
      template: path.resolve( __dirname, 'public/index.html' ),
      filename: 'index.html'
    }),
    new Dotenv({
      path: './.env', // Path to .env file (this is the default)
      safe: true // load .env.example (defaults to "false" which does not use dotenv-safe)
    }),
    new CopyWebpackPlugin([
      { from: 'public/assets', to: 'assets' },
      {from: 'public/static', to:'static'},
      {from: 'public/BigDataStack_Logo_resized.png', to:'BigDataStack_Logo_resized.png'},
      {from: 'public/favicon.ico', to:'favicon.ico'},
    {from: 'public/manifest.json', to:'manifest.json'},
    {from: 'public/pe_assets', to:'pe_assets'},
    {from: 'public/custom.css', to:'custom.css'}
    ])
  ]
};

And those are the versions of packages:

        "vue": "2.6.11",
        "vue-inject": "^2.1.1",
        "vuera": "^0.2.6",
        "vue-loader": "^15.8.3",
        "vue-template-compiler": "^2.6.11",
        "webpack": "^4.41.3",
        "webpack-bundle-analyzer": "3.1.0",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.9.0"

Thanks in advance.

[fundatou]

hi, I got the same question. Is there any update?

[akxcv]

It would be helpful if anyone could describe how to reproduce this. A small example repo or a list of steps to minimally reproduce the issue would be best.

[Ntonis]

hi, I got the same question. Is there any update?

Hi, Its been so long, as I remember the fault was mine and not a bug. Did you mount your vue instance on a HTML DOM? for example: new Vue({ render: function(h) { return h(myVue); } }).$mount("#root");

ID have to exist. You can use VueWrapper.

[fundatou]

hi, I got the same question. Is there any update?

Hi, Its been so long, as I remember the fault was mine and not a bug. Did you mount your vue instance on a HTML DOM? for example: new Vue({ render: function(h) { return h(myVue); } }).$mount("#root");

ID have to exist. You can use VueWrapper.

Got it, thanks for your reply!

[akxcv]

@fundatou did this solve the problem for you?

[MayRain1999]

https://github.com/timsayshey/vuera-react-vue-demo-app