CODEWITHSUNDEEP
javascriptwebpackwebpack-4
user1477388
user1477388

Reputation: 21420

Webpack 4 Module Not Found

I know there are many existing questions of the same title, but they seem to either not have any suitable answers or are relating to an older version of Webpack.

I am receiving the following error upon building (webpack --mode development):

ERROR in ./scripts/eventSchedule.ts Module not found: Error: Can't resolve './Calendar' in 'C:\Source Control\My Project\scripts'

The eventSchedule.ts file exists in the same folder as Calendar.ts and contains the following import statement:

import * as Scheduler from "./Calendar";

The Calendar.ts file contains an exported class and all of this was working prior to my upgrading from Webpack 3 to Webpack 4:

export class Calendar {

These are the contents of my webpack.config.js. What can I do to resolve this error?

Please note that while wwwroot/dist/ is the output directory, nearly all of the scripts are located in scripts.

var path = require('path');
const webpack = require('webpack')

module.exports = {
    entry: {
        vendor: ['jquery', 'bootstrap', 'moment', 'fullcalendar'],
        modules: [
            './scripts/Calendar.ts'
        ],
        site: [
            './wwwroot/js/site.js',
            './scripts/onboardingFiles.ts',
            './scripts/eventFiles.ts',
            './scripts/allUsers.ts',
            './scripts/venueEquipment.ts',
            './scripts/audience.ts',
            './scripts/prerequisites.ts',
            './scripts/exportICS.ts',
            './scripts/eventSchedule.ts',
            './scripts/newHireTasks.ts',
            './scripts/upcomingEventsGrid.ts',
            './scripts/eventTypes.ts',
            './scripts/terminationTasks.ts'
        ]
    },
    output: {
        path: path.join(__dirname, 'wwwroot/dist/'),
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js',
        publicPath: '/',
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    chunks: 'initial',
                    name: 'vendor',
                    test: 'vendor',
                    enforce: true
                },
            }
        },
        runtimeChunk: true
    }
};

Upvotes: 2

Views: 1143

Answers (1)

Ioannis St.
Ioannis St.

Reputation: 11

I had the same issue with ts-loader and looking in this https://github.com/aspnet/JavaScriptServices/issues/1562#issuecomment-371545061

i noticed the following in the webpack.config.js file and it worked for me

resolve: {
    extensions: [".js", ".ts", ".tsx"]
},

Upvotes: 1

Related Questions