[英]How to solve “module not found can't resolve 'Api Client'” error?
[英]got error Module not found: Error: Can't resolve '../components/***' when webpack build,how can I solve this problem?
在我的代码中是这样的:
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'),
],
...
}
在此处输入图像描述,但是当我运行 npm run build 时,出现错误:在此处输入图像描述
和我的文件目录是这样的:在此处输入图像描述
如果我正确解释图像,我认为您的路由文件夹位于 components 文件夹内。 假设您要在此处显示的代码是router/index.jsx
。 然后,您的导入应该是“../Footer”。
另外,请注意,我不确定.tsx
是否会导致问题。 我建议如果你要打字稿,那么为了一致性起见,一直这样做,尽管完全取决于你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.