Javascript &引用；未捕获错误：“U registerComponent（…）：目标容器不是DOM”；_Javascript_Html_Reactjs_Heroku

Javascript &引用；未捕获错误：“U registerComponent（…）：目标容器不是DOM”；

javascript html reactjs heroku

Javascript &引用；未捕获错误：“U registerComponent（…）：目标容器不是DOM”；,javascript,html,reactjs,heroku,Javascript,Html,Reactjs,Heroku,在VirtualBox上运行代码时，我没有以下错误。（本地主机）但当我在Heroku上部署（并运行Heroku open或Heroku local web）时，我得到了整个空白页面，并出现以下错误：bundle.js:1285 Uncaught error:_registerComponent（…）：目标容器不是DOM元素 package.json中的我的react版本我不知道这个错误，在谷歌上搜索了stackoverflow上的一些类似错误。大多数解决方案都是将bundle.js放在正

在VirtualBox上运行代码时，我没有以下错误。（本地主机）

但当我在Heroku上部署（并运行Heroku open或Heroku local web）时，我得到了整个空白页面，并出现以下错误：bundle.js:1285 Uncaught error:_registerComponent（…）：目标容器不是DOM元素

package.json中的我的react版本

我不知道这个错误，在谷歌上搜索了stackoverflow上的一些类似错误。大多数解决方案都是将bundle.js放在正文末尾之前

index.html

<!doctype html>
<html lang="">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title> Drone Tracker </title>
    </head>

    <body>
          <div id="wrapper" class="active">
            <div id="page-content-wrapper">
                <div class="page-content-inset">
                  <div id="root"> </div>
                </div>
            </div>
          </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGD352Uy7zH5XMLZ__x2XyuMyUOxVDLgQ&language=zh-TW"></script>
        <script src="/bundle.js"> </script>
    </body>  
</html>


无人机跟踪器

index.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import ContentBody from './components/content_body';
import NavBar from './components/NavBar.js';
import Main from './components/Main.js';
import { BrowserRouter } from "react-router-dom";

class App extends Component{
    render(){
        return (
            <div>
                <NavBar />
                <Main />
            </div>
        );
    }
}


ReactDOM.render(
    <BrowserRouter >
            <App />
    </BrowserRouter>, document.querySelector('#root'));

import React，{Component}来自'React'；
从“react dom”导入react dom；
从“./components/content_body”导入ContentBody；
从“./components/NavBar.js”导入导航栏；
从“/components/Main.js”导入Main；
从“react router dom”导入{BrowserRouter}；
类应用程序扩展组件{
render（）{
返回(
);
}
}
ReactDOM.render(
，document.querySelector（“#root”）；

Main.js

import React from 'react'
import { Switch, Route } from 'react-router-dom'

import Home from './Home.js';
import ContentBody from './content_body';

const Main = () => (
  <main>
    <Switch>
      <Route exact path='/' component={Home}/>
      <Route path='/contentBody' component={ContentBody}/>
    </Switch>
  </main>
);

export default Main;

从“React”导入React
从“react router dom”导入{交换机，路由}
从“/Home.js”导入Home；
从“./content_body”导入ContentBody；
常量Main=（）=>(
);
导出默认主；

Home.js

import React from 'react';

const Home = () => (
  <div>
    <h1>HOME PAGE</h1>
  </div>
);

export default Home;

从“React”导入React；
常量Home=（）=>(
主页
);
导出默认主页；

尝试记录

document.querySelector（“#root”）

检查它是否返回单个DOM元素或它的数组。@abdul我尝试了“root”，但它无法工作。（即使在我的本地主机页面上也是空白）我使用了“#root”，你可以看到我登录heroku页面时得到的这个页面@JefreeSujit。尝试记录

document.querySelector（“#root”）

检查它是否返回单个DOM元素或它的数组。@abdul我尝试了“root”，但它无法工作。（甚至在我的本地主机页面上也是空白）我使用了“#root”，你可以看到我登录heroku页面时得到的这个页面@JefreeSujit。

import React from 'react';

const Home = () => (
  <div>
    <h1>HOME PAGE</h1>
  </div>
);

export default Home;