Codesandbox 为 React 应用程序提供“目标容器不是 DOM 元素”错误，但 webpack-dev-server 没有
Posted
技术标签:
【中文标题】Codesandbox 为 React 应用程序提供“目标容器不是 DOM 元素”错误，但 webpack-dev-server 没有【英文标题】：Codesandbox gives "Target container is not a DOM element" error for React app, but webpack-dev-server does not 【发布时间】：2019-10-07 02:15:09 【问题描述】：我正在尝试将我的 git 存储库与一个练习 React 应用程序一起放入 codeandbox.io，以便我可以更轻松地向其他与我一起工作的人展示它。我按照在这里得到我的沙箱的说明进行操作：https://codesandbox.io/s/github/cdpautsch/react-learning-area/tree/master/test-app2
但是，我得到了错误：Target container is not a DOM element
evaluate
/src/index.js:52:9
49 |
50 |
51 |
> 52 | ReactDOM.render((
| ^
53 | <Provider store=store>
54 | <BrowserRouter>
55 | <div>
当我使用 webpack-dev-server 运行时，我的机器上不会出现此错误。
我的代码来自index.js：
ReactDOM.render((
<Provider store=store>
<BrowserRouter>
<div>
<Navbar />
<Route exact path = "/" component = Home />
<Route path = "/cards" component = CardsGame />
</div>
</BrowserRouter>
</Provider>
), document.getElementById('app'));
我的代码来自index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TestApp2</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
它说它不是一个有效的元素，但它肯定存在并且肯定有正确的名称。我错过了什么？
更新附加信息：
* 该应用程序不是使用create-react-app 创建的，而是手动初始化和加载包
* Sandbox 似乎默认为 CRA，这可能会影响它的运行方式？
【问题讨论】：
这很奇怪，但我只是将 div 的名称更改为“root”，它似乎工作得很好。 您是否为此使用了 CRA？ index.html 文件永远不会在沙箱上呈现，因为 index.js 永远不会在文件中链接。 Create-react-app 在构建应用程序时在后台构建时会执行一些操作以将所有脚本插入到 HTML 文件中，但如果您只是复制/粘贴链接不会翻译的内容。 我不记得我是从头开始做的，还是用 CRA 创建它然后删除所有东西从头开始做，但它不应该使用 CRA。我在模板中注意到了这一点，但不知道如何将其关闭。我想完全控制它的设置方式，这就是我不想使用 CRA 的原因。 退出 CRA 应用程序通常只会让我感到头疼，但我不是专家。如果你只是想让它在codesandbox上工作，你所要做的就是粘贴一个脚本标签来链接HTML和JS文件：<script src="index.js" type="text/javascript"/>
好吧，我没有弹出它。如果它曾经是 CRA，那么我会删除目录中的所有内容。 package.json只有我放进去的东西，应该不会留下任何东西。
【参考方案1】：
如果 index.html 在 src 中，请尝试将其移出 src。 我做到了并修复了。
【讨论】：
【参考方案2】：我意识到这是一个老问题，但是对于像我这样迟到的人来说。尝试将index.html 文件移动到src 目录中。这是“codesandbox”的问题。我这样做了，它解决了这个问题。
【讨论】：
以上是关于Codesandbox 为 React 应用程序提供“目标容器不是 DOM 元素”错误，但 webpack-dev-server 没有的主要内容，如果未能解决你的问题，请参考以下文章
Codesandbox.io 中的 React-Testing-Library 问题
codeSandBox (React/Node) 的 Http 请求错误
如何使用 CodeSandbox 在 LESS 中为 Ant Design (React) 创建自定义主题？