aframe with react- no image coming on the screen

Question

I am trying to implement panorama feature in my code using A-frame and react.

This is my code in react. In my code, after the loadOne function gets called, only one image appears on the screen if I just call the <img />

But with <a-scene>, nothing is coming on the screen.

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import 'aframe';
import 'aframe-particle-system-component';
import {Entity, Scene} from 'aframe-react';

class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
      images:[],
      pano:'',
      name:'',
      list:[],
      isClicked:false,
      imageUrl:''
    }
    this.loadImages=this.loadImages.bind(this);
    this.loadOne=this.loadOne.bind(this);
  }


  loadImages(){
    console.log("load");
    var that=this;
    $.ajax({
      type:'GET',
      url:'https://demo0813639.mockable.io/getPanos',
      success:function(result){
        var images=that.state.images;
        for(var i=0;i<result.length;i++){
          that.state.images.push({"pano":result[i].pano,"name":result[i].name});
        }
        that.setState({
          images:images
       })
  }

})

}

loadOne(pano){
  this.setState({
    isClicked:true,
    imageUrl:pano
  })
}


  render(){
    //let content=<p></p>;
    var list=this.state.list;
    if(this.state.isClicked===false){
      list=this.state.images.map((result)=>{
        //console.log(result.name);
      return(<div className="box">
              <div className="label">{result.name}</div>
                <img src={result.pano} className="image col-md-3" onClick={this.loadOne.bind(this,result.pano)}/>   
            </div>
            )
     })
   }else{
      return(
          <Scene>
            <Entity position="0 -2 0" rotation="-90 0 0"><img src={this.state.imageUrl}/></Entity>
          </Scene>
      )
   }
    return( 
      <div>
        <button onClick={this.loadImages}>Click</button>
        <div >{list}</div>      
      </div>
          );
  }
}

Do I need to make changes in the webpack too?

var webpack = require('webpack');
var path = require('path');

var node_dir = __dirname + '/node_modules',
    lib_dir = __dirname + '/public/libraries';

var config = {
    // The resolve.alias object takes require expressions 
    // (require('react')) as keys and filepath to actual
    // module as values
    resolve: {
        alias: {
            react: lib_dir + '/react',
            "react-dom": lib_dir + '/react-dom',
            "jquery": lib_dir + '/jquery-3.2.1.js',
            react:preact
        },
        extensions:['.js','.jsx','.json']
    },
    plugins: [

        new webpack.optimize.CommonsChunkPlugin({ // 
            name: 'vendors',
            filename: 'build/vendors.bundle.js',
            minChunks: 2,
        }),

        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ],

    entry: {
        musicApp: ['./public/js/app.js', 'webpack/hot/only-dev-server'],
        vendors: ['react', 'react-dom', 'jquery', 'webpack/hot/only-dev-server']
    },

    output: {
        path: path.join(__dirname, "public"),
        filename: 'build/[name].bundle.js',
        libraryTarget: "umd"
    },

    module: {

        noParse: [
            new RegExp(lib_dir + './react.js'), 
            new RegExp(lib_dir + './react-dom.js')
        ],
        rules: [
             {
                test: /\.js?$/,

                loaders: ['react-hot-loader/webpack', 'babel-loader'],
                include: path.join(__dirname, 'public')

            }, 
            {
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                },
                include: path.join(__dirname, 'public')
            }
        ]
    }
}

module.exports = config;

I have included the library of A-frame too. So, what is wrong here? I am getting errors like this

Answer 1

It's important to understand that A-Frame doesn't work with React out of the box.

Whenever you include a tag like <a-scene> in your JSX, React will expect it to match to an existing component. That's because all of the tags in JSX map to components (either built-in ones like <img /> or custom ones).

So what you'll need to do is use a lib that wraps React component logic over these new vr tags like aframe-react