未捕获的不变违规：目标容器不是 DOM 元素。- Reactjs答案

【问题标题】：Uncaught Invariant Violation: Target container is not a DOM element.- Reactjs未捕获的不变违规：目标容器不是 DOM 元素。- Reactjs
【发布时间】：2019-09-20 04:52:40
【问题描述】：

此代码在本地运行时运行良好。当我在000webhost 中上传它并在 WordPress 页面中使用 bundle.js 的路径时，就会遇到这个错误。我在没有_registerComponent 的情况下收到上述错误。到处都有_registerComponent 错误的解决方案。

我也将document.getElementById("app") 的值设为空。

app.js

import React from "../node_modules/react/index";
import { render } from "../node_modules/react-dom/index";
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";

const App = () => (
      <div>
      <Plans/>
      </div>
  );
var app = document.getElementById("app");
console.log("app",document.getElementById("app"))
render(<App/>, app);

index.html

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app"></div> 
    <script  src="./bundle.js"></script>   
</body>

</html>

    Code used in WordPress
    <html>
     <head>
        
    </head>
    <body>
    
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>
    
    </body>
</html>

【问题讨论】：

请any of these帮忙？并非所有这些都与_registerComponent
这行代码app是什么render(<App/>, app)
抱歉，我错过了粘贴 var app = document.getElementById("app");

标签： javascript reactjs wordpress

【解决方案1】：

由于您没有在 wordpress 中使用 index.html，因此您需要添加根容器 div 以便 react 用于呈现您的应用程序。尝试在wordpress html中为app添加div，即<div id="app"></div>

       <html>
         <head>

        </head>
        <body>
          <div id="app"></div> 
          <script async src="https://unvisitable-bows.000webhostapp.com/react-widget-subscription-plans/react-widget-subscription-plans/public/bundle.js" crossorigin></script>

        </body>
    </html>

【讨论】：

【解决方案2】：

在 app.js 中试试这个

import React from 'react';
import ReactDOM from 'react-dom';
import Plans from "./components/Plans";
//Import CSS
import "./styles/styles.scss";

const App = () => (
  <div>
  <Plans/>
  </div>
 );
  ReactDOM.hydrate(
  <App />,
  document.getElementById('app')
  );

【讨论】：

【解决方案3】：

您的变量“app”未定义。试试这个

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

【讨论】：

谢谢，但我也试过了，但问题仍然存在。