webpack: modules[moduleId] is undefined error is unhelpful

I found a workaround thanks to @LukeOak :

optimization: { concatenateModules: false, providedExports: false, usedExports: false }

webpack 4.29.3

@trollkotze were you able to figure this out? I have tracked my issue to the same like as yours: modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

I managed to fix this error by ensuring I had a chunkFilename set in the output part of my webpackConfig:

mix.webpackConfig({
    output: {
        chunkFilename: 'js/[chunkhash].js',
        path: path.resolve(__dirname, './public')
    }
})

After this instead of 0.js, 1.js, 2.js etc I had file names like d30cb23bb92d1f95b9c6.js and this error went away.

A note here, users of Safari browsers might run into this issue, If you have, try first to reproduce in google chrome or firefox.

This can be due to Safari caching too much. To fix the cache (if it works in chrome) use: CMD+ALT+E followed by a refresh CMD+R.

Hey there, I run into the similar problem with this line modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); where moduleId = null and app crash. But i didn’t get this error with dev mode. So i try to play with default production webpack configuration and disabling option optimization.concatenateModules resolved this problem (and slightly increase bundle size)

webpack: 4.28.2

I found a workaround thanks to @lukeoak :

optimization: { concatenateModules: false, providedExports: false, usedExports: false }

webpack 4.29.3

module.exports = {
    configureWebpack: config => {
        optimization = {
            concatenateModules: false,
            providedExports: false,
            usedExports: false
        }
    }
}

This works for me in a Vue.js project, if you are working on a Vue.js project and have this problem in Safari / Firefox, create a vue.config.js file in the root, put these in the file, and save, run serve command again, your Safari and Firefox shouldn’t show the same error again.

I’ve run into a similar stack trace as this one.

in Route
    in withRouter(Connect(TechDiffErrorBoundaryView))
    in Router
    in Provider" stack="TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (http://local:3000/[filea].[hash].js)
    at Object../src/form-controls/FormSingleDateInput/FormSingleDateInput.js (http://local:3000/[fileb].[hash].js)
    at __webpack_require__ (http://local:3000/[filea].[hash])
    at Object../src/form-controls/FormSingleDateInput/index.js (http://local:3000/[fileb].[hash])

Environment:

React: 16.8.6
@loadable/component: 5.2.2
react-router-dom: 5.0.0

We use a mix of server side rendered pages, single page applications, and code chunking in order to enhance the user experience on our application. This particular stack trace occurs when @loadable/component thinks the module is loaded by checking if it exists in __webpack_modules__ and attempts to load it with __webpack_require__(moduleId). The problem is that the module itself is loaded, but one of the chunks it depends on hasn’t finished yet. @loadable/component’s attempts to wait for the chunks to finish on the first load, but if the user is quick enough, or their connection is slow enough they can navigate away from the page that’s loading the chunks+modules and navigate back. When the user returns to the first page it’s possible that the module is loaded, and the chunk is not.

After a quick search through documentation, and looking through our compiled code, there doesn’t seem to be a way to check if the chunks for a module are finished loading. Webpack keeps track of this in an object called installedChunks, but does not seem to expose that like they expose __webpack_modules__.

Has anyone else seen this or solved it some way?

EDIT

I found a bit of time and created a repro application at: https://github.com/ColinxLLC/webpack-undefined-chunk-repro

Notably, in my case this is not webpack’s fault. However, after a bunch of searching around there doesn’t seem to be a webpack sanctioned method to synchronously figure out if a module and its required chunks are finished downloading/loaded.

I’m also actively discussing this issue on: https://github.com/smooth-code/loadable-components/issues/400

I’m currently enjoying this, only on hot reload. What’s happening is that in the webpack bootstrap, installedModules[moduleId] exists, but modules[moduleId] doesn’t exist. Not sure how this can happen, I can’t find the code in the repo.

Webpack 4.28.4

still I have this error in Firefox browser and Chrome!

I have the same issue by in IE. There is no problem in another browsers. A few days ago everything was work fine.

Having this issue in Safari.

Just incase this helps anyone, my use case is an Apollo GraphQL server running on NodeJS v14. Docker file base is FROM node:14.17.3-alpine, Webpack 5.57.1. This isn’t an app running in a browser, it’s a single monolith JS server file.

@aquinq comment from 2019 is still a relevant fix for and same random runtime issue.

optimization: { concatenateModules: false, providedExports: false, usedExports: false }

Had this same issue and just found out that for my vuejs project, it was due to the fact that i had style tags in my single file components which were being dynamically imported.

After removing the styles, dynamic imports worked again. Seems like a known issue

For anyone still having this issue, I got this error while running webpack 4.32.2 on Firefox. Refreshing the page was not enough but restarting the browser did the trick 🤷‍♂️

I had similar issue modules[moduleId] is not a function it was due to webpack-node-externals.

@tdetugny please try to latest version, if it is not help, create reproducible test repo, thanks

I have the same problem, unfortunately not reliably reproducable - mostly the produced code runs fine but sometimes I get the module[moduleId] is undefined error. Normally the error is resolved after refreshing the page, but currently I’m lucky if the page loads after 10 refreshs. Rerunning webpack doesn’t seem to help, neither does removing node_modules and reinstalling.

Webpack: 3.10.0 Node: 6.10.0 Firefox: 58.0.2

If it helps, I’m running webpack with Angular CLI 1.6.5.