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

Modules is missing in production mode #7499

Closed
yangmingshan opened this Issue Jun 7, 2018 · 22 comments

Comments

Projects
None yet
@yangmingshan

yangmingshan commented Jun 7, 2018

Bug report

Maybe same problem with #7425

What is the current behavior?
Seems some modules is missing in production mode

If the current behavior is a bug, please provide the steps to reproduce.
It's hard to create a minimum reproducible example (I tried, I can't upload our project). But there has call stack trace:

image

image

image

What is the expected behavior?
Not missing any module

webpack config
vue-cli v3.0.0-beta.15 default config

Other relevant information:
webpack version: v4.11.1
Node.js version: v10.4.0
Operating System: macOS High Sierra 10.13.5

@sod

This comment has been minimized.

sod commented Jun 7, 2018

Is there any library that has sideEffects: false configured?

grep sideEffects node_modules/*/package.json
@yangmingshan

This comment has been minimized.

yangmingshan commented Jun 8, 2018

@sod Yes, I found in rxjs. But I'm not using rxjs, it's a dependency for lint-staged (lint-staged -> listr -> rxjs). And the missing module is our component, not some library.

@yangmingshan

This comment has been minimized.

yangmingshan commented Jun 8, 2018

I try to remove lint-staged, and it has same problem (of course). Seems we are different problem.

@sokra

This comment has been minimized.

Member

sokra commented Jun 8, 2018

Hi @yangmingshan it difficult to see the problem from your screenshots, but here are some hints that may help you to find the problem:

  • Disable HashModules and enable namedModules. This should make it easier to read the stuff as modules have useful names.
  • Disable minimizing. This should make it easier to read the source.
  • function for module 6jJR doesn't seem to be loaded. Check from the stats in which chunk this module is.
  • There are 3 possible cases: The chunk should be loaded but isn't. The module is not in the right chunk. The module isn't in any chunk at all.
@yangmingshan

This comment has been minimized.

yangmingshan commented Jun 8, 2018

@sokra Seems the module isn't in any chunk at all, I only found two __webpack_require__("6jJR") call in all build files.

image

And how to disable HashModules and enable namedModules? I tried optimization.namedModules, not work.

I will keep trying create a minimum reproducible example, sorry about these screenshots.

@dlebedynskyi

This comment has been minimized.

dlebedynskyi commented Jun 11, 2018

I think we are running into same issue. On production build for 2 chunks only we are seeing
image

image

it looks a in manifest is sparse array for some reason.

@sokra Anything I can help to debug this issue from my side?
I think this started after we updated form 4.8.0 to 4.11 and migration to babel@7-beta.49. Trying to pin point exact reason.

Update: after some digging - looks like webpack 4.9.2 is fine, but 4.10.0 breaks.

@bradleyayers

This comment has been minimized.

bradleyayers commented Jun 11, 2018

I might be experiencing the same bug. In my case I think the problem is that there's a __webpack_require__(…) that shouldn't be there.

I have this source file: (./node_modules/@heydovetail/ui-components/lib.es2015/components/Link/index.js)

import * as React from "react";
import * as rrd from "react-router-dom";

export const Link = React.createContext(rrd.Link);
//# sourceMappingURL=index.js.map

In the production build it's compiled to:

// EXTERNAL MODULE: ./node_modules/react-router-dom/es/Link.js
var es_Link = __webpack_require__(274);

// CONCATENATED MODULE: ./node_modules/@heydovetail/ui-components/lib.es2015/components/Link/index.js
/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react-router-dom */ 76);

const Link_Link = react["createContext"](es_Link["a" /* default */]);
//# sourceMappingURL=index.js.map

The error is thrown inside __webpack_require__(/*! react-router-dom */ 76);:

TypeError: Cannot read property 'call' of undefined at __webpack_require__ (http://localhost:3000/packs/collector-194eaf08eb5776b1dae1.js:20:27) at Module.9 (http://localhost:3000/packs/collector-194eaf08eb5776b1dae1.js:6550:21) at __webpack_require__ (http://localhost:3000/packs/collector-194eaf08eb5776b1dae1.js:20:27) at Object.580 (http://localhost:3000/packs/collector-194eaf08eb5776b1dae1.js:6134:182) at __webpack_require__ (http://localhost:3000/packs/collector-194eaf08eb5776b1dae1.js:20:27) at Object.581 (http://localhost:3000/packs/collector-194eaf08eb5776b1dae1.js:6151:115) at __webpack_require__ (http://localhost:3000/packs/collector-194eaf08eb5776b1dae1.js:20:27) at 0 (http://localhost:3000/packs/collector-194eaf08eb5776b1dae1.js:82:16) at http://localhost:3000/packs/collector-194eaf08eb5776b1dae1.js:85:9

What's interesting is that:

  1. The import is unused (only Link from react-router-dom is actually used, the root module is not, so it's a surprise that react-router-dom is being imported).
  2. react-router-dom has pkg.sideEffects=false
  3. It appears correct that react-router-dom is not available. The problem really seems that it's being imported at all.

I've disabled UglifyJsPlugin via the optimization portion of my webpack config:

module.exports.optimization = {
  minimize: false
};

Update: setting optimization.sideEffects = false fixes the issue. With this set, when looking at the unminified output the import to react-router-dom is gone:

// EXTERNAL MODULE: ./node_modules/react-router-dom/es/index.js + 14 modules
var es = __webpack_require__(65);

// CONCATENATED MODULE: ./node_modules/@heydovetail/ui-components/lib.es2015/components/Link/index.js

var Link_Link = react["createContext"](es["Link"]);
//# sourceMappingURL=index.js.map
@princemaple

This comment has been minimized.

princemaple commented Jun 12, 2018

I have the same problem and the optimization: { sideEffects: false } solution/workaround works for me, thanks @bradleyayers

Is it a bug that we need to set this setting? 4.9.2 works without the said setting.

@mgol

This comment has been minimized.

mgol commented Jun 12, 2018

I've just hit it in an Angular CLI 6.0.8 + Angular 6.0.4 app. With NamedModulesPlugin enabled I see the following lines on the stack trace:

/* harmony import */ var tslib__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./node_modules/tslib/tslib.es6.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("./node_modules/rxjs/_esm5/index.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("./node_modules/rxjs/_esm5/internal/Subscription.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__("./node_modules/rxjs/_esm5/internal/Subject.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__("./node_modules/rxjs/_esm5/internal/Observable.js");
/* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__("./node_modules/rxjs/_esm5/internal/observable/merge.js");
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__("./node_modules/rxjs/_esm5/operators/index.js");
/* harmony import */ var rxjs_operators__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__("./node_modules/rxjs/_esm5/internal/operators/share.js");

If you look at the file from which it comes, i.e. node_modules/@angular/core/fesm5/core.js, you'll see:

import { __assign, __extends, __read, __spread, __values } from 'tslib';
import { Observable, Subject, Subscription, merge } from 'rxjs';
import { share } from 'rxjs/operators';

The failure is in the line importing ./node_modules/rxjs/_esm5/operators/index.js - this file just requires all the operators from its directory so it seems it should be stripped out due to the sideEffects flag. The require pointing to it stays, though, causing missing module errors which break the whole app.

It's not entirely clear what triggers the issue as it started appearing when I migrated my project's RxJS imports to this new format already used by @angular/core - and yet the error comes from @angular/core and not my own code.

@mgol

This comment has been minimized.

mgol commented Jun 12, 2018

FWIW, in my case changing:

import { pairwise, filter, take } from 'rxjs/operators';
import { merge } from 'rxjs';

in one file (app.component.ts) to the following:

import { filter, take } from 'rxjs/operators';
import { pairwise } from 'rxjs/operators/pairwise';
import { merge } from 'rxjs';

made the app work again. I suspect this may be pretty random...

@mgol

This comment has been minimized.

mgol commented Jun 12, 2018

@dlebedynskyi

Update: after some digging - looks like webpack 4.9.2 is fine, but 4.10.0 breaks.

I have tested 4.9.2 where it worked and 4.10.2 where it didn't so it seems probable that this is a 4.10.0 regression.

@henrist

This comment has been minimized.

henrist commented Jun 13, 2018

I hit the same issue when upgrading webpack in our project, where it failed when loading modules from redux-form. It breaks from 4.9.2 to 4.10.0.

@sokra It seems having a package that has sideEffects: false containing wildcard import breaks in combination with dynamic imports:

I put up a minimal case to reproduce: https://github.com/henrist/webpack-module-missing-bug

This is basicly all needed to reproduce:

some-package/index.js (with sideEffects: false):

import * as constants from './constants'
export { constants }

some-package/constants.js

export const hello = 'world'

src/index.js:

import 'some-package'
import('./lazy')
console.log('this message is never seen')

src/lazy.js:

import { constants } from 'some-package'
console.log('constants', constants)

Fails with

main.js:1 Uncaught TypeError: Cannot read property 'call' of undefined
    at o (main.js:1)
    at Module.<anonymous> (main.js:1)
    at o (main.js:1)
    at main.js:1
    at main.js:1
@zahlio

This comment has been minimized.

zahlio commented Jun 13, 2018

We had kind of the same error as here and #7425

We tried:
optimization.sideEffects = false
Different version of webpack: 4.10.0, 4.12.0, 4.9.2

But nothing worked as the error message was kind of generic: TypeError: Cannot read property 'call' of undefined

We then did + disable UglifyJsPlugin:

module.exports.optimization = {
  minimize: false
};

And found out the error was:
selection_015

We then changed the following line of code:

export const unbind = Mousetrap.unbind; 

to

export const unbind = (combination: Array<string>) => Mousetrap.unbind(combination); 

So just as @mgol the real error was random, but the real question here is why webpack did not provide an error in development mode?

Hope this helps someone to be able to fix their random error :)

@bradleyayers

This comment has been minimized.

bradleyayers commented Jun 13, 2018

@zahlio what was the compiled code in mousetrap.js:934?

@dlebedynskyi

This comment has been minimized.

dlebedynskyi commented Jun 13, 2018

@henrist

I hit the same issue when upgrading webpack in our project, where it failed when loading modules from redux-form. It breaks from 4.9.2 to 4.10.0

this seem to be same issue for us as well - chunk that break are first to use it.

filipesilva added a commit to angular/angular-cli that referenced this issue Jun 13, 2018

filipesilva added a commit to filipesilva/angular-cli that referenced this issue Jun 13, 2018

sokra added a commit that referenced this issue Jun 19, 2018

@sokra sokra referenced this issue Jun 19, 2018

Merged

fixes #7499 #7558

sokra added a commit that referenced this issue Jun 19, 2018

@sokra sokra closed this in #7558 Jun 20, 2018

sokra added a commit that referenced this issue Jun 20, 2018

@dlebedynskyi

This comment has been minimized.

dlebedynskyi commented Jun 25, 2018

@sokra test with 4.12.1 issue is still happening.
screen shot 2018-06-25 at 11 44 16 am
screen shot 2018-06-25 at 11 44 24 am
140 is missing in manifest chunk

if it helps - problem comes from redux-forms
image

removing sideEffects from redux-form/package.json solves this issue

@sokra sokra reopened this Jun 25, 2018

@sokra sokra added this to the important bugfixes milestone Jun 25, 2018

sokra added a commit that referenced this issue Jun 26, 2018

@sokra sokra referenced this issue Jun 26, 2018

Merged

fixes #7499 #7600

@sokra

This comment has been minimized.

Member

sokra commented Jun 26, 2018

ok next try. #7499 should fix the problem in the repro from @henrist. It's a different problem to the problem by @yangmingshan.

@dlebedynskyi @zahlio Not sure if this is the same problem. Please provide a repro repo to get it fixed.

@sokra sokra closed this in #7600 Jun 26, 2018

sokra added a commit that referenced this issue Jun 26, 2018

@dlebedynskyi

This comment has been minimized.

dlebedynskyi commented Jun 26, 2018

@sokra #7499 seems to work for us as well. Tested our code against latest master. Thank you for fix.

@henrist

This comment has been minimized.

henrist commented Jun 26, 2018

Things are working properly from master here too. Thanks :)

@yangmingshan

This comment has been minimized.

yangmingshan commented Jun 27, 2018

My problem is fixed in v4.12.1. Thanks

MattJeanes added a commit to MattJeanes/AngularBasic that referenced this issue Jul 1, 2018

Upgrade dependencies to fix webpack/webpack#7499
Some issues needing specific older versions also seem to be resolved now so removed specific version requirement on those

filipesilva added a commit to filipesilva/angular-cli that referenced this issue Jul 7, 2018

filipesilva added a commit to angular/angular-cli that referenced this issue Jul 25, 2018

robertbaker added a commit to robertbaker/angular-cli that referenced this issue Aug 12, 2018

robertbaker added a commit to robertbaker/angular-cli that referenced this issue Aug 12, 2018

@davidlygagnon

This comment has been minimized.

davidlygagnon commented Sep 6, 2018

I ran into this exact same issue with Webpack 4.12.0.

I'm importing a library with free side-effects sideEffect: false.

The call in one of the main files is:

import {IconSettings} from '@salesforce/design-system-react';

When translated to webpack it looked like this:

screen shot 2018-09-06 at 10 32 28 am

where the first call tries to import the index.js of all modules supported in the library, __webpack_require('306')

However, 306 is missing in modules, for a reason.

screen shot 2018-09-05 at 10 59 30 pm

That results into this error, which blows up the entire app.

screen shot 2018-09-06 at 10 32 47 am

I was able to fix it by upgrading to 4.12.2 (fixed in that version).

Setting optimizations.sideEffects: false as @bradleyayers worked too but it was probably a temporary fix.

@kleingtm

This comment has been minimized.

kleingtm commented Sep 19, 2018

For what it's worth, I was running into this as well, and sideEffects: false did not fix it. I was using Vue CLI 3 TypeScript template and the error was caused by splitChunks:

optimization: {
...,
   splitChunks: {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\\/]node_modules[\\\/]/,
          priority: -10,
          chunks: 'initial'
        },
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -20,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    },
...
}

I fixed by adding the following to vue.config.js to remove the splitChunks config:

	chainWebpack: config => {
		if (process.env.NODE_ENV === 'production') {
			config.optimization.sideEffects(false);
			config.optimization.delete('splitChunks');
		}
	},
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment