got error Module not found: Error: Can't resolve '../components/***' when webpack build,how can I solve this problem?

Question

in my code like this:

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

In my package.json:

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

when I run 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'

In my webpack.config.js

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

enter image description here but when I run npm run build ,I got error: enter image description here

and my files dir like this: enter image description here

Answer 1

I think your routes folder is inside the components folder if I interpreted the image right. Assuming the code you are trying to show here is router/index.jsx . then, your imports should be "../Footer".

Also, just a heads up, I'm not sure whether or not .tsx will cause a problem. I suggest if you're going typescript, then do it all the way and for the sake of consistency, though entirely up to you.