找不到模块：错误：无法解析“主页”

Question

我刚刚开始学习 React，并在尝试使用 webpack 构建时偶然发现了这个错误。

Module not found: Error: Can't resolve 'Home' in 'D:\wamp64\www\Wallet\src\components'
resolve 'Home' in 'D:\wamp64\www\Wallet\src\components'

我的 webpack.config.js：

const path = require('path');
module.exports = {
  entry: {
    index: '.src/index.js',
    js: './src/js/index2.js',
    react: './src/components/App.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader',
        query: {
          presets: ['env', 'stage-0', 'react']
        }
      }
    ]
  }
};

我的主页.js：

const Home = () => {
  return <h1>Home</h1>
}

export default Home

这就是我在 App.js 中导入 Home 的方式：

import { BrowserRouter, Route, Switch , Link} from 'react-router-dom';
import Home from 'Home';
import About from 'About';

我在这里遇到了几个问题，建议在 src 文件夹中添加一个空的 index.js ，但这也不起作用。

Answer 1

您的导入不正确

import Home from 'Home';
import About from 'About';

您需要指定文件的路径和文件，例如：

import Home from './src/components/Home.js';

home.js 是您导出组件的文件