我想将react项目链接到python Flask，所以我使用了webpack。
但是，我在 webpack 中遇到以下错误:
./web/app.js 中出现错误
找不到模块:错误:无法解析“/containers”
不知道是路径有错误还是语法错误。
如何解决这个问题？
该项目的构造如下:
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')
);
首先.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>
应用程序.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
有人可以解决这个问题吗？
最佳答案
import { First, Second } from './containers'
这不是有效的导入语句。如果您要导入目录，那么它应该包含一个 index.js 文件，其中包含文件的导出。一个简单的解决方案是将组件导入为:
import First from './containers/First';
import Second from './containers/Second';
希望这对您有用。
关于javascript - Webpack:找不到模块:错误:无法解析 './containers'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60509092/