Question

当我的反应应用程序运行我的webpack dev服务器时，我得到一个“未找到模块：错误：无法解析'/ Users / willhamilton / Desktop / freeva / src中的'/ components / FrontPage'错误。在我实现react路由器之后，才会弹出此错误。

Index.js

const path = require('path');
import FrontPage from '/components/FrontPage';
import Political from '/components/Political';
import Login from '/components/Login'
import BrowserRouter from 'react-router-dom';
import Route from 'react-router-dom';
const React =  require("react");
const ReactDOM = require("react-dom");

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Route path='/' component={FrontPage} />
            <Route path='/political' component={Political} />
            <Route path='/login' component={Login} />
        </div>
    </BrowserRouter>,
    document.getElementById('root'));

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const HtmlWebPackPlugin = require("html-webpack-plugin");

const htmlPlugin = new HtmlWebPackPlugin({
    template: "./public/index.html",
    filename: "./index.html"
});

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },

            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    },
    plugins: [htmlPlugin],
    devServer: {
        port: 3000
    }
};

关于可能导致此问题/如何解决问题的任何想法？（路径是正确的）

Answer 1

使用./来引用当前目录：

import FrontPage from './components/FrontPage';
import Political from './components/Political';
import Login from './components/Login'

Webpack无法解析React组件

1 个答案: