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时运行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

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

另外，请注意，.tsx是否会引起问题。我建议如果您要使用打字稿，请完全按照自己的意愿，一路走来，为了保持一致性。

出现错误未找到模块：错误：Webpack构建时无法解析“ ../components/***”，我该如何解决此问题？

1 个答案: