Настройка 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"]
}