Я хочу связать реагирующий проект с python Flask, поэтому я выбираю использование веб-пакета в качестве решения.
Но при загрузке файла у него есть 500 Внутренняя ошибка сервера упакованный файл реакции после запуска исполняемого кода:
500 Внутренняя ошибка сервера image
Исполняемый код выглядит следующим образом:
webpack
app.py
Я не знаю Не знаю, где не так в текущей структуре.
Этот проект построен следующим образом:
templete
|--- index.html
static
web
|--- app.js
|--- containers
|--- First.js
|---Second.js
app.py
package.json
webpack.config.js
requirements.txt
webpack.config. js:
const path = require("path")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
mode: "development",
entry: [
'@babel/polyfill',
"./web/app.js"
],
output: {
filename: "flask_react_router.js",
path: path.resolve(__dirname, "static"),
publicPath: "/static/"
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: [{
loader: "babel-loader",
options: {
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: [
['@babel/plugin-proposal-decorators', {legacy: true}],
['@babel/plugin-proposal-class-properties', {loose: true}]
]
}
}]
},
{
test: /\.(png|jpg|ico|svg|eot|woff|woff2|ttf)$/,
use: ['file-loader']
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "flask_react_router.css",
chunkFilename: "[id].css"
})
]
}
app. js:
import '@babel/polyfill'
import React from 'react'
import First from './containers/First';
import Second from './containers/Second';
import ReactDOM from 'react-dom'
import { BrowserRouter, Route } from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<Route exact path='/first' component={ First } />
<Route exact path='/second' component={ Second } />
</BrowserRouter>
, document.getElementById('root')
);
First. js:
import React, { Component } from 'react'
export default class First extends Component {
render() {
return (
<div>Hello First</div>
)
}
}
index. html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="author" content="kimkkikki">
<title>Flask React Router</title>
<link rel="stylesheet" href="{{ url_for('static', filename='flask_react_router.css') }}">
</head>
<body>
<div id="root"></div>
</body>
<script type="text/javascript" src="{{ url_for('static', filename='flask_react_router.js') }}"></script>
</html>
app.py:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def web(path):
return render_template('index.html')
if __name__ == '__main__':
app.run(host='127.0.0.1')
Может кто-нибудь помочь с этой проблемой?