webpack: Runtime TypeError: Cannot read property 'call' of undefined at __webpack_require__

Webpack 4.

I have some problem. I find out that problem in my css loader ExtractTextPlugin.

I set allChunks: true and this fix my problem.

By some reason separate css chunks are not supported.

PS: you can debug your problem if you set webpack

optimization: {
    namedModules: true,
    namedChunks: true
}

In that case you can SEE which module is failed to load.

I have the same issue, only in production builds. However, the problem disappeared when disabling my ad-blocker (Easy AdBlock)

Tks @vrozaev , I got this problem too using Webpack 4, react-loadable and ExtractTextPlugin.

Found a same case and solved here react-loadable Chunks loaded but code not executed

Install babel-plugin-syntax-dynamic-import and set allChunks: true fixed my problem.

Was facing this same issue after we upgraded from webpack-dev-server@3.2.1 to webpack-dev-server@3.3.1. Went back down to 3.2.1 and everything worked again.

removing dynamic imports fixed my issue

I’ve started to get this error fairly frequently after migrating to webpack 4.

I made migration from require to import(), and got same problem

The same problem when i run build mode with osx,but it works fine when i run dev mode. and when i run build mode with windows,it doesn’t have the problem.

Same problem here with webpack 4 when building assets in production mode.

When starting webpack-dev-server error was disappear.

PS. With webpack 3 works just fine.

I had the same issue when using dynamic imports, in production mode only. I need dynamic import to load locale files for js-lingui (<- hint for search engines 😃 )

When you look at Webpack’s function that executes module:

    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__);
        // Flag the module as loaded
        module.l = true;
        // Return the exports of the module
        return module.exports;
    }

In my case the moduleId 373 that I was importing dynamically did exist in installedModules (with l: false) but did not exist in modules.

When the same code was run without production mode, the module names were strings because I use the NamedModulesPlugin and this situation did not happen.

This gave me a hint that there’s some bug related to module naming. Then I tried HashedModuleIdsPlugin and it worked fine.

So, for me the fix was to use HashedModuleIdsPlugin in production and NamedModulesPlugin in dev.

Hi everyone, I’m new to webpack but I think I have made the small reproducible exemple. You can get it here : https://github.com/poillic/webpack-error-undefined.

In my case I have the issue when HMRPlugin is active.

Hope it helps 😄

Not sure if that helps anybody, but I was getting the same error when changing the path of a dynamic import without shutting down and restarting the dev server.

I’d import('./foo') which worked, but after I moved ./foo to ./bar/foo and changed the import to be import('./bar/foo') webpack would throw with Cannot read property 'call' of undefined at __webpack_require__.

Module ./foo is wrapped with hot from react-hot-loader.

Restarting the dev server fixed the issue.

Some other info: webpack@4.2.0, node dev server using webpack-dev-middleware@3.0.1 and webpack-hot-middleware@2.21.2.

I don’t have a general answer, but I have a few answers that are specific to my case that may help others debug.

This happened to me twice, and each time was because of what was likely a misconfiguration rather than a bug in Webpack itself (as far as I can tell so far). Specifically, it seems to have happened because of a mismatch between modules expected to be loaded by a chunk file, and the modules actually in that chunk file. I’m also still a bit rusty with terminology, so let me know if any of this doesn’t make sense.

1. I have a custom server implementation that uses webpack-dev-middleware. I was inadvertently not re-building one of my entrypoints, but was still serving it statically (so, an old version of the file was being served). Additionally, the generated chunks were just named [chunkId].js (i.e. 1.js, 2.js, etc). This meant that it was requesting chunks by module ID that existed on disk, but were referring to different dependencies. Hence, a chunk would load, but the modules that were loaded from this chunk were not what was expected. The fix for this was to rebuild the entry points that I had accidentally stopped building.

2. I have multiple configs that all build to the same directory and chunks were overwriting each other across different builds because their names collided. This was fixed by naming the chunks based onchunkHash rather than by module name. Doing this would also probably make the problem I had above more obvious, since the names of the requested chunks would likely be different from the actual chunk files hosted by the server.

Not sure if that’s useful or not, but I figure it may help someone else debug.

One more possible reason to get this error: I was using legacy extract-text-webpack-plugin instead of mini-css-extract-plugin.

@tonyanziano future webpack version can be incompatibility with 3.2.1 due internal bugs, you still should upgrade

@evilebottnawi

I can’t reproduce this issue when creating my own Webpack configuration. The only time I can get a consistent reproduction is when using Gatsby with loadable components which will give “WebpackError: TypeError: Cannot read property ‘call’ of undefined.” I’ve been trying to reverse engineer their webpack config to solve this but I’ve been unsuccessful.

I created a minimal repository using Gatsby to hopefully help you diagnose the problem. It doesn’t seem like anyone has been able to provide reproduction of the issue with a minimal project so I believe this minimal Gatsby project is as good as we have for now. I left some details in the README.

Tks @vrozaev , I got this problem too using Webpack 4, react-loadable and ExtractTextPlugin.

Found a same case and solved here react-loadable Chunks loaded but code not executed

Install babel-plugin-syntax-dynamic-import and set allChunks: true fixed my problem.

Thank you This helps me, but only use https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

Commenting chunkFilename and downgrading to webpack-dev-server@3.2.1 worked for me too. Cheers @tonyanziano and @aaronbeall

@evilebottnawi what’s the difference, how many bugs in the current version, if the newer version doesn’t work at all? By the way, rollback to 3.2.1 solved problem for me, thanks, @zoro00000000

I have the same problem use require.ensure. like @maciej-gurban Restarting the dev server is ok.

Description of my problem： I have to router component, like:

require.ensure([], (require)=>{
  cb(null, require('./a').default)
},'abc')

require.ensure([], (require)=>{
  cb(null, require('./b').default)
},'abc') // the same before chuck name

First started is OK！！！！，but i change：

require.ensure([], (require)=>{
  cb(null, require('./b').default)
},'ccc') // change this

have problem: Cannot read property 'call' of undefined at __webpack_require__.

Do not change anything，Just started is OK！！！！

I just sunk 3 hours into this issue. Removing dynamic import did fix my issue.

I’m still on webpack 3.11.0. This issue started happening after I upgraded from react 16.2 to 16.3 (with all the context API stuff.) React’s internal changes might be related, but maybe not.

My code structure looks like this.

I have a component UploaderToolbar that contains multiple buttons, clicking on the instagram one will open up a InstagramPicker, which goes to download and display the photos via an array of PhotoThumbnail components.

InstagramPicker is dynamically loaded, through a thin wrapper called HMLoadable, using react-loader 5.3.1.

// `uploader_toolbar.jsx`
const InstagramPicker = HMLodable({
  loader: () =>
     import(/* webpackChunkName: "instagram-picker" */ "./instagram_picker")
}); 

// `instagram_picker.jsx`
import PhotoThumbnail from "app-components/photo_thumbnail";

When the UploaderToolbar is imported on a page where PhotoThumbnail is already imported, it works just fine. Otherwise, it’d crash on this line: https://github.com/jamiebuilds/react-loadable/blob/v5.3.1/src/index.js#L199 and here is a screenshot.

Please let me know what other info you need. Thanks and I hope this is helpful.

It would be great if someone could post a small reproducible example using webpack 4. Best put this example into a github repository together with instructions how to get to the problem.

Constantly get this error when using dynamic imports. Even after updating Webpack to latest version (currently 4.3.0). Someone solved this problem (without removing dynamic imports)?

@aaronbeall children: true for CommonsChunkPlugin solve you problem?