我想将react项目链接到python Flask，所以我使用了webpack。
但是，我在webpack中出现以下错误：
./ web / app.js中的错误
未找到模块：错误：无法解析'/容器'
我不知道路径中是否有错误或语法错误。
我该如何解决这个问题？
该项目的结构如下：
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 ReactDOM from 'react-dom'
import { BrowserRouter, Route } from 'react-router-dom'
import { First, Second } from './containers'
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')
和可执行代码：
webpack
app.py
有人可以解决这个问题吗？
从'./containers'导入{First，Second}
这不是有效的导入语句。如果要导入目录，则该目录应包含一个index.js文件，该文件具有该文件的导出。一个简单的解决方案是将组件导入为：
import First from './containers/First';
import Second from './containers/Second';
希望这对您有用。