Uncaught TypeError: Cannot read property ‘call’ of undefined

I get the following error after an npm install (@1.5.3) (in the browser code i.e., the build goes through fine)

Uncaught TypeError: Cannot read property 'call' of undefined
2.2.js.map:1 GET http://.../static/build/2.2.js.map 404 (Not Found)

The error line is

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

Module ID 172.

The state reveals the following… what am I missing?

"id": 172,
"identifier": "/pathtorepo/js/components/pages /^\\.\\/.*$/",
"name": "./js/components/pages ^\\.\\/.*$",
"size": 3656,
"cacheable": true,
"built": true,

My async loads look like this:

               require(['../components/pages/' + pathtocomp], function(Comp) {
                     // stuff
                });

Author: Fantashit

2 thoughts on “Uncaught TypeError: Cannot read property ‘call’ of undefined

  1. Curiously adding commons chunk plugin (and then removing it) fixed it for me. Its happening on ‘one’ another colleague’s environment as well where commons isn’t fixing it.

  2. I fix this problem after remove manifest config under:

    config.plugins.push(new CommonsChunkPlugin({names: ['commons', 'manifest']}));
    

    But Is still not know the reason.

Comments are closed.

Uncaught TypeError: Cannot read property ‘call’ of undefined

I’m having an issue with webpack where if I stop watching and restart, it will build just fine, but if I edit a file and save it, the incremental build fails with this error:

Uncaught TypeError: Cannot read property ‘call’ of undefined

Hunting it down there’s a module that does not get included in the incremental change build. Best guess is the path followed to re-make the bundle file is not being followed correctly. Upon re-running (stop and start), the missing module is included.

webpack.config.js (module names changed to protect the innocent):

var webpack = require("webpack"),
    path = require('path')
    ;

module.exports = {
  entry: {
    Entry1: "./app/Entry1.js",
    Entry2: "./app/Entry2.js",
    Entry3: "./app/Entry3.js",
    Entry4: "./app/Entry4.js",
    Entry5: "./app/Entry5.js",
    Entry6: "./app/Entry6.js",
    Entry7: "./app/Entry7.js",
    Entry8: "./app/Entry8.js",
  },
  output: {
    path: path.join(__dirname, "public/js"),
    filename: "[name].bundle.js",
    chunkFilename: "[id].chunk.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, loader: 'jsx-loader'}
    ]
  },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin("shared.js")
    ]
};

Author: Fantashit

13 thoughts on “Uncaught TypeError: Cannot read property ‘call’ of undefined

  1. I’m still seeing this issue. Using the latest version v1.10.1

    First build works fine, but incremental builds fail. I get the following error from my bundle:
    Uncaught TypeError: Cannot read property 'apply' of undefined

    It seems to break on the usage of apply in this function.

    function(modules) {
        // Check all modules for deduplicated modules
        for(var i in modules) {
            if(Object.prototype.hasOwnProperty.call(modules, i)) {
                switch(typeof modules[i]) {
                case "function": break;
                case "object":
                    // Module can be created from a template
                    modules[i] = (function(_m) {
                        var args = _m.slice(1), fn = modules[_m[0]];
                        return function (a,b,c) {
                            fn.apply(this, [a,b,c].concat(args)); // Breaks here
                        };
                    }(modules[i]));
                    break;
                default:
                    // Module is a copy of another module
                    modules[i] = modules[modules[i]];
                    break;
                }
            }
        }
        return modules;
    }

    The hashes of the builds are different.

  2. Same problem here, problem occurs after watch has detected a change and builds the bundle.

    Uncaught TypeError: Cannot read property 'apply' of undefined
    

    v1.11.0

  3. it also happens on v1.12.2.

    In my case it happens in an entry point which is not included in the CommonsChunkPlugin as a chunk. If I remove the CommonsChunkPlugin it works fine.

    However, I do have a few more entry points that are not included in the CommonsChunkPlugin and they work fine. The only thing that is special with this specific entry file is that the required files are not really modules. They don’t export anything. This entry point is for the marketing site of the project and it just concatenates a few scripts so it looks like this:

    require('./about');
    require('./copy-buttons');
    require('./documentation');
    require('./get-started');
    require('./header');
    

    and these files have a few jquery stuff with no use of module.exports

  4. I am also having this issue with v1.12.2

    For me the issue goes away if I disable the DedupePlugin

    var Develop = _.merge({
      watch: true,
      plugins: [
        //new webpack.optimize.DedupePlugin(),
        new webpack.optimize.CommonsChunkPlugin("vendors", "vendors.js"),
        new webpack.ResolverPlugin(
          new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ),
        new ExtractTextPlugin("[name].css"),
      ]
    }, Common);
    
  5. The same Uncaught TypeError: Cannot read property 'call' of undefined bug on webpack 1.12.9.

    It breaks on this line in the runtime (I’ve extract the runtime in a separate chunk, and inserted it into the html):

    /******/// Execute the module function
    /******/modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
    /******/
    

    As @zbyte64 noted, disabling the DedupePlugin plugin fixes the problem.

    To reproduce:

    git clone https://github.com/kawing-chiu/flask-react-redux-example.git
    cd flask-react-redux-example
    git checkout 3b3e198a1582e8
    cd client
    npm install
    gulp build
    

    Then serve the content in the build/ directory and see the bug:

    cd build/
    python3 -m http.server 3000
    
  6. I had this issue and it turns out it was because I had 2 chrome windows open with my app. I did some changes on my app, then refreshed one of those windows to see the changes and it threw this error, and it kept showing until I closed the other window, then again refresh my window and it worked.
    Hope this helps someone.

  7. Happened to me also.
    Learned that it’s a cache issue on the server. Users where getting outdated chunks.
    I’ve fixed this with adding hash ([chunkhash]) to chunks, so the setting I’ve updated is : chunkFilename: '[id].chunk.[chunkhash].js',.

    Hope this helps someone.

  8. My experience: I faced this error 2 times:

    1. had multiple webpack configs, solved by adding contenthash in
    chunkFilename: '[name].[contenthash].js',
    
    1. had dynamic chunks with
    output: {
          libraryTarget: 'umd',
        },
    

    fixed by adding

          library: '[name]',
          umdNamedDefine: false,
    

Comments are closed.

Uncaught TypeError: Cannot read property ‘call’ of undefined

Bug report

What is the current behavior?
In webpack production mode, bundled file has error when running in the browser.

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

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './index.js',
  output: {
    filename: '[name].[hash:5].js',
    path: path.resolve(__dirname, 'public'),
    publicPath: '/'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: 'babel-loader'
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        react: {
          test: /\/node_modules\/react/,
          name: 'react',
          priority: 1
        },
        vendors: {
          name: 'vendors',
        }
      },
    },
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html'
    })
  ]
}

.babelrc

{
  "presets": [[
    "@babel/env",
    {
      "targets": {
        "esmodules": true
      },
      "modules": false
    }
  ],"@babel/react"],
  "plugins": [
    "@babel/plugin-syntax-dynamic-import"
  ]
}

index.js

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { render } from 'react-dom';
import App from './App';

render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'));

App.js

import React from 'react';

const App = () => (
  <div>
  </div>
);

export default App

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>todo app</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

and here is the react and react-router version

"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router": "^5.0.0",
"react-router-dom": "^5.0.0",

After bundled these file, open this in browser, got error like following
image

I found some moduleId is null in bootstrap.js

image

but in mode: 'development', everything is ok!

What is the expected behavior?
no any error

Other relevant information:
webpack version: v4.29.6
Node.js version: v8.11.3
Operating System: Macos mojave v10.14 (18A391)
Additional tools: none

Author: Fantashit

5 thoughts on “Uncaught TypeError: Cannot read property ‘call’ of undefined

  1. @evilebottnawi I think I have found the reason of the problem.

    With the webpack’s config above, SplitChunksPlugin extracts the entryModule of chunk main and add it to the chunk vendors, but main still has reference of entryModule. Then ModuleConcatenationPlugin concatenate modules in vendors which include the entryModule and form a new concated module. So modules list have not entryModule any more and can’t assign id to it.

    I don’t know wether I expressed myself correctly. I try to send a PR which avoid bundle entryModule to common chunks, but the logic maybe not right and can’t pass all tests.

    I want to know what’s the right logic and I can help to fix it.

  2. I’ve resolved this by adding chunk name for each dynamic import import(/* webpackChunkName: 'Filename' */ '../filename')
    add also adding this in webpack config optimization: { namedModules: true, namedChunks: true, splitChunks: { cacheGroups: { default: false } } }

  3. Can you fix this bug as soon as possible? Much lib is influence, such as “@material-ui/core” “^4.2.1”, it cost me one day to figure out this

  4. @lingxiaoguang best practices for problem solving:

    1. don’t write in old issues
    2. don’t write in other developers’s issues
    3. don’t spam
    4. open a new issue with reproducible test repo/reproducible steps
    5. do not waste time and try to find the problem yourself
    6. 🎉

Comments are closed.