Webpack/babel 未编译 ReactDOM.render

Question

Objective：我正在尝试让 webpack/babel 编译 JSX，这样我就可以制作一个具有 React 前端和 django rest api 后端的网站。我已经阅读了许多教程和 Whosebug，但从未让 JSX 编译以使组合工作。

我调试了很久，发现JSX问题的症结似乎集中在reactDOM.render。如果我使用不带 reactDOM.render 的 React 组件，一切正常，但会因

等错误而崩溃

"App.js:12 未捕获的 ReferenceError: ReactDOM 未定义" 或者我最常得到的那个， “模块解析失败：意外标记 (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 在“templates/frontend”内：

  <!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 没有任何渲染。 [我的实际代码使用了数据获取，但这 post 简化了我的代码]（代码为 './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

花了很长时间盯着这个问题和浏览堆栈溢出，并尽力格式化这个堆栈post干净必要的信息，感谢您的帮助

Answer 1

错误告诉你 ReactDOM 未定义。这是因为你从不导入 ReactDOM。您只导入 render。所以写：

import * as React from "react";
import ReactDOM from "react-dom";
import App from "./app";

ReactDOM.render <App />, document.getElementById("root"));

Webpack/babel 未编译 ReactDOM.render

Webpack/babel not compiling ReactDOM.render

django

compilation

reactjs

webpack

babel-loader