【发布时间】：2021-09-17 04:09:51
【问题描述】：
目标：我正在尝试让 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) 您可能需要适当的加载程序来处理此文件类型”
这里是代码—— 我的 .babelrc 文件：
{
"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
花了很长时间盯着这个问题和浏览堆栈溢出，并尽力格式化此堆栈发布干净必要的信息，感谢您的帮助
【问题讨论】：
标签： reactjs django webpack compilation babel-loader