New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpack 4.10.0 destroys production build #7425

Closed
tomasztomys opened this Issue May 29, 2018 · 32 comments

Comments

Projects
None yet
@tomasztomys

tomasztomys commented May 29, 2018

Bug report

What is the current behavior?
Uncaught TypeError: Cannot read property 'call' of undefined
in different projects, only in production build, only after update from 4.9.2 to 4.10.0

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

What is the expected behavior?
not error

Other relevant information:
webpack version: 4.10.0
Node.js version: 10.1.0
Operating System: Windows and Linux
Additional tools: -

in webpack.build.js:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const merge = require('webpack-merge');
const Webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');

const config = require('./config');

const publicPath = process.env.npm_package_config_public_path;

module.exports = merge(config, {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.s?css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ]
      }
    ],
  },
  mode: 'production',
  output: {
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].chunk.js',
    publicPath: publicPath,
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          name: 'vendor',
          chunks: 'initial',
          enforce: true
        }
      }
    },
    minimize: true,
    runtimeChunk: {
      name: 'vendor'
    }
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[chunkhash].css',
      chunkFilename: '[name].[chunkhash].css'
    })
  ],
});
@sokra

This comment has been minimized.

Member

sokra commented May 29, 2018

Thanks for your report. It would be great if you reduce your issue to a small reproducible example. Best put this example into a github repository together with instructions how to get to the problem.

Or please provide a stack trace with copies of the lines in the stacktrace.

@mieszko4

This comment has been minimized.

mieszko4 commented May 29, 2018

I have problem with production build, too.
4.10.0 and 4.10.1 fails with the following:

ERROR in chunk about-us
assets/276.2732141f9c704103bdef.css
/home/milosz/ivyspace/ivyspace-frontend/node_modules/babel-loader/lib/index.js??ref--4!/home/milosz/ivyspace/ivyspace-frontend/frontend/scripts/features/public/aboutUs/components/Details.js
RuntimeTemplate.moduleId(): Module /home/milosz/ivyspace/ivyspace-frontend/node_modules/lodash-es/camelCase.js has no id. This should not happen.

ERROR in chunk app [entry]
assets/app.2732141f9c704103bdef.css
/home/milosz/ivyspace/ivyspace-frontend/node_modules/babel-loader/lib/index.js??ref--4!/home/milosz/ivyspace/ivyspace-frontend/frontend/scripts/features/common/components/ScreenSizeManager.js
RuntimeTemplate.moduleId(): Module /home/milosz/ivyspace/ivyspace-frontend/node_modules/lodash-es/debounce.js has no id. This should not happen.

4.9.2 builds fine.

@joemewes

This comment has been minimized.

joemewes commented May 29, 2018

we're also experiencing this issue. webpack 4.10.1

ERROR in chunk client [entry]
    [name].[chunkhash:8].js
    /.../node_modules/babel-loader/lib/index.js??ref--4!/.../src/modules/users.js
    RuntimeTemplate.moduleId(): Module /.../node_modules/redux-form/es/SubmissionError.js has no id. This should not happen.

changing mode to 'development' in webpack.config.js resolves the issue, so is definitely related to production mode.

Any steps we can take to help debug, please let me know, and I can contribute updates to this issue.

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented May 29, 2018

Looks like regression, somebody can create minimum reproducible test repo?

@joemewes

This comment has been minimized.

joemewes commented May 29, 2018

@evilebottnawi interesting. I can't reproduce with simple repo. so may be more to it. Endeavouring to reproduce outside current bloated project.

@huineng

This comment has been minimized.

huineng commented May 30, 2018

these are my errors

public/js/[name][chunkhash].js
/home/pipeline/63551784-fde3-4803-96e3-0610fccde3c5/node_modules/strip-loader/lib/index.js?strip[]=console.info,strip[]=console.log!/home/pipeline/63551784-fde3-4803-96e3-0610fccde3c5/node_modules/@sets/es-esw-dynamic-forms/lib/dynamic-form/construct/components/df.form.component.js
RuntimeTemplate.moduleId(): Module /home/pipeline/63551784-fde3-4803-96e3-0610fccde3c5/node_modules/strip-loader/lib/index.js?strip[]=console.info,strip[]=console.log!/home/pipeline/63551784-fde3-4803-96e3-0610fccde3c5/node_modules/lodash-es/forEach.js has no id. This should not happen.

ERROR in chunk app [entry]
public/js/bundle[chunkhash].js
/home/pipeline/63551784-fde3-4803-96e3-0610fccde3c5/node_modules/strip-loader/lib/index.js?strip[]=console.info,strip[]=console.log!/home/pipeline/63551784-fde3-4803-96e3-0610fccde3c5/node_modules/@angular/core/fesm5/core.js
RuntimeTemplate.moduleId(): Module /home/pipeline/63551784-fde3-4803-96e3-0610fccde3c5/node_modules/strip-loader/lib/index.js?strip[]=console.info,strip[]=console.log!/home/pipeline/63551784-fde3-4803-96e3-0610fccde3c5/node_modules/rxjs/_esm5/internal/Observable.js has no id. This should not happen.
@sokra

This comment has been minimized.

Member

sokra commented May 30, 2018

@tomasztomys could you please try 4.10.2?

@jeremejevs

This comment has been minimized.

jeremejevs commented May 30, 2018

@sokra Appears to be fixed (was having what @mieszko4 was having previously). Thanks!

@swernerx

This comment has been minimized.

Contributor

swernerx commented May 30, 2018

This was my original issue:

ERROR in chunk main [entry]
main-240b36fe47f735bd8184.css
/Users/swerner/Workspace/init/display/node_modules/source-map-loader/index.js??ref--4!/Users/swerner/Workspace/init/display/node_modules/edge-core/lib/browser.es5.esm.js
RuntimeTemplate.moduleId(): Module /Users/swerner/Workspace/init/display/node_modules/apollo-client/ApolloClient.js has no id. This should not happen.

Seems like the update to 4.10.2 fixed it! Thanks @sokra.

@mieszko4

This comment has been minimized.

mieszko4 commented May 30, 2018

I confirm 4.10.2 works for me! Thanx!

@kesne

This comment has been minimized.

kesne commented May 31, 2018

I am running into this in my app also in production. I'm still seeing this in 4.10.2.

Based on the comments in this thread it looks like there might be two issues:

  1. The originally reported Uncaught TypeError: Cannot read property 'call' of undefined.
  2. The has no id. This should not happen.

For us, we're only experiencing the 1st issue.

@tomasztomys

This comment has been minimized.

tomasztomys commented May 31, 2018

It works now

@dagstuan

This comment has been minimized.

dagstuan commented May 31, 2018

I can confirm that an issue still exists in 4.10.2. I'm getting Unhandled promise rejection TypeError: Cannot read property 'call' of undefined when building in production with 4.10.2. 4.9.2 works fine.

@evilebottnawi

This comment has been minimized.

Member

evilebottnawi commented May 31, 2018

@dagstuan can you create minimum reproducible test repo?

@dagstuan

This comment has been minimized.

dagstuan commented May 31, 2018

@evilebottnawi I cant seem to be able to reproduce it in a minimal repo, but the full stack trace is as follows:

Unhandled promise rejection TypeError: Cannot read property 'call' of undefined
    at o (bootstrap:81)
    at Object.288 (immutable.js:37)
    at o (bootstrap:81)
    at Object.313 (formWarning.js:41)
    at o (bootstrap:81)
    at Object.522 (formActions.js:44)
    at o (bootstrap:81)
    at Module.<anonymous> (cc78b3ce504028caff47.js:1)
    at Module.296 (rollout.js:13)
    at o (bootstrap:81)
    at .*\.js$ namespace object:168
    at a (es6.promise.js:75)
    at es6.promise.js:92
    at MutationObserver.c (_microtask.js:18)

It seems to crash when trying to import something that is re-exported from redux-form. The relevant source file in redux form is here: https://github.com/erikras/redux-form/blob/master/src/immutable.js

@mattkrick

This comment has been minimized.

mattkrick commented May 31, 2018

it's happening in v4.10.2 with redux-form for me too.
The missing moduleId is 1022, which I can trace to:
var _SubmissionError__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(1022);
@dagstuan i notice it's borking with your promise rejection, can you confirm that removing the SubmissionError import fixes it?

@sokra it's hardly minimal, but if you need a repo to test it with, you can use https://github.com/ParabolInc/action/tree/27bc61b3d66ef1dfde026d09e96bb588fb609b45. call git checkout 27bc61b3d66ef1dfde026d09e96bb588fb609b45 and run yarn bs to build and start the server on localhost:3000. you'll see the error right away in the browser console (the error only exists on that commit).

Full stack trace

bootstrap:81 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (bootstrap:81)
    at Object.149 (_nodeUtil.js:30)
    at __webpack_require__ (bootstrap:81)
    at Object.160 (app_a4a32c429d4825e19a8b.js:1354)
    at __webpack_require__ (bootstrap:81)
    at Module.241 (app_a4a32c429d4825e19a8b.js:2357)
    at __webpack_require__ (bootstrap:81)
    at checkDeferredModules (bootstrap:43)
    at bootstrap:216
    at bootstrap:216
@dagstuan

This comment has been minimized.

dagstuan commented Jun 1, 2018

@mattkrick removing imports to SubmissionError didn't fix the issue for me. So I must be importing something else somewhere that makes it crash :)

@ematipico

This comment has been minimized.

ematipico commented Jun 1, 2018

I don't want to speculate, but maybe the library is exporting something that has some side effects? And by doing that it breaks the tree shaking? I noticed that the recent fixes regard the sideEffects... just wondering

@kelkes

This comment has been minimized.

kelkes commented Jun 5, 2018

Stil got the same error bootstrap:2 Uncaught TypeError: Cannot read property 'call' of undefined with webpack 4.11.0

@sokra

This comment has been minimized.

Member

sokra commented Jun 5, 2018

This issue got a bit confusing, some reporting it fixed, some reporting broken. I closed this now as the original poster reports it fixed. If you still have the issue, please open a new issue with stack trace and repro repo.

@sokra sokra closed this Jun 5, 2018

@sod

This comment has been minimized.

sod commented Jun 6, 2018

Couldn't fiddle together a reproduction yet, but downgrading to webpack 4.9.2 indeed works.

@sod

This comment has been minimized.

sod commented Jun 6, 2018

A fix that worked for me with webpack 4.11.1:

I use rxjs 6.2 with the rxjs-compat module. If I change the add operator imports from:

import 'rxjs/add/operator/delay';
import 'rxjs/add/operator/skip';
/* ... */

to:

import 'rxjs-compat/add/operator/delay';
import 'rxjs-compat/add/operator/skip';
/* ... */

The issue goes away.

@Yang-025

This comment has been minimized.

Yang-025 commented Jun 11, 2018

I encounter this issue only in production build.
I try the below version

4.1.0 ---> build success
4.9.2 ---> build success
4.10.0 ---> build fail
4.10.1 ---> build fail
4.10.2 ---> build fail

I have 2 type of build fail message:

Sometimes is this(in terminal):

        ERROR in chunk Auth
        js/[name].[hash].js
        /Users/My_Project/node_modules/babel-loader/lib/index.js!/Users/My_Project/src/features/Auth/LoginForm.js
        RuntimeTemplate.moduleId(): Module /Users/My_Project/node_modules/redux-form/es/Field.js has no id. This should not happen.

        ERROR in chunk bundle [entry]
        js/[name].[hash].js
        /Users/My_Project/node_modules/babel-loader/lib/index.js!/Users/My_Project/src/features/TestImgAndCss/TestImgAndCssEpics.js
        RuntimeTemplate.moduleId(): Module /Users/My_Project/node_modules/redux-observable/lib/esm/operators.js has no id. This should not happen.

Sometimes is this(build success, but open file in browser has error):

        Uncaught TypeError: Cannot read property 'call' of undefined

And I found it can be fixed after removing the vendor in my entry setting at version 4.10.2. 4.10.0 still not working

from

      const config = {
        mode: 'production',
        entry: {
          bundle: ['babel-polyfill', './src/index.js'],
          vendor: [
            'lodash', 'react', 'react-dom',
            'react-redux', 'react-router', 'redux', 'redux-form', 'redux-thunk',
          ],
        },
        output: {
          filename: 'js/[name].[hash].js' 
        },
      };

to

      const config = {
        mode: 'production',
        entry: {
          bundle: ['babel-polyfill', './src/index.js'],
        },
        output: {
          filename: 'js/[name].[hash].js' 
        },
      };
@mike1808

This comment has been minimized.

mike1808 commented Jun 12, 2018

Got the same error with webpack >= 4.10.0 and redux-form. However, I cannot create an example to reproduce the bug.

@henrist

This comment has been minimized.

henrist commented Jun 13, 2018

For the bug related to redux-form I've reproduced it in a minimal case explained here: #7499 (comment)

@humorHan

This comment has been minimized.

humorHan commented Jul 2, 2018

entry: {home: '/webpack-demo/src/js/home.js'}

chunkFilename:"js/[name]-chunk-[chunkhash].js"

What is the name of the output JS file?
My js file name is 'home-chunk-70aa09e8630fee6b4bb2.js'

@ydennisy

This comment has been minimized.

ydennisy commented Jul 11, 2018

I am seeing this issue also using webpack 4.14.0 and nodejs v8.

Building my application in two identical environment (GAE Docker) once with production deployment and the other with development. Dev works fine whilst production creates the following error:

demo:1 TypeError: Cannot read property 'call' of undefined
    at o (demo:1)
    at Object.349 (ui.chunk.bundle.js:1)
    at o (demo:1)
    at o.t (demo:1)

It does seem this is do with code splitting functionality.

Any update on this issue, if it has been found or is the best thing to do just revert to webpack 4.9.2 for now?

@developer239

This comment has been minimized.

developer239 commented Jul 23, 2018

Still happening in webpack 4.16.2 development works fine but production fails for some reason.

"webpack": "4.16.2",
"dll-link-webpack-plugin": "^3.0.5",

Also a weird thing is that it says something about bootstrap. I don't use bootstrap anywhere.

TypeError: Cannot read property 'call' of undefined || bootstrap:19

Edit: Removing some libraries from dll vendors helped.

@mieszko4

This comment has been minimized.

mieszko4 commented Jul 23, 2018

@developer239 bootstrap means "setting up" not bootstrap library

@alex4o

This comment has been minimized.

alex4o commented Jul 24, 2018

I think that this is the problem:

/******/ 	deferredModules.push([null, "assets","default","vendor"]);

because the first index is null it cannot find a module with that name in the modules array, I changed it to the name of the entry point js file, and it worked,

/******/ 	deferredModules.push(["./main.js", "assets","default","vendor"]);

I also tried setting it to zero, but that didn't work.

@zlk89

This comment has been minimized.

zlk89 commented Sep 19, 2018

Still seeing this issue in webpack 4.19.1. We are using dll, code splitting.

@andrefox333

This comment has been minimized.

andrefox333 commented Nov 1, 2018

Adding sideEffects:false fixed it for me. Whew!

optimization: { sideEffects: false } 
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment