出现错误 Module not found: Error: Can't resolve '../components/***' when webpack build, 我该如何解决这个问题？

Question

在我的代码中是这样的：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import React, { Suspense, lazy } from 'react'
import Header from '../components/Header'
import Left from '../components/Left'
import Footer from '../components/Footer'

const Home = lazy(() => import('../pages/home'))

const Routes = () => (
  <Router>
    <div>
      <Header />
      <aside className="g-left-menu">
        <Left />
      </aside>
      <main className="g-page-content">
        <Suspense fallback={<div>loading...</div>}>
          <Switch>
            <Route exact path="/" component={Home}/>
          </Switch>
        </Suspense>
      </main>
      <Footer />
    </div>
  </Router>
)
export default Routes

在我的 package.json 中：

    "scripts": {
        "build": "cross-env NODE_ENV=development webpack --mode development",
    }

当我运行 npm run build 时：

Module not found: Error: Can't resolve '../components/Footer'
Module not found: Error: Can't resolve '../components/Header'
Module not found: Error: Can't resolve '../components/Leftmenu'

在我的 webpack.config.js 中

resolve: {
    extensions: [ '.jsx', '.js' ],
    modules: [
        path.join(__dirname, 'node_modules'),
        path.resolve(__dirname, 'client'),
    ],
    ...
 }

enter image description here 但是当我运行 npm run build 时，出现错误： enter image description here

我的文件目录如下： enter image description here

Answer 1

如果我正确解释图像，我认为您的 routes 文件夹位于 components 文件夹内。假设您要在此处显示的代码是router/index.jsx。那么，你的导入应该是“../Footer”。

另外，请注意，我不确定.tsx 是否会引起问题。我建议如果你要打字，那么为了一致性起见，一直这样做，尽管完全取决于你。