Fix errors due to Lodash module replacement #1766

vojtechszocs · 2019-06-19T20:15:49Z

This PR fixes a problem with Lodash module replacement during webpack build.

The standard Lodash import style used in Console is

import * as _ from 'lodash';
import * as _ from 'lodash-es'; // should go away as part of #1724

with both _ objects having an equivalent structure.

Problem 1, is structural difference between lodash/foo vs. lodash-es/foo imports

var memoize = require('lodash/memoize');    // memoize is function
var memoize = require('lodash-es/memoize'); // memoize is Module => memoize.default is function

Problem 2, is the weird-looking lodash.foo form used by some vendor libraries

var cloneDeep = require('lodash.clonedeep');    // cloneDeep is function
var cloneDeep = require('lodash-es.clonedeep'); // error, no such module available

Therefore, the replacement RegExp is changed to /^lodash$/.

This also means that parts of lodash (technically a separate library) will make it into webpack-generated chunks, due to vendor libraries using either lodash/foo or lodash.foo. I don't think we can do anything about this.

Note: from webpack compilation perspective, using

import * as _ from 'lodash-es';

in source code vs. using

import * as _ from 'lodash';

in source code together with /^lodash$/ => lodash-es replacement should yield the same results.

/cc @spadgett @mareklibra

openshift-ci-robot · 2019-06-19T20:15:51Z

@vojtechszocs: GitHub didn't allow me to request PR reviews from the following users: mareklibra.

Note that only openshift members and repo collaborators can review this PR, and authors cannot review their own PRs.

Details

In response to this:

This PR fixes a problem with Lodash module replacement during webpack build.

The standard Lodash import style used in Console is
import * as _ from 'lodash';
import * as _ from 'lodash-es'; // should go away as part of #1724
with both _ objects having an equivalent structure.

Problem 1, is structural difference between lodash/foo vs. lodash-es/foo imports
var memoize = require('lodash/memoize');    // memoize is function
var memoize = require('lodash-es/memoize'); // memoize is Module => memoize.default is function
Problem 2, is the weird-looking lodash.foo form used by some vendor libraries
var cloneDeep = require('lodash.clonedeep');    // cloneDeep is function
var cloneDeep = require('lodash-es.clonedeep'); // error, no such module available
Therefore, the replacement RegExp is changed to /^lodash$/.

This also means that parts of lodash (technically a separate library) will make it into webpack-generated chunks, due to vendor libraries using either lodash/foo or lodash.foo. I don't think we can do anything about this.

Note: from webpack compilation perspective, using
import * as _ from 'lodash-es';
in source code vs. using
import * as _ from 'lodash';
in source code together with /^lodash$/ => lodash-es replacement should yield the same results.

/cc @spadgett @mareklibra

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

spadgett · 2019-06-19T21:48:21Z

/retest

spadgett

/lgtm

openshift-ci-robot · 2019-06-19T21:49:51Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: spadgett, vojtechszocs

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Details

Needs approval from an approver in each of these files:

~~frontend/OWNERS~~ [spadgett]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

openshift-bot · 2019-06-19T21:57:39Z

/retest