Runtime TypeError: Cannot read property ‘call’ of undefined at __webpack_require__

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When I try to run my project with webpack-dev-server I get runtime error Cannot read property 'call' of undefined at __webpack_require__

If the current behavior is a bug, please provide the steps to reproduce.

Using this output configuration (which was working previously):

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    publicPath: '/',
    sourceMapFilename: '[file].map',
    chunkFilename: '[id].chunk.js'
  }

When I run webpack-dev-server using this command:

cross-env NODE_ENV=development webpack-dev-server --progress -d --inline --host 0.0.0.0

I get a bunch of runtime errors that look like this:

vendor.356edb7e8753d46064d8.js:55 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (vendor.356edb7e8753d46064d8.js:55)
    at <anonymous>

If I remove the chunkFilename:

  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    publicPath: '/',
    sourceMapFilename: '[file].map',
    // chunkFilename: '[id].chunk.js'
  }

Then it runs fine.

The entire config is here: https://gist.github.com/aaronbeall/b286eb3f2ff93bed37289f0fefbb3d3c

What is the expected behavior?

No error.

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

  • webpack@3.10.0
  • webpack-dev-server@2.9.7
  • node v8.6.0
  • OSX 10.11.6

Author: Fantashit

13 thoughts on “Runtime TypeError: Cannot read property ‘call’ of undefined at __webpack_require__

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

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

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

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

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

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

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

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

Comments are closed.