[英][React Webpack]: Module not found: Error: Can't resolve 'src/views/UserList' in 'C:\Users\…'
I have a create-react-app application working 100%, I want to integrate webpack4 to deploy my app but after configuring webpack when I 'npm dev run' I get those errors on every lazy import line: Module not found: Error: Can't resolve 'src/views/UserList' in 'C:....'我有一个 100% 工作的 create-react-app 应用程序,我想集成 webpack4 来部署我的应用程序,但是在配置 webpack 后,当我“npm dev run”时,我在每个惰性导入行上都会遇到这些错误:找不到模块:错误:可以'不解析 'C:....' 中的 'src/views/UserList'
My webpack.config.js:我的 webpack.config.js:
// webpack.config.js const path = require( 'path' ); const HtmlWebPackPlugin = require( 'html-webpack-plugin' ); const webpack=require('webpack'); module.exports = { context: __dirname, entry: { bundle: './src/index.js', }, output: { path: path.resolve(__dirname, 'dist'), filename: 'main.js', }, devServer: { historyApiFallback: true }, module: { rules: [ { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ["babel-loader"], }, { test: /\.((c|sa|sc)ss)$/i, use: ['style-loader', 'css-loader'] }, { test: /\.(png|j?g|svg|gif)?$/, use: 'file-loader', include: path.resolve(__dirname, 'src') } ] }, plugins: [ new HtmlWebPackPlugin({ template: path.resolve( __dirname, 'public/index.html' ), filename: 'index.html' }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }) ], };
My routes.js:我的路线.js:
/* eslint-disable react/no-multi-comp */ /* eslint-disable react/display-name */ import React, { lazy } from 'react'; import { Redirect } from 'react-router-dom'; import AuthLayout from './layouts/Auth'; import ErrorLayout from './layouts/Error'; import DashboardLayout from './layouts/Dashboard'; import DashboardView from './views/Dashboard'; export default [ { path: '/', exact: true, component: () => <Redirect to="/dashboard" /> }, { path: '/auth', component: AuthLayout, routes: [ { path: '/auth/login', exact: true, component: lazy(() => import('src/views/Login')) }, { component: () => <Redirect to="/errors/error-404" /> } ] }, { path: '/errors', component: ErrorLayout, routes: [ { path: '/errors/error-403', exact: true, component: lazy(() => import('src/views/Error403')) }, { path: '/errors/error-404', exact: true, component: lazy(() => import('src/views/Error404')) }, { path: '/errors/error-500', exact: true, component: lazy(() => import('src/views/Error500')) }, { component: () => <Redirect to="/errors/error-404" /> } ] }, { route: '*', component: DashboardLayout, routes: [ { path: '/dashboard', exact: true, component: DashboardView }, { path: '/users', exact: true, component: lazy(() => import('src/views/UserList')) }, { path: '/brands', exact: true, component: lazy(() => import('src/views/BrandList')) }, { path: '/brands/new', exact: true, component: lazy(() => import('src/views/BrandForm/index')) }, { path: '/brands/:id', exact: true, component: lazy(() => import('src/views/BrandDetails')) }, { path: '/users/new', exact: true, component: lazy(() => import('src/views/AddUser')) }, { path: '/users/:id', exact: true, component: lazy(() => import('src/views/UserDetails')) }, { path: '/users/:id/:tab', exact: true, component: lazy(() => import('src/views/UserDetails')) }, { path: '/users/:id/:tab/:itemId', exact: true, component: lazy(() => import('src/views/ItemDetails')) }, { path: '/service-partners/providers', exact: true, component: lazy(() => import('src/views/ProviderList')) }, { path: '/service-partners/providers/:id', exact: true, component: lazy(() => import('src/views/ProviderDetails')) }, { path: '/service-partners/services', exact: true, component: lazy(() => import('src/views/ServiceList')) }, { path: '/service-partners/services/:id', exact: true, component: lazy(() => import('src/views/ServiceDetails')) }, { path: '/service-partners/categories', exact: true, component: lazy(() => import('src/views/ServiceCategoryList')) }, { path: '/feeds', exact: true, component: lazy(() => import('src/views/PersonalFeedList')) }, { path: '/feeds/:id', exact: true, component: lazy(() => import('src/views/PersonalFeedDetails')) }, { component: () => <Redirect to="/errors/error-404" /> } ] } ];
App Structure:应用结构:
public/ index.html src/ views/ components/ index.js routes.js
Any solutions please..请任何解决方案..
By default webpack only searches node_modules
if you don't give it a relative/absoute path, so you need to add this to your webpack.config.js
to tell it to search in project root directory aswell:默认情况下,webpack 只搜索
node_modules
如果你不给它一个相对/绝对路径,所以你需要把它添加到你的webpack.config.js
告诉它在项目根目录中搜索:
module.exports = {
//...
resolve: {
modules: ['.', 'node_modules']
}
};
More info here .更多信息在这里。 Note that order here matters, it first searches in project root directory then node_modules, you can change it.
注意这里的顺序很重要,它首先在项目根目录中搜索,然后在 node_modules 中搜索,您可以更改它。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.