modules[moduleId] is undefined error is unhelpful

Do you want to request a feature or report a bug?
FEATURE – error reporting

What is the current behavior?
The webpack produces errorneous client code which pops modules[moduleId] is undefined error.

If the current behavior is a bug, please provide the steps to reproduce.
Not sure. No matter what causes this error it should be human readable.

What is the expected behavior?
The error should report whicvh module was not found or why.
If this is a feature request, what is motivation or use case for changing the behavior?
Software should be debugable.
Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

Author: Fantashit

8 thoughts on “modules[moduleId] is undefined error is unhelpful

  1. @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__);

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

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

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

  5. I found a workaround thanks to @lukeoak :

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

    webpack 4.29.3

  6. 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: gregberge/loadable-components#400

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

Comments are closed.