Webpack无法解析React组件

Question

When running my webpack dev server for my react app I get a "Module not found: Error: Can't resolve '/components/FrontPage' in '/Users/willhamilton/Desktop/freeva/src" error. This error only popped up after I implemented the react router.

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
    }
};

Any ideas as to what might be causing this / how to fix it? (Paths are correct)

Answer 1

Use ./ to refer to current directory:

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