Build failing due as dependency is not resolved

[anandrajana]

Hello,

We are using "react-transition-group" version 2 and facing a build failure due to unresolved dependency. The build is successful in local system but failing when automated using atlassian bamboo as below. May I know whats going wrong here?.

ERROR in ./~/react-transition-group/CSSTransition.js build 11-Oct-2018 07:17:50 [INFO] Module not found: Error: Can't resolve 'dom-helpers/class/addClass' in '/apps/bamboo-agent-home/master-merge3/xml-data/build-dir/AV3-ACTMM3252-JOB1/ameliav3/amelia-admin-ui/node_modules/react-transition-group' build 11-Oct-2018 07:17:50 [INFO] @ ./~/react-transition-group/CSSTransition.js 8:39-76 build 11-Oct-2018 07:17:50 [INFO] @ ./~/react-transition-group/index.js build 11-Oct-2018 07:17:50 [INFO] @ ./common/amelia-common-ui/view/fr-login/FaceRecogLogin.js build 11-Oct-2018 07:17:50 [INFO] @ ./common/amelia-common-ui/containers/fr-login/FaceRecogLoginContainer.js build 11-Oct-2018 07:17:50 [INFO] @ ./src/containers/main/AdminApp.js build 11-Oct-2018 07:17:50 [INFO] @ ./src/index.js build 11-Oct-2018 07:17:50 [INFO] @ multi babel-polyfill ./src/index.js bpmn-js react react-dom path build 11-Oct-2018 07:17:50 [INFO] build 11-Oct-2018 07:17:50 [INFO] ERROR in ./~/react-transition-group/CSSTransition.js build 11-Oct-2018 07:17:50 [INFO] Module not found: Error: Can't resolve 'dom-helpers/class/removeClass' in '/apps/bamboo-agent-home/master-merge3/xml-data/build-dir/AV3-ACTMM3252-JOB1/ameliav3/amelia-admin-ui/node_modules/react-transition-group' build 11-Oct-2018 07:17:50 [INFO] @ ./~/react-transition-group/CSSTransition.js 10:42-82 build 11-Oct-2018 07:17:50 [INFO] @ ./~/react-transition-group/index.js build 11-Oct-2018 07:17:50 [INFO] @ ./common/amelia-common-ui/view/fr-login/FaceRecogLogin.js build 11-Oct-2018 07:17:50 [INFO] @ ./common/amelia-common-ui/containers/fr-login/FaceRecogLoginContainer.js build 11-Oct-2018 07:17:50 [INFO] @ ./src/containers/main/AdminApp.js build 11-Oct-2018 07:17:50 [INFO] @ ./src/index.js build 11-Oct-2018 07:17:50 [INFO] @ multi babel-polyfill ./src/index.js bpmn-js react react-dom path build 11-Oct-2018 07:17:50 [INFO] Child html-webpack-plugin for "index.html": build 11-Oct-2018 07:17:50 [INFO] [0] ./~/lodash/lodash.js 540 kB {0} [built] build 11-Oct-2018 07:17:50 [INFO] [1] ./~/html-webpack-plugin/lib/loader.js!./public/index.html 918 bytes {0} [built] build 11-Oct-2018 07:17:50 [INFO] [2] (webpack)/buildin/global.js 509 bytes {0} [built] build 11-Oct-2018 07:17:50 [INFO] [3] (webpack)/buildin/module.js 517 bytes {0} [built]​

[barbalex]

I have similar issue. Others too. See here: doczjs/docz#1102
I wonder of this is a problem because serveral dependencies import dom-helpers. Some in v3, others in v5.

alex@pca:/mnt/c/Users/alexa/ae2$ yarn why dom-helpers
yarn why v1.17.3
[1/4] Why do we have the module "dom-helpers"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "dom-helpers@3.4.0"
info Has been hoisted to "dom-helpers"
info Reasons this module exists
   - Hoisted from "react-swipeable-views#dom-helpers"
   - Hoisted from "graphql-voyager#@material-ui#core#dom-helpers"
   - Hoisted from "gatsby#gatsby-react-router-scroll#scroll-behavior#dom-helpers"
   - Hoisted from "graphql-voyager#@material-ui#core#react-transition-group#dom-helpers"
info Disk size without dependencies: "972KB"
info Disk size with unique dependencies: "1.57MB"
info Disk size with transitive dependencies: "1.61MB"
info Number of shared dependencies: 2
=> Found "react-transition-group#dom-helpers@5.1.0"
info This module exists because "@material-ui#core#react-transition-group" depends on it.

As v5 "removed a lot of code" (https://github.com/react-bootstrap/dom-helpers/blob/master/CHANGELOG.md#500-2019-08-30) maybe if v5 is loaded some helpers are missing?

[barbalex]

I tried fixing dom-helpers version to 5.1.0 or 3.4.0 using the resolutions feature of yarn. Did not help.

[TrySound]

@barbalex Do you have dom-helpers duplication in react-transition-group?

[barbalex]

@TrySound Not sure what you mean but maybe you mean this part from yarn.lock:

react-transition-group@^2.2.1:
  version "2.9.0"
  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
  dependencies:
    dom-helpers "^3.4.0"
    loose-envify "^1.4.0"
    prop-types "^15.6.2"
    react-lifecycles-compat "^3.0.4"

react-transition-group@^4.0.0:
  version "4.3.0"
  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.3.0.tgz#fea832e386cf8796c58b61874a3319704f5ce683"
  integrity sha512-1qRV1ZuVSdxPlPf4O8t7inxUGpdyO5zG9IoNfJxSO0ImU2A1YWkEQvFPuIPZmMLkg5hYs7vv5mMOyfgSkvAwvw==
  dependencies:
    "@babel/runtime" "^7.5.5"
    dom-helpers "^5.0.1"
    loose-envify "^1.4.0"
    prop-types "^15.6.2"

[jquense]

Usually folks who hit this sort of thing have altered webpaks resolve config such that either packages are flattened incorrectly or webpavk looks in the wrong directory first when resolving. Worth making sure you don't have anything fishy in your webpavk config

[barbalex]

And here comes why:

alex@pca:/mnt/c/Users/alexa/ae2$ yarn why react-transition-group
yarn why v1.17.3
[1/4] Why do we have the module "react-transition-group"...?
[2/4] Initialising dependency graph...
warning Resolution field "react-transition-group@4.0.0" is incompatible with requested version "react-transition-group@^2.2.1"
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "react-transition-group@4.0.0"
info Reasons this module exists
   - "@material-ui#core" depends on it
   - Hoisted from "@material-ui#core#react-transition-group"
   - Hoisted from "graphql-voyager#@material-ui#core#react-transition-group"
info Disk size without dependencies: "316KB"
info Disk size with unique dependencies: "736KB"
info Disk size with transitive dependencies: "1.48MB"
info Number of shared dependencies: 8
Done in 0.91s.

[barbalex]

I added this to package.json and now it builds:

"resolutions": {
    "react-transition-group": "4.0.0"
  }

@TrySound thanks for pointing to react-transition-group

[TrySound]

So yarn incorrectly resolved this? I usually have this problem in big monorepos. Second yarn call on user side helps to generate proper lockfile.

[barbalex]

This is still not working for me. If I force dom-helpers to v5 I get errors but also if I force it to v3 - just different ones. Same when I force react-transition-group which depending on its version uses dom-helpers v5 or v3.

I feel that dom-helpers must have had breaking changes that were not explained in: changelog.md, releases or the readme. Have I missed the documentation?

I am now attempting to create a pull-request do update scroll-behavior to use dom-helpers v5. I am running into problems though, due to the changes in dom-helpers not being documented. Some of the imports could be updated by using flat imports. But some not.

These three imports should be altered, but where have the modules gone?

import off from 'dom-helpers/events/off';
import on from 'dom-helpers/events/on';
import requestAnimationFrame from 'dom-helpers/util/requestAnimationFrame';

for

import requestAnimationFrame from 'dom-helpers/util/requestAnimationFrame';

I have tried

import { request as requestAnimationFrame } from 'dom-helpers/animationFrame';

and it seems to work. Is that correct?

[TrySound]

It's not dom-helpers issue. The package released with major bump. Don't force it in resolutions. You should have two different versions in your node_modules. One can be hoisted and one should be in nested node_modules.

[barbalex]

Yeah, the version number change quite clearly signals that this could happen.

I am using react-swipeable-views in a gatsby project. Gatsby depends on gatsby-react-router-scroll which depends on scroll-behavior which depends on dom-helpers in v3.2.1. Also react-swipeable-views depends on @material-ui/core@^3.0.0 which in v3.0.0 depended on dom-helpers in v3.2.1 too.

At the same time I am using @material-ui/core@4.4.2 directly which depends on react-transition-group v4.0.0 which depends on dom-helpers v5.0.1

I guess this is what causes the problem.

Two questions:

Udating the dependency tree
Is it a bad idea of mine to create pull requests to update scroll-behavior to use dom-helpers v5 and same try to update react-swipeable-views to update @material-ui/core? Would this not be the best way to prevent others from running in to the same problems?

Solving the conflict
You mentioned:

one should be in nested node_modules

How would I achieve that?

[TrySound]

Hm.. I don't see react-swipeable-views uses material-ui.
https://github.com/oliviertassinari/react-swipeable-views/tree/master/packages

[barbalex]

yep, that was wrong, sorry.

But the fact remains that am using react-swipeable-views uses dom-helpers in v3 while @material-ui/core@4.4.2 uses dom-helpers v5.

[TrySound]

Do you see node_modules/react-transition-group/node_modules/dom-helpers, node_modules/react-swipeable-views/node_modules/dom-helpers or node_modules/scroll-behavior/node_modules/dom-helpers? Which versions are there and which in node_modules/dom-helpers?