Настройка React на сервере: не генерируется код в main.js

После запуска команды npm run dev запускается скрипт, который, по идее, должен переводить весь код из Реакта с JSX в нормальный вид в файл main.js, чего не происходит

Структура проекта:

|-- __init__.py
|-- __pycache__
|   |-- __init__.cpython-35.pyc
|   |-- admin.cpython-35.pyc
|   |-- models.cpython-35.pyc
|   |-- urls.cpython-35.pyc
|   `-- views.cpython-35.pyc
|-- admin.py
|-- apps.py
|-- babel.config.json
|-- dist
|   `-- main.js
|-- migrations
|   |-- __init__.py
|   `-- __pycache__
|       `-- __init__.cpython-35.pyc
|-- models.py
|-- package-lock.json
|-- package.json
|-- src
|   |-- components
|   |   `-- App.js
|   `-- index.js
|-- static
|   `-- frontend
|       `-- main.js
|-- tests.py
|-- urls.py
|-- views.py
`-- webpack.config.js

Файл package.json:

    {
      "name": "frontend",
      "version": "1.0.0",
      "description": "",
      "main": "./build/index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack --mode development ./src/index.js --output ./static/frontend/main.js"
        "build": "webpack --mode production ./src/index.js --output ./static/frontend/main.js"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "@babel/core": "^7.12.3",
        "@babel/preset-env": "^7.12.1",
        "@babel/preset-react": "^7.12.1",
        "@babel/plugin-transform-react-jsx": "^7.10.4",
        "babel-loader": "^8.1.0",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "webpack": "^5.3.2",
        "webpack-cli": "^4.1.0"
  }
}

Файл index.js:

import App from "./components/App.js";

Файл App.js:

import React, { Component } from 'react';
import { render } from "react-dom";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loaded: false,
      placeholder: "Loading"
    };
  }

  render() {
    return (
      <ul>Hello world!
      </ul>
    );
  }


export default App;

const container = document.getElementById("app");
render(<App />, container);

Файл webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

После npm run dev main.js остается пустым. Ошибок никаких не выдает, просто не происходит изменений.


Ответы (1 шт):

Автор решения: Евгений Платов

у вас кривой package.json, обрезанный App.js и отсутствует конфиг на babel .babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}
→ Ссылка