[React Webpack]: Module not found: Error: Can't resolve 'src/views/UserList' in 'C:\Users\…'

Question

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:....'

My 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:

 /* 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..

Answer 1

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:

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.