modules[moduleId] is undefined

[georgeboot]

Sometimes I get the following error modules[moduleId] is undefined.

Since this is a very wide webpack error, I was unable to figure out where it comes from.

When developing, I changed a new .vue files, Laravel Mix picked up the changes and it worked again. I know, things that randomly start working again, are the best.

Does anyone know why this might be happening? I first assumed it would be due to incorrect mix setup, but I doubt that.

The error happens both in dev as in production.
When it happens, the pages is completely blank and the console says one thing:

TypeError: t[e] is undefined                             bootstrap:63:3

When clicking to that location, I see:

// ...
	// The require function
 	function __webpack_require__(moduleId) {

 		// Check if module is in cache
 		if(installedModules[moduleId]) {
 			return installedModules[moduleId].exports;
 		}
 		// Create a new module (and put it into the cache)
 		var module = installedModules[moduleId] = {
 			i: moduleId,
 			l: false,
 			exports: {}
 		};

 		// Execute the module function
/* this line */ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

 		// Flag the module as loaded
 		module.l = true;

 		// Return the exports of the module
 		return module.exports;
 	}

// ...

For reference, my mix file:

const mix = require('laravel-mix')
const SentryWebpackPlugin = require('@sentry/webpack-plugin')

require('laravel-mix-tailwind')
require('laravel-mix-purgecss')

const webpackConfig = webpack => {
    const config = {
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.runtime.esm.js',
                '@': path.resolve('resources/js'),
            },
        },
        output: {
            chunkFilename: 'js/[name].js?id=[chunkhash]',
        },
    }

    if (mix.inProduction()) {
        const ASSET_URL = process.env.ASSET_URL + "/"

        config.plugins = [
            new webpack.DefinePlugin({
                "process.env.ASSET_PATH": JSON.stringify(ASSET_URL)
            }),
            new SentryWebpackPlugin({
                include: 'public',
                configFile: 'sentry.properties',
            }),
        ]

        config.output.publicPath = ASSET_URL

        mix.setResourceRoot(ASSET_URL)

        mix.sourceMaps()
        mix.purgeCss({
            whitelistPatterns: [/(^|\.)fa-/, /-fa($|\.)/, /^vs__/, /^vs--/, /^CodeMirror/, /^cm-/, /^te-/, /^tui-/],
            whitelistPatternsChildren: [/^CodeMirror/, /^cm-/, /^te-/, /^tui-/, /auto-height/],
        })
    }

    return config
}

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.postCss('resources/css/app.css', 'public/css')
mix.js('resources/js/app.js', 'public/js')

// css configs
mix.tailwind('./tailwind.config.js')

// js configs
mix.webpackConfig(webpackConfig)
mix.babelConfig({
    plugins: ['@babel/plugin-syntax-dynamic-import']
})

[reinink]

Hey @georgeboot! I'm honestly not sure what's going on here, but I don't think this is Inertia related. I'd recommend asking on the Laravel Mix repo. You may also want to try and update Mix, and even Node/NPM.

Good luck! 👍

[Kendysond]

Hi @georgeboot , please were you able to resolve this? I'm currently pulling my hair because of a similar bug

[Kendysond]

Found a solution that worked for me, I could cry now 🥺

webpack/webpack#5429 (comment)