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")
  imranmali, asadmalik3, marks-chan, yve2, nakulkundaliya, AmrAbuElyazid, tomalexhughes, jaisonjjames, daalvand, Thomas-Sparber, and 72 more reacted with thumbs up emoji
  brenjt, qqqian0819, YAS-SIIN, androidovshchik, SergioGeeK7, farums, marcelovicentegc, SeyamMs, Herz3h, alisalmabadi, and 8 more reacted with laugh emoji
  AhmadWaleed, shahidkarimi, marcelovicentegc, lukasborawski, anshulgupta1996, MikePineda, MarceloBritoWD, deboraornellas, and xYazz reacted with hooray emoji
  kilanny, soheilhbr, mrjohniet, samboylett, thuongnn-0898, bpetitcollot, MikePineda, MarceloBritoWD, and delvinalfredo reacted with confused emoji
  SergioGeeK7, farums, shahidkarimi, marcelovicentegc, kenanaReda, Mathias29, MikePineda, MarceloBritoWD, rosiecakes, jagjeet-njgraphica, and 5 more reacted with heart emoji
  shahidkarimi, kenanaReda, tabrez96, marcelovicentegc, MarceloBritoWD, deboraornellas, and xYazz reacted with rocket emoji
  kl29, datduyng, MarceloBritoWD, and zwbcc reacted with eyes emoji
    All reactions
          
It is really an incorrect bundle/chunk, I've flushed the browser to make sure of that.

Essentially, the module trying to be required is 100% missing on an incremental watch build.

Doesn't happen all the time.
For instance, using reactjs key mirror, on a list of constants, I'd require('react/lib/keyMirror'). On first build, no problem. On watch build, keyMirror module is completely missing from the file where it used to be.
          
I'm still having this issue with 1.8.4. Pretty much the same setup as @kfancy, except my loader is jsx-loader?harmony
Worth mentioning is that it started happening after upgrading to react 0.13.1. I was porting code from 0.12 and didn't have issues even with webpack 1.7.2. Upgraded react, started having the issue, upgraded webpack to 1.8.4, and the issue still persist. I even removed the CommonsChunckPlugin to see if that would fix the problem, but no luck with that either.
I'm also getting random errors like Uncaught Error: Cannot find module "classnames" every now and then, only when running --watch.
          
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.
          
It has something do with our entry points:
We have issues when we use:
context: __dirname + '/project_name/static/js',
entry: {
        'static/dist/js/app': './components/app.js',
        'static/dist/js/log-in': './components/log-in.js',
        'static/dist/js/widget-a': './widgets/widget-a.js',
        'tests/testBundle': '../../tests/test.js', // removing this line fixes things
    output: {
        path: __dirname + '/project_name',
        filename: '[name].js',
        sourceMapFileName: '[file].map'
When removing testBundle things work nicely. Strangely enough the bundle throwing the error is actually app.js
PS: Sorry for the strange file system. We should address this once we have the chance.
          
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
  NicholasMKim, stianwestvig, towry, Arrow7000, joshuakcockrell, llewan, alfaslash, plh97, spmsupun, karljv, and 8 more reacted with thumbs up emoji
  charlesxx and shahidkarimi reacted with thumbs down emoji
    All reactions
          
Same problem here.
Quite difficult to understand exactly how to reproduce the problem, but it seems to happen more frequently when I edit a symlinked module or simply a module inside node_modules during a watch build.
v1.12.1
          
maybe you have some module in umd factory like this:
(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        /* AMD. Register as an anonymous module. */
        define(['require', 'exports'], factory);
    } else if (typeof exports === 'object') {
        /* CommonJS */
        factory(require, exports);
    } else {
        /* Browser globals - dangerous */
        factory(function(moduleName) { return root[moduleName]; }, root);
}(this, function (require, exports) {
    var _ = require("lodash");
maybe umd-require-webpack-plugin will help
          
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
          
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);
  ramboza, developit, alex-mm, mrbinky3000, kachkaev, louy, nodkz, shinygang, edbzn, kalyanallampalli, and 25 more reacted with thumbs up emoji
  infacq, vforge, shaktihicom, techmexdev, momenbasel, and marochmielo reacted with thumbs down emoji
  zackify, jcreamer898, developit, AminHuang, ielgnaw, HarshithaGandamalla, shaktihicom, and EarlOld reacted with laugh emoji
  ramboza, developit, kachkaev, ielgnaw, scarney81, perevezencev, candywxt, tomeightyeight, shaktihicom, XiaoY0324, and 4 more reacted with hooray emoji
  yangheng, XiaoY0324, franksoftgrid, and russell-dot-js reacted with heart emoji
    All reactions
          
+1 Have same issue when run karma in watch mode.

Workaround  remove entry property of webpack config object in karma.conf.js
    delete webpackConf.entry;




    

          
I have the same problem since I’ve symlinked my node_modules/ folder of a package to the root node_modules/ in a monorepo.
To reproduce:
git clone [email protected]:parametric-svg/- parametric-svg
cd parametric-svg
git checkout b5a6259b921a48cdef4c010c03ebc56fb593ea01
npm install
cd packages/parse
npm run browser-test
      
HMR provided by webpack crashes, with the error: "Uncaught TypeError:
Cannot read property 'apply' of undefine" as shown in the following
issue on github:
webpack/webpack#959
I'm not exactly sure what this issue is, as the cause isn't quite clear
to me from reading the bug report. But the latest code changes seemed to
have resolved the problem, as all of the root level modules that have
side-effects now properly support hot code reloading. This required
significant refactoring, and undoubtedly will require yet more.
The current issue is that whenever a change is made, a full reload is
required, and the only hint of issue is the following error message:
"[HMR] Error: Aborted because 125 is not accepted". Checking the file
that comes back from webpack indeed shows that 125 is empty. I'm
guessing this is some dependency such as freezer, rx, or what have you
that is causing the hot reload to fail.
          
We're seeing this too in our app.
Uncaught TypeError: Cannot read property 'setPrototypeOf' of undefined(anonymous function) 
@ set-prototype-of.js:1__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71(anonymous function) @ application.bundle.js:25900__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71(anonymous function) @ inherits.js:5__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71(anonymous function) @ Dock.js:3__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71(anonymous function) @ index.js:7__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71(anonymous function) @ DockMonitor.js:19__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71(anonymous function) @ index.js:5__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71(anonymous function) @ Pagination.component.js:17__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71createStore @ createStore.js:18(anonymous function) @ index.js:10__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71(anonymous function) @ numberFormatInputs.js:25__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71webpackContext @ src Rails.js$:7(anonymous function) @ application.js:46(anonymous function) @ application.js:43__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71(anonymous function) @ application.bundle.js:5__webpack_require__ @ bootstrap 8aa52402241fffbcfe8b:71webpackJsonpCallback @ bootstrap 8aa52402241fffbcfe8b:42(anonymous function) @ application.bundle.js:1
VM62167:1 Uncaught ReferenceError: railsExports is not defined(anonymous function) @ VM62167:1window.ReactRailsUJS.mountComponents @ vendor.sprockets.js:1655(anonymous function) @ vendor.sprockets.js:1709fire @ jquery.js:3099self.fireWith @ jquery.js:3211jQuery.extend.ready @ jquery.js:3417completed @ jquery.js:3433
Occassionally it's also cannot read property apply of undefined. The culprit is typically a missing dependency from core-js. In the digging I did, I found that the missing file was included by react-dock which uses the static keyword from babel's es7 support. Could be a red herring, but our app only declares support for es6, so I'm wondering if maybe on an incremental rebuild it's not rebuilding react-dock (or anything else using es7-specific code from core-js) and therefore rebuilds the core-js dep with only things needed for es6 support.
Obviously this is only a hunch. I'm at a loss as to how to prove this. It happens sporadically, but probably a couple times per hour. It's also hard to tell if it's a problem with webpack, babel-loader, react-dock (not very likely) or something else.
To determine the above, I set the debugger to stop on uncaught exceptions and followed the stack trace down to where react-dock was calling setPrototypeOf.
Is anyone experiencing the issue in the same way I am? Or is this just different for everyone?
          
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
          
In my case, I was getting the error because I was attempting to import files already packaged by webpack for production but I didn't package them properly. The "properly" part required that I specify:
library: 'someName', // Having a value here is important
libraryTarget: 'umd',
          
My experience: I faced this error 2 times:
had multiple webpack configs, solved by adding contenthash in
chunkFilename: '[name].[contenthash].js',
had dynamic chunks with
output: {
      libraryTarget: 'umd',
fixed by adding
      library: '[name]',
      umdNamedDefine: false,
My experience: I faced this error 2 times:
had multiple webpack configs, solved by adding contenthash in
chunkFilename: '[name].[contenthash].js',
had dynamic chunks with
output: {
      libraryTarget: 'umd',
fixed by adding
      library: '[name]',
      umdNamedDefine: false,
This seemed to work for me. The bug occurred to me when using another webpack built UMD library. I confused the target for your solution to be the external webpack file of the library, it isn't, just the regular one in the master project.
SIGH time to go home...
          
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined - runtime js - on production
Browser - Chrome

Nuxt version - [email protected]

Webpack version - [email protected]
I just fix this issue by using this webpack.mix.js configuration :
const mix = require('laravel-mix');

var webpack = require('webpack');
| Mix provides a clean, fluent API for defining some Webpack build steps

| for your Laravel application. By default, we are compiling the Sass

| file for the application as well as bundling up all the JS files.

mix.js('resources/js/app.js', 'public/js')

// .extract(['vue'])

// .sass('resources/sass/app.scss', 'public/css')

.webpackConfig({

output: {

publicPath: '/public/',

chunkFilename: '[id].chunk.[chunkhash].js'

plugins: [

new webpack.IgnorePlugin(/^./locale$/, /moment$/)

.version();

I'm using :
Laravel 5.6
laravel-mix ^4.1.2
vue ^2.6.10
The point to change is at publicPath.

By default chunkFilename will save the file at public folder on Laravel framework, as long as we are not put folder name before the chunkFilename.

example : js/[id].chunk.[chunkhash].js will automatically save the file on public/js/ folder

if we dont put any folder name before the chunkFilename, all the file will save on public folder on Laravel.
So laravel will find the generated chunkFilename from public folder.

There is a different path between using laravel on our local PC and on the server
If we run Laravel on our local PC, we usually use command php artisan serve. And if we want to call a file inside public folder, we don't need to put public on url when you call a file.

example : http://localhost:8080/app.js
but at the server we need to put public folder.

example : https://yoursite.com/public/app.js
That's why i set publicPath: '/public/' to tell the laravel that my chunkFilename generated inside public folder
I don't need to downgrade my laravel-mix.

Hope this help anyone that still have the problem
@apertureless

I am using version 3. But version 4 also works if I remove the <style></style> tags from the components.
I had the same problem with this error message. I removed a empty style tag in my newly added component that cause the issue:
<style scoped>
</style>
After that it worked again!
          
follow step by step this solution for fix this problem, working with me using webpack 4
1.STEP ONE

output: {

library: '[name]',

umdNamedDefine: false

optimization: {

concatenateModules: false,

providedExports: false,

usedExports: false

STEP TWO

remove symlink and caheWithContenxt
STEP THREE

remove react hot module or disable this for production
STEP FOUR

remove old project name in heroku, after remove old project create new project name
          
Was able to fix it with a combination of chunk hashing and webpack route prefetching. The prefetching logic prevents the client from requesting outdated chunks, and the chunk hashing forces the chunks to update once new ones are available server side. With only one or the other, chunks either crash or fail to update. I believe this is because we have code splitting implemented in our react appRoot.
I would also like to note the often proposed solution of adding chunksSortMode: 'dependency' completely broke our update cycle and prevented the app from properly updating at all. I dont recommend it for production code.
My fix: (Webpack 4.46.0 & react 16.14.0 with HtmlWebpackPlugin)
In webpack config, in output, add chunkFilename: '[id].chunk.[chunkhash].js', as proposed by @nicolaelitvac
In your app router add prefectching resource hints to your route pages https://webpack.js.org/guides/code-splitting/#prefetchingpreloading-modules import(/* webpackPrefetch: true */ './path/to/SettingsPage.js');
Note: This solution only worked perfectly after the second app update as the prefetching logic must be live on the client to prevent loading outdated chunks.
Edit: This did not entirely fix our issue and the problem persists :(
          
I can confirm this is still an issue.
I am using webpack 5.30 and vue 2.6.11
I am trying to implement lazy loading on our already existing vue app to reduce our bundle size.  Here is how I am importing the component:
const ManageSupport = () => import(/* webpackChunkName: "view-support" */ 'components/helpdesk/view-support')
The chunk is created successfully, based on this webpack output: asset view-support.js 29.4 KiB [emitted] (name: view-support)
When trying to navigate to that route, I keep getting (consistently) the error

`[vue-router] Failed to resolve async component default: TypeError: Cannot read property 'call' of undefined
TypeError: Cannot read property 'call' of undefined

at webpack_require (main.js:26989)

at Function.fn (main.js:27159)`
A snippet from main.js where the error is thrown:
// Execute the module function
/******/ 		try {
/******/ 			var execOptions = { id: moduleId, module: module, factory: __webpack_modules__[moduleId], require: __webpack_require__ };
/******/ 			__webpack_require__.i.forEach(function(handler) { handler(execOptions); });
/******/ 			module = execOptions.module;
/******/ (error here)execOptions.factory.call(module.exports, module, module.exports, execOptions.require);
/******/ 		} catch(e) {
/******/ 			module.error = e;
/******/ 			throw e;
/******/ 		}
My webpack configuration:
const webpack = require('webpack');
const { VueLoaderPlugin } = require("vue-loader")
const TerserPlugin = require("terser-webpack-plugin")
const CompressionPlugin = require('compression-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const bundleOutputDir = './wwwroot/dist';
module.exports = (env) => {
    const isDevBuild = env.prod != 'true';
    console.log("Starting webpack " + (isDevBuild ? "Dev" : "Prod") + " Build (main.js)")
    return {
        mode: isDevBuild ? 'development' : 'production',
        target: isDevBuild ? false : ['web', 'es5'],
        entry: './ClientApp/boot-app.js',
        output: {
            path: path.resolve(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: '/dist/'
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue',
                'components': path.resolve(__dirname, './ClientApp/components'),
                'views': path.resolve(__dirname, './ClientApp/views'),
                'utils': path.resolve(__dirname, './ClientApp/utils')
            extensions: ["*", ".js", ".vue", ".json"]
        module: {
            rules: [
                // Vue
                { test: /\.vue$/, loader: "vue-loader", exclude: /node_modules/ },
                // CSS
                { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
                    test: /\.m?js/,
                    resolve: {
                        fullySpecified: false
                // JavaScript
                    test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader',
                    exclude: file => (
                        /node_modules/.test(file) &&
                        !/\.vue\.js/.test(file)
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
        plugins: [
            new MiniCssExtractPlugin({ filename: "site.css" }),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: path.join(__dirname, 'wwwroot', 'dist', 'vendor-manifest.json')
            new VueLoaderPlugin(),
            new FriendlyErrorsWebpackPlugin(),
        ].concat(
            isDevBuild ? [
                // Dev-only dependencies
            ] : [
                    // Prod-only dependencies
                    new CompressionPlugin({
                        filename: '[path][base]',
                        test: /\.(js|css|svg|json)$/,
                        deleteOriginalAssets: true
        optimization: isDevBuild ? {} : {
            minimize: true,
            minimizer: [new TerserPlugin({
                test: /\.js(\?.*)?$/i,
        cache: true
My package.json
    "scripts": {
        "build": "cross-env webpack --progress --no-devtool --config webpack.config.js --env prod=true",
        "start": "NODE_OPTIONS=--max_old_space_size=4096 webpack serve --progress --hot --hot-only --config webpack.config.js --content-base 'wwwroot' --env prod=false",
        "vendor": "webpack --config webpack.config.vendor.js --env prod=false --progress --stats-error-details",
        "app": "cross-env NODE_OPTIONS=--max_old_space_size=4096 webpack --progress --config webpack.config.js --env prod=false",
        "help": "webpack --help"
    "dependencies": {
        "@babel/plugin-transform-runtime": "^7.13.10",
        "@fortawesome/fontawesome-svg-core": "^1.2.28",
        "@fortawesome/free-brands-svg-icons": "^5.13.0",
        "@fortawesome/pro-light-svg-icons": "^5.13.0",
        "@fortawesome/pro-regular-svg-icons": "^5.13.0",
        "@fortawesome/pro-solid-svg-icons": "^5.13.0",
        "@fortawesome/vue-fontawesome": "^0.1.9",
        "@microsoft/signalr": "=3.1.6",
        "axios": "^0.21.1",
        "core-js": "^2.6.11",
        "epsg-index": "^1.0.0",
        "font-awesome": "^4.6.3",
        "lodash": "^4.17.19",
        "moment": "^2.24.0",
        "moment-mini": "^2.24.0",
        "vue": "^2.6.11",
        "vue-router": "^2.1.1",
        "vue-template-compiler": "^2.6.11",
        "vuex": "^2.1.1",
        "vuex-persistedstate": "^2.5.4",
        "vuex-router-sync": "^4.0.1"
    "devDependencies": {
        "@babel/core": "^7.13.14",
        "@babel/plugin-proposal-class-properties": "^7.13.0",
        "@babel/preset-env": "^7.13.12",
        "babel-loader": "^8.2.2",
        "bootstrap": "^3.3.6",
        "compression-webpack-plugin": "^7.1.2",
        "cross-env": "^3.1.3",
        "css-loader": "^5.2.1",
        "event-source-polyfill": "^0.0.7",
        "friendly-errors-webpack-plugin": "^1.7.0",
        "file-loader": "^6.2.0",
        "html-webpack-plugin": "^5.3.1",
        "jquery": "^2.2.1",
        "lodash-webpack-plugin": "^0.11.5",
        "mini-css-extract-plugin": "^1.4.1",
        "optimize-css-assets-webpack-plugin": "^5.0.4",
        "postcss-loader": "^5.2.0",
        "postcss-preset-env": "^6.7.0",
        "scope-loader": "^1.0.3",
        "spectacle-docs": "^1.0.7",
        "style-loader": "^2.0.0",
        "url-loader": "^0.5.7",
        "vue-loader": "^15.9.6",
        "webpack": "^5.30.0",
        "webpack-cli": "^4.6.0",
        "webpack-dev-server": "^3.11.2",
        "webpack-hot-middleware": "^2.12.2"