Fatal编程技术网
  • javascript/
  • Javascript 网页包：未找到模块：错误：Can'；t解析'/集装箱'；

Javascript 网页包：未找到模块：错误：Can'；t解析'/集装箱'；

javascript reactjs webpack

Javascript 网页包：未找到模块：错误：Can'；t解析'/集装箱'；,javascript,reactjs,webpack,Javascript,Reactjs,Webpack,我想把react项目链接到PythonFlask，所以我使用了webpack 但是，我在网页包中有以下错误： 在./web/app.js中出错 未找到模块：错误：无法解析“/containers” 我不知道路径中是否有错误或语法错误 我如何解决这个问题 本项目建设情况如下： templete |--- index.html static web |--- app.js |--- containers |--- First.js |---Second.js app.py packa

我想把react项目链接到PythonFlask，所以我使用了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')
);
有人能解决这个问题吗

从“/containers”导入{First，Second}

这不是有效的导入语句。如果要导入目录，那么它应该包含一个
index.js
文件，该文件具有文件的导出。一个简单的解决方案是将组件导入为：

import First from './containers/First';
import Second from './containers/Second';
希望这对您有用。

从“/containers”导入{First，Second}
这不是文件夹，不作为组件处理。container不应该有
index.js
来导出所有子模块吗？谢谢您的帮助！ 
<!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>

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 from './containers/First';
import Second from './containers/Second';