React - laravel - 未捕获的错误：目标容器不是 DOM 元素答案

【问题标题】：React - laravel - Uncaught Error: Target container is not a DOM elementReact - laravel - 未捕获的错误：目标容器不是 DOM 元素
【发布时间】：2023-03-24 14:53:01
【问题描述】：

我使用 React 作为我的 laravel 项目的前端。我的 React 组件按预期呈现，但我在 chrome devtool 控制台中不断收到此错误：

Uncaught Error: Target container is not a DOM element.
  at invariant (app.js:38102)
  at legacyRenderSubtreeIntoContainer (app.js:56749)
  at Object.render (app.js:56830)
  at Object.<anonymous> (app.js:58393)
  at __webpack_require__ (app.js:20)
  at Object.<anonymous> (app.js:13977)
  at __webpack_require__ (app.js:20)
  at Object.<anonymous> (app.js:13951)
  at __webpack_require__ (app.js:20)
  at app.js:63

我浏览了整个互联网，但没有找到解决此问题的解决方案。你知道这是什么原因吗？

我把我的<script type="text/javascript" src="{{ asset('js/app.js') }}"></script> 在结束 </body> 标记之前。

这是我的 Sidebar.js 组件：

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

const Sidebar = () => (
<div className="sidebar" data-color="purple" data-background-color="white" data-image="../assets/img/sidebar-1.jpg">
    <div className="logo">
        <a href="http://www.creative-tim.com" className="simple-text logo-normal">
        Creative Tim
        </a>
    </div>
    <div className="sidebar-wrapper">
        <ul className="nav">
        <li className="nav-item active  ">
            <a className="nav-link" href="./dashboard.html">
            <i className="material-icons">dashboard</i>
            <p>Dashboard</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./user.html">
            <i className="material-icons">person</i>
            <p>User Profile</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./tables.html">
            <i className="material-icons">content_paste</i>
            <p>Table List</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./typography.html">
            <i className="material-icons">library_books</i>
            <p>Typography</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./icons.html">
            <i className="material-icons">bubble_chart</i>
            <p>Icons</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./map.html">
            <i className="material-icons">location_ons</i>
            <p>Maps</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./notifications.html">
            <i className="material-icons">notifications</i>
            <p>Notifications</p>
            </a>
        </li>
        <li className="nav-item ">
            <a className="nav-link" href="./rtl.html">
            <i className="material-icons">language</i>
            <p>RTL Support</p>
            </a>
        </li>
        </ul>
    </div>
</div>
    )

if(document.getElementById('sidebar')) {
    ReactDOM.render(<Sidebar />, document.getElementById('sidebar'))
}

export default Sidebar;

【问题讨论】：

也分享你的代码
@ShaielndraGupta 查看代码。
你的html有#sidebar吗？
@PlayMa256 是的，它有 #sidebar 这就是渲染组件的原因。但我不知道错误的根源
你能告诉你在你的代码中哪里写了<script src="{% static "build/react.js" %}"></script>

标签： javascript reactjs laravel webpack laravel-mix

【解决方案1】：

您能否检查一下您的主要组件#render 函数是否返回一个 DOM 元素...（尝试将所有返回的组件包装在一个

【讨论】：

谢谢 :) ！我的组件中的一切都很好，问题是由于我的模板所依赖的一些 js 文件。问题解决了！

【解决方案2】：

它告诉你它找不到你所说的'sidebar'。按照惯例，除非你调整了你的index.html，如果你使用create-react-app，它应该在你的public/index.html中，或者如果你仍在使用npm init，它应该在主根文件夹中。

我敢打赌，除非你改变它，否则你的顶级 div 有一个容器类：

<div class="container"></div>

这是一个非常好的渲染组件的位置。在大多数 React 应用程序中，你会看到这个，一个 body 标签和一个带有容器类或应用程序类的 div。

您创建的所有组件最终都成为该根container 元素的子元素或嵌套在其中。所以，你需要像这样引用container：

ReactDOM.render(<Sidebar />, document.querySelector('.container'));

这就是说去寻找 div 并在该 div 中渲染 App 组件。

【讨论】：