如何解决Webpack/babel 不编译 ReactDOM.render
目标：我正在尝试让 webpack/babel 编译 JSX，以便我可以创建一个带有 react 前端和 django rest api 后端的网站。我已经阅读了很多教程和 Stackoverflows，但从来没有让 JSX 编译来使组合工作。
我调试了很长时间，发现JSX问题的症结似乎集中在reactDOM.render上。如果我在没有 reactDOM.render 的情况下使用 react 组件，则一切正常，但会因诸如
之类的错误而崩溃“App.js:12 Uncaught ReferenceError: ReactDOM is not defined” 或者我最常得到的那个， “模块解析失败：意外令牌 (13:12) 您可能需要合适的加载程序来处理此文件类型”
{
"presets": [
"@babel/preset-env","@babel/preset-react"
]
}
webpack.config.js:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,exclude: /node_modules/,use: {
loader: "babel-loader"
}
}
]
}
};
packages.json：
{
"name": "frontend","version": "1.0.0","description": "","main": "index.js","scripts": {
"dev": "webpack --mode development --entry ./src/index.js --output-path ./static/frontend","build": "webpack --mode production --entry ./src/index.js --output-path ./static/frontend"
},"keywords": [],"author": "","license": "ISC","devDependencies": {
"@babel/core": "^7.14.6","@babel/preset-env": "^7.14.7","@babel/preset-react": "^7.14.5","babel-loader": "^8.2.2","react": "^17.0.2","react-dom": "^17.0.2","webpack": "^5.42.1","webpack-cli": "^4.7.2"
}
}
index.html 在“模板/前端”中：
<!DOCTYPE html>
<html>
<head>
<Meta charset="utf-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>Django REST with React</title>
</head>
<body>
<div id="app">
<!-- React will load here -->
</div>
</body>
{% load static %}
<script src="{% static 'frontend/main.js' %}"></script>
</html>
index.js 位于“./scr/index.js”：
import App from "./components/App";
..并且因为我使用的是 Django，所以我还有一个指向视图的 urls.py，这是我的视图：
from django.shortcuts import render
def index(request):
return render(request,'frontend/index.html')
值得注意的是，我已经将这个应用程序安装到 Django 的设置中，以及位于后端应用程序上的 restAPI 框架。我已经单独测试了 api 并且它可以工作，我已经转到 api 页面，并且我已经看到 api 与非反应组件的对话。整个项目的 urls.py 默认通过 include() 将用户指向 frontend/urls.py，这也已经过测试并有效。
我以为我解决了 babel/webpack/JSX 问题，但我意识到虽然这很完美，但没有渲染到 DOM。 [我的实际代码使用了数据获取，但这篇文章简化了我的代码]（代码表示“./src/components/App.js”）：
import React,{ Component } from "react";
import { render } from "react-dom";
class App extends Component {
render() {
return (
<p>hello world</p>
);
}
}
export default App;
const container = document.getElementById("app");
render(<App />,container);
这有效，没问题！如果我改为尝试将其渲染到 DOM，则会引发错误：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<p>hello world</p>,document.getElementById('root')
);
也许我需要更优雅地写它？如果我这样写同样的错误：
import React,{ Component } from "react";
import { render } from "react-dom";
class App extends Component{
render() {
return(
<p>hello world</p>
);
}
};
ReactDOM.render(<App />,document.getElementById('root'));
这次它抛出了这个错误（有时我看到另一个关于缺少合适的加载器）：
App.js:55 Uncaught ReferenceError: ReactDOM is not defined
at eval (App.js:55)
at Object../src/components/App.js (main.js:19)
at __webpack_require__ (main.js:143)
at eval (index.js:2)
at Object../src/index.js (main.js:29)
at __webpack_require__ (main.js:143)
at main.js:183
at main.js:185
花了很长时间盯着这个问题并浏览堆栈溢出，并尽我所能来格式化这个堆栈发布干净必要的信息，感谢您的帮助
解决方法
错误告诉您 ReactDOM 未定义。这是因为您从不导入 ReactDOM。您只需导入 render。所以写：
import * as React from "react";
import ReactDOM from "react-dom";
import App from "./app";
ReactDOM.render <App />,document.getElementById("root"));版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
