modules[moduleId] is undefined error is unhelpful

[Darker]

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.

[nicksrandall]

I'm debugging the same issue. I'll share results.

[Kronuz]

Sounds like the same error I've got. Is moduleId === null? if so, what I found is that doing a require.ensure([] => require('./module')) from module.js or require.ensure([] => require('package')) from package/index.js results in a __webpack_require__(null), which passes moduleId as null, so modules[moduleId] is undefined.

[TheLarkInn]

Could you please add webpack version, and if possible provide a reproducible repo that we can add to our tests and debug?

[Cecilya]

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.

[coin8086]

I have a similar problem with Webpack 3.8.1 and Angular/cli 1.5.3: it is only when running in Chrome's private mode. I mean my Angular app works well except in Chrome's private mode, in which it encounters an error saying "module[moduleId] is undefined". But I don't know why by checking the error context. So it'd be nice to have something more.

[trollkotze]

Same problem here, using webpack 3.10 (@angular/cli 1.53) and 3.11 (@angular/cli 1.7.2).
Like for others, it is not reliably reproducable and also seems to happen only in a special case, albeit an important case for me, which almost reliably always throws this error.
For me, the error occurs only in Firefox when the angular app is loaded in an <iframe>.
No problems in Chrome so far (also not in private mode as for @coin8086), whether inside or outside of Iframe. But in Firefox the problem occurs only in the IFrame, and here almost always. As the Russians say: No iFrame, no problem.

Looking at the culprit, inline-bundle.js in FF dev tools (I don't even know where I would find this compiled file on my disk, where angular puts it), this seems to contain the offending code:

  // install a JSONP callback for chunk loading
  var parentJsonpFunction = window["webpackJsonp"];
  window["webpackJsonp"] = function webpackJsonpCallback(chunkIds, moreModules, executeModules) {
    // add "moreModules" to the modules object,
    // then flag all "chunkIds" as loaded and fire callback
    var moduleId, chunkId, i = 0, resolves = [], result;
    for(;i < chunkIds.length; i++) {
      chunkId = chunkIds[i];
      if(installedChunks[chunkId]) {
        resolves.push(installedChunks[chunkId][0]);
      }
      installedChunks[chunkId] = 0;
    }
    for(moduleId in moreModules) {
      if(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
        modules[moduleId] = moreModules[moduleId];
      }
    }
    if(parentJsonpFunction) parentJsonpFunction(chunkIds, moreModules, executeModules);
    while(resolves.length) {
      resolves.shift()();
    }
    if(executeModules) {
      for(i=0; i < executeModules.length; i++) {
        result = __webpack_require__(__webpack_require__.s = executeModules[i]);
      }
    }
    return result;
  };

  // The module cache
  var installedModules = {};

  // objects to store loaded and loading chunks
  var installedChunks = {
    "inline": 0
  };

  // 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
    modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

The last line there.

[andreidiaconescu]

Hello,
I have the same problem, only in Firefox (on Chrome it works).
This issue happens to me only in Firefox and only when using Angular Cli to serve the angular application using ssl:
ng serve --host adf.anais.me --ssl=true --ssl-cert "/var/www/html/adf.anais.me/ssl/development/adf.anais.me/adf.anais.me.crt" --ssl-key="/var/www/html/adf.anais.me/ssl/development/adf.anais.me/adf.anais.me.key"

[runia1]

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

[warsteiner5]

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

[MrStarktastic]

Having this issue in Safari.

[trollkotze]

@runia1 Sorry, I'm only reading this now.
No, I have not figured it out. But somehow I have not had the problem for a while now.
Currently using webpack@3.11 and angular-cli@1.7.4

Seems I have disabled live recompling on source file change as well. (Or it has disabled itself?) Maybe has something to do with that.

[BenedictRinga]

Was this ever resolved. Having similar problems now, on all browsers except Firefox mostly. HAPPENED just after implementing LAZY LOADING I suspect.

Runtime Error
Uncaught (in promise): TypeError: undefined is not an object (evaluating 'modules[moduleId].call') webpack_require@http://localhost:8100/build/vendor.js:55:29 http://localhost:8100/build/main.js:178:29 onInvoke@http://localhost:8100/build/vendor.js:5134:39 run@http://lo

ETC, ETC...

[adityak74]

I also do see this happening in the latest webpack 4.26. Is there a way to track this error down to thrash it?

[financialplugins]

Same here, webpack 4.22.0, breaks on this line:

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

Lazy loading is used within the project. Is there a workaround or a fix for this nasty error?

[jayeshagwan1]

@webthegap I am also facing same issue with lazing loading of modules. String path throws error 'Cannot find 'xxxModule' in './../xxx/xxx.module' ' Any update on this ? Its breaking in IE 11

[wmertens]

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

[ghost]

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

[rafael-garcia]

Having the same issue with Next.js and React while running the project in dev mode with hot reload enabled.

The page load fails at 1st try but on reload it works, at least on Chrome. In Safari it keeps happening.

Webpack version: 4.25.1

[DemonCloud]

Same here, webpack 4.22.0, breaks on this line:

modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

Lazy loading is used within the project. Is there a workaround or a fix for this nasty error?

Yes. I get this error

[mateusfccp]

It's happening also with me, only with Firefox. Using Angular, happened to me after inserted

    .config(['$compileProvider', function ($compileProvider) {
    	$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|javascript):/);
    }])

on my modules. Also, it's only happening in minified version (which I send to production), in the local version (which I keep unminified) it's not happening.

[aquinq]

I found a workaround thanks to @lukeoak :

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

webpack 4.29.3

[flyyang]

Is this a bug?

[leoorileo]

This is a bug that may/ may not be reproduced. Refreshing the browser page solved the problem for me.
Also the same code works perfectly fine when run on Phone

[Tarasovych]

Faced this using Vue

[smaranh]

I am facing this bug in my Angular App and found out that the problem is with the version of webpack-dev-server. I had this in my package.json,
"webpack-dev-server": "^3.1.4",

I removed the caret(^) and now it works fine. I believe there is a bug in the recent version of webpack-dev-server that might be causing this. The production builds are fine they do not have this error.

[jdozierezell]

I ran into this problem and ran yarn upgrade for the fix. In my case it was an issue with fsevents. I'm not sure if that fix is universal or specific to my case, but it might be worth a shot if you're still running into this issue.

[joornby]

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

[TheJaredWilcurt]

Had same issue in Firefox only. Sometimes on refresh it would get a little further and then die on SyntaxError: '' unterminated string literal.

I'd been running Firefox for like 2 months and apparently it was having issues loading the entire vender webpack file into memory. So I just restarted it and it started working.

[dahousecat]

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.

[hasanisaeed]

still I have this error in Firefox browser and Chrome!

[tdetugny]

webpack: 5.1.0
it seems to come from having :

• 2 files as inputs;
• and the concatenateModules option equal to true
• and to have the same import in the 2 input files

{
  
    entry: {
      ie11: './src/ie11/index.tsx',
      index: './src/index.tsx',
    },
   ...
  optimization: {
      concatenateModules: true,
  }
}

also, I'm using the code spliting but i have the same error when I add :

    plugins: [
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 1,
      }),
    ],

[tdetugny]

quick fix (dirty fix) : everything works well with: concatenateModules: false

[alexander-akait]

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

[tdetugny]

it works fine with the last webpack version 5.1.3. Thanks a lot @evilebottnawi @sokra for your fix 👍

[weilantian]

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.

[Newbytee]

it works fine with the last webpack version 5.1.3. Thanks a lot @evilebottnawi @sokra for your fix +1

Still occurs for me with webpack 5.1.3 unfortunately.

[sokra]

Please open a new issue with a repro repo

[SezerYardim]

I faced this error when i tried to use mini-css-extract-plugin. Getting back to style-loader bundled it correctly. I dont think it is a bug. It looks like some sort of webpack configuration causes this issue.

[alexander-akait]

I want to close this issue due a lot of different reported problems (and it was fixed), anyway if you faced with this bug again please open a new issue, thanks

[qkreltms]

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

[alexander-akait]

@qkreltms Please update webpack-node-externals to the latest stable version

[karlvr]

I faced this error when i tried to use mini-css-extract-plugin. Getting back to style-loader bundled it correctly. I dont think it is a bug. It looks like some sort of webpack configuration causes this issue.

I too have this issue with mini-css-extract-plugin. Stopping using it resolves the issue.

[alexander-akait]

@karlvr Please create reproducible test repo

[haringsrob]

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.

[aksperiod]

@haringsrob ah thanks, this fixed my problem. It worked in safari private.

[hocko333]

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.

This is a good solution.

[simeonpashley]

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 }

[Maksym7415]

Hey guys! what as for webpack 3.8.1? does anybody fixed it. when using optimization: { concatenateModules: false } configuration getting warning "Warning: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.

• configuration has an unknown property 'optimization'."