问题描述
目标:我正在尝试让 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"));