Реагируйте на получение «TypeError: data.controls не определено» от элементов управления движением. js: 73 при попытке загрузить элементы управления движением aframe-extras в оснастку камеры

Question

Я пытаюсь использовать пакет npm aframe-extras с моим реактивным проектом и получаю вышеуказанную ошибку. Я также попытался использовать cdn в моем индексе. html безуспешно. Я получаю похожую ошибку: «TypeError: t.controls не определена». Проект настроен так, что каждый компонент маршрутизируется в приложении. js и выводится в div в index. html через index. js. Когда после установки соответствующих зависимостей я запускаю aframe-реакции-шаблон, все работает нормально. Но, когда я пытаюсь создать новый компонент в моем проекте с индексом js из шаблона, я получаю ту же ошибку. Так что ... это должно быть проблема с тем, как мой реагирующий проект реагирует на рендеринг компонентов. У кого-нибудь есть идеи для решения?

Project.component. js:

import axios from 'axios';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';

...

export default class Project extends Component {

...


  render() {


    return (
            <div className="container">

...
                    {/* Error when adding "movement-controls": */}
                    <a-entity id="rig" movement-controls wasd-controls="acceleration:3000; fly: true" position="0 0 0"> {/* 826 315 0 */}
                      <a-camera id="camera" look-controls="pointerLockEnabled: true"></a-camera>
                      <a-entity windows-motion-controls="hand: left"></a-entity>
                      <a-entity windows-motion-controls="hand: right"></a-entity> 
                    </a-entity>
                    <a-sky color="#ECECEC"></a-sky>


                  </a-scene>                
              </div>
            </div>
            </div>


    );
  }
}

Приложение. js:

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import $ from 'jquery';
import Popper from 'popper.js';

import { BrowserRouter as Router, Route, Switch} from "react-router-dom";

import Navbar from "./components/navbar.component"
import ProjectList from "./components/project-list.component";
import CreateProject from "./components/create-project.component";
import CreateUser from "./components/create-user.component";
import Login from "./components/Login.component";
import Register from "./components/Register.component";
import PrivateRoute from "./components/private-route/PrivateRoute";
import Dashboard from "./components/dashboard/Dashboard";
import Project from "./components/Project.component";
import Test from "./components/aframe-test.component"

import jwt_decode from "jwt-decode";
import setAuthToken from "./utils/setAuthToken";
import { setCurrentUser, logoutUser } from "./actions/authActions";

import { Provider } from "react-redux";
import { combineReducers } from "redux";
import thunk from "redux-thunk";

import store from "./store";
if (localStorage.jwtToken) {
  // Set auth token header auth
  const token = localStorage.jwtToken;
  setAuthToken(token);
  // Decode token and get user info and exp
  const decoded = jwt_decode(token);
  // Set user and isAuthenticated
  store.dispatch(setCurrentUser(decoded));
// Check for expired token
  const currentTime = Date.now() / 1000; // to get in milliseconds
  if (decoded.exp < currentTime) {
    // Logout user
    store.dispatch(logoutUser());
    // Redirect to login
    window.location.href = "./login";
  }
}


function App() {
  return (
    <Provider store={store}>
      <Router>
          <PrivateRoute exact component={Navbar} />
          <div style={{paddingTop: '200px'}}>
            <Route path="/login" component={Login} />
            <Route path="/register" component={Register} />
            <Switch>
              <PrivateRoute exact path="/" exact component={ProjectList} />
              <PrivateRoute exact path="/project/:id" component={Project} />
              <PrivateRoute exact path="/create" component={CreateProject} />
              <PrivateRoute exact path="/test" component={Test} />
              {/* <PrivateRoute exact path="/user" component={CreateUser} /> */}
              <PrivateRoute exact path="/dashtest" component={Dashboard} />
            </Switch>
          </div>
      </Router>
    </Provider>
  );
}

export default App;

index. js ... обратите внимание, что в настоящее время я не использую афраме-реакцию для своего проекта. Я только использовал это, чтобы проверить шаблонный код в отдельном компоненте, не размещенном здесь. Ошибка одинакова для обоих компонентов:

import 'aframe';
import 'aframe-extras';
//import 'aframe-animation-component';
//import 'aframe-particle-system-component';
import 'babel-polyfill';
import {Entity, Scene} from 'aframe-react';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

index. html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="logo_small.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!-- <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.0/dist/aframe-extras.min.js"></script> -->

    <title>Sandbox</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>