Is it really a incorrect bundle/chunk file or is the file in the browser cache just old?

Maybe it's fixed... Please reopen if still an issue with 1.8.4

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.

@sokra could you re-open this issue?

Could you try upgrading to the lasted version?

Done. Still an issue.

I seem to be having this issue as well. It has been happening for the past few days, not sure if it was a webpack change or a code change that caused this. Let me know if I can help provide any info to track it down.

😭I'm still seeing this issue. Using the latest version v1.11.0

Is there any progress on this issue?

I'm facing this issue only when I use ExtractTextPlugin + SplitByPathPlugin (or split by name). It goes away if I remove either one of them.

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

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

@Jokcy how exactly do you use that plugin with webpack?

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

+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 git@github.com:parametric-svg/- parametric-svg
cd parametric-svg
git checkout b5a6259b921a48cdef4c010c03ebc56fb593ea01
npm install
cd packages/parse
npm run browser-test

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

Hey, I'm getting this issue when I try to require textAngular and textAngular-santize. Any ideas on how I can get around it would be much appreciated!

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',

@apertureless
I am using version 3. But version 4 also works if I remove the <style></style> tags from the components.

My experience: I faced this error 2 times:

1. had multiple webpack configs, solved by adding contenthash in

chunkFilename: '[name].[contenthash].js',

2. had dynamic chunks with

output: {
      libraryTarget: 'umd',
    },

fixed by adding

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

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,

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 - nuxt@2.11.0
Webpack version - webpack@4.41.6

If somebody still have problems, please open a new issue with reproducible test repo

Hi everyone,

I just fix this issue by using this webpack.mix.js configuration :

const mix = require('laravel-mix');
var webpack = require('webpack');

/*
Mix Asset Management
--------------------------------------------------------------------------

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

1. Laravel 5.6
2. laravel-mix ^4.1.2
3. 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

My story with it:

webpack.prod.js - bug:

module.exports = {
  entry: {
 app: [
   'react-hot-loader/patch',
   'webpack/hot/only-dev-server',
   './src/index.js'
 ],
},
    output: {
        path:__dirname+ '/dist/',
        filename: "bundle.js",
        publicPath: '/'
    },
    devServer: {
        inline: false,
        contentBase: "./dist",
    },
    module: {
      loaders: [
        {
                test: /\.js$/,
                exclude:/node_modules/,        //exclude loader
                loader: "babel-loader"
            },
            {
                test: /\.css$/,        //css
                loader:"style-loader!css-loader"    // style
        ]
    }

};

webpack.prod.js - fix:

comment out second line in app array. webpack/hot

//'webpack/hot/only-dev-server',

@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
}

2. STEP TWO
   remove symlink and caheWithContenxt

3. STEP THREE
   remove react hot module or disable this for production

4. STEP FOUR
   remove old project name in heroku, after remove old project create new project name

TypeError: Cannot read property 'Reflect' of undefined when using reflect-metadata

never ending..

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 also encountered a similar problem in my project. After troubleshooting for a long time, I found that it might be a problem with scope hoisting enabled. Finally, I temporarily solved this problem by commenting out optimization.concatenateModules: true in the wepack configuration

@Superwzw What is webpack version?

just clear cache in my case

Why is this closed? This is still an issue

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"
    }
}

Update webpack to the latest version, also please update webpack-dev-server

@alexander-akait my webpack version is:
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"

Can you migrate on webpack v5?

Today I am facing the same issue: https://stackoverflow.com/questions/70728473/uncaught-typeerror-cannot-read-properties-of-undefined-reading-call-when-up