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

user_12497553 0
Viewed 3639

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

webpack reactjs lazy-loading
1 Answers

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.

user_55869140
Related