Блог

Главная - Вопросы по программированию - Webpack/babel не компилирует ReactDOM.render

Webpack/babel не компилирует ReactDOM.render

#reactjs #django #webpack #compilation #babel-loader

Вопрос:

Цель: Я пытаюсь заставить webpack/babel скомпилировать JSX, чтобы я мог создать веб-сайт с интерфейсом react и серверной частью api django rest. Я прошел через множество учебных пособий и потоков стеков, но так и не смог скомпилировать JSX, чтобы заставить его работать.

Я долго отлаживал и обнаружил, что суть проблемы JSX, похоже, сосредоточена вокруг ReactDOM.render. Если я использую компоненты react без ReactDOM.render, все это работает, с is ломается с такими ошибками, как

«App.js:12 Ошибка с неперехваченной ссылкой: 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"
          }
        }
      ]
    }
  };

пакеты.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 inside of «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 located at ‘./scr/index.js’:

 import App from "./components/App";

..and because I am using Django I also have a urls.py that points to a view, and here is my view:

 from django.shortcuts import render


def index(request):
    return render(request, 'frontend/index.html')

its worth noting that I have installed this app into the settings of Django, as well as the restAPI framework, which sits on the backend app. I have testing the api seperate and it works, I have gone to the api page, and I have seen the api talk to non-react components. The urls.py for the whole project by-default points the user to frontend/urls.py via include(), this has also been tested and works.

I THOUGHT I solved the babel/webpack/JSX problem, but I realized that while this works perfectly, nothing is rendered to the DOM. [my actual code used the data fetch but this post simplifies my code] (code that words for ‘./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

Потратил много времени, изучая эту проблему и просматривая переполнение стека, и изо всех сил старался отформатировать этот пост в стеке с чистой необходимой информацией, спасибо за вашу помощь

Ответ №1:

Ошибка говорит о том, что вы ReactDOM не определены. Это потому, что вы никогда не импортируете ReactDOM . Вы только импортируете render . Так что пишите:

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

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

Комментарии:

1. черт, это было до неловкости просто. Спасибо!! Настоящий урок в том, что мне нужно было ненадолго отойти от кода, я стал неаккуратным. Я также видел, что в неудачных примерах идентификатор из .html («приложение») отличался от элемента, который я отображал в dom («root»).

2. Круто! Если это сработало для вас нормально, пожалуйста, отметьте этот ответ как действительный, чтобы другие люди могли извлечь выгоду из разрешенной темы.

Метки: