ReactJS 15.6.2 版：目标容器不是 DOM 元素答案

【问题标题】：ReactJS version 15.6.2: Target container is not a DOM elementReactJS 15.6.2 版：目标容器不是 DOM 元素
【发布时间】：2018-07-06 04:48:37
【问题描述】：

我面临以下错误，但我无法解决同样的问题。我在 Stack Overflow 中针对同一问题查看了许多答案，但没有一个可以帮助我解决问题。

我正在使用 ReactJS v15.6.2、babel-loader 7 和 webpack 4.15.0

这是我的 index.html

<!DOCTYPE HTML>
<html>    
<head>
    <link href="https://fonts.googleapis.com/css?family=Cabin+Sketch" rel="stylesheet">
</head>    
<body>
    <div id="App">
        <!-- this is where the root react component will get rendered -->
    </div>
    <script type="javascript" src="/build/bundle.js"></script>
    <script type="javascript" src="https://use.fontawesome.com/80fe1399d9.js"></script>
    <script type="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> . 
    </script>
</body>
</html>

我的入口组件App.js

render(<Router history={browserHistory}>
<Route path="/" component={App} >

  </Route>
  <Redirect from='*' to='/404' />
</Router>, document.getElementById('App'))

【问题讨论】：

您将脚本放在 html 中的什么位置？在正文的末尾（仍在内部），添加脚本：<script src="./App.js"></script>
我更新了我的问题。我把它放在body里面的dev标签下面。但即使我的 index.html 不包含任何脚本，我也面临同样的问题
@HemadriDasari 唯一可能的问题是 document.getElementById('App') 未定义。 console.log(document.getElementById('App')) 显示什么？
@m0meni 我在渲染方法之前放置了 console.log(document.getElementById('App')) 。它给了我 null
嘿抱歉我犯了愚蠢的错误。我在 webpack 配置中添加了 html-webpack-plugin 两次。删除后它现在可以正常工作了。

标签： javascript reactjs webpack babeljs babel-loader

【解决方案1】：

我遇到了这个问题，因为我在我的 webpack 配置中添加了两次 html-webpack-plugin。删除重复项后问题得到解决。

【讨论】：