[英]got error Module not found: Error: Can't resolve '../components/***' when webpack build,how can I solve this problem?
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:在我的 package.json 中:
"scripts": {
"build": "cross-env NODE_ENV=development webpack --mode development",
}
when I run npm run build:当我运行 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在我的 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在此处输入图像描述,但是当我运行 npm run build 时,出现错误:在此处输入图像描述
and my files dir like this: enter image description here和我的文件目录是这样的:在此处输入图像描述
I think your routes folder is inside the components folder if I interpreted the image right.如果我正确解释图像,我认为您的路由文件夹位于 components 文件夹内。 Assuming the code you are trying to show here is
router/index.jsx
.假设您要在此处显示的代码是
router/index.jsx
。 then, your imports should be "../Footer".然后,您的导入应该是“../Footer”。
Also, just a heads up, I'm not sure whether or not .tsx
will cause a problem.另外,请注意,我不确定
.tsx
是否会导致问题。 I suggest if you're going typescript, then do it all the way and for the sake of consistency, though entirely up to you.我建议如果你要打字稿,那么为了一致性起见,一直这样做,尽管完全取决于你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.