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: https://github.com/doczjs/docz/issues/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 "[email protected]"
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#[email protected]"
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 "[email protected]" is incompatible with requested version "react-transition-group@^2.2.1"
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
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/[email protected] 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/[email protected] 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?

[barbalex]

Extracts from yarn.lock:

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"
[email protected]:
  version "0.13.3"
  resolved "https://registry.yarnpkg.com/react-swipeable-views/-/react-swipeable-views-0.13.3.tgz#2ad886767c6b2de88000606a14bedde12156e6d0"
  integrity sha512-LBHRA5ZouipmoLLwi0cqB8qc7NHLskbXmT1I+ZztC9JfmgKrfichw5R+7q4igQ+5VbaP6jL1vn8BtHW96WYNFQ==
  dependencies:
    "@babel/runtime" "7.0.0"
    dom-helpers "^3.2.1"
    prop-types "^15.5.4"
    react-swipeable-views-core "^0.13.1"
    react-swipeable-views-utils "^0.13.3"
    warning "^4.0.1"
scroll-behavior@^0.9.10:
  version "0.9.10"
  resolved "https://registry.yarnpkg.com/scroll-behavior/-/scroll-behavior-0.9.10.tgz#c8953adeeb3586060b903328d860aa8346d62861"
  integrity sha512-JVJQkBkqMLEM4ATtbHTKare97zhz/qlla9mNttFYY/bcpyOb4BuBGEQ/N9AQWXvshzf6zo9jP60TlphnJ4YPoQ==
  dependencies:
    dom-helpers "^3.2.1"
    invariant "^2.2.2"
[email protected], dom-helpers@^3.2.1, dom-helpers@^5.0.1:
  version "3.4.0"
  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
  dependencies:
    "@babel/runtime" "^7.1.2"

[TrySound]

Well, I see you have a resolution somewhere. Remove it and reinstall material-ui

[email protected], dom-helpers@^3.2.1, dom-helpers@^5.0.1:
  version "3.4.0"

[barbalex]

No, not any more. I had one a few yarn calls ago but that should not show in yarn.lock any more.

package.json:

{
  "name": "artdaten",
  "version": "1.1.7",
  "author": {
    "name": "Alexander Gabriel",
    "email": "[email protected]",
    "url": "https://gabriel-software.ch"
  },
  "private": true,
  "dependencies": {
    "@apollo/react-hooks": "3.1.0",
    "@loadable/component": "5.10.2",
    "@material-ui/core": "4.4.2",
    "@material-ui/icons": "4.4.1",
    "apollo-cache-inmemory": "1.6.3",
    "apollo-client": "2.6.4",
    "apollo-link": "1.2.13",
    "apollo-link-batch-http": "1.2.13",
    "apollo-link-context": "1.0.19",
    "apollo-link-http": "1.5.16",
    "autosuggest-highlight": "3.1.1",
    "babel-plugin-styled-components": "1.10.6",
    "copy-to-clipboard": "3.2.0",
    "create-react-class": "15.6.3",
    "date-fns": "2.1.0",
    "dexie": "2.0.4",
    "docz": "2.0.0-rc.39",
    "exceljs": "2.0.1",
    "file-saver": "2.0.2",
    "gatsby": "2.15.14",
    "gatsby-plugin-create-client-paths": "2.1.7",
    "gatsby-plugin-eslint": "2.0.5",
    "gatsby-plugin-manifest": "2.2.16",
    "gatsby-plugin-offline": "3.0.6",
    "gatsby-plugin-react-helmet": "3.1.7",
    "gatsby-plugin-styled-components": "3.1.5",
    "gatsby-plugin-typography": "2.3.7",
    "gatsby-plugin-web-font-loader": "1.0.4",
    "gatsby-source-filesystem": "2.1.22",
    "gatsby-theme-docz": "2.0.0-rc.39",
    "graphiql": "0.14.2",
    "graphql-tag": "2.10.1",
    "is-uuid": "1.0.2",
    "isomorphic-fetch": "2.2.1",
    "js-file-download": "0.4.8",
    "json2csv": "4.5.3",
    "jwt-decode": "2.2.0",
    "lodash": "4.17.15",
    "mobx": "5.13.0",
    "mobx-react-lite": "1.4.1",
    "mobx-state-tree": "3.14.1",
    "react": "16.9.0",
    "react-autosuggest": "9.4.3",
    "react-contextmenu": "2.11.0",
    "react-data-grid": "6.1.0",
    "react-dom": "16.9.0",
    "react-dropzone": "10.1.8",
    "react-error-boundary": "1.2.5",
    "react-fns": "1.4.0",
    "react-helmet": "5.2.1",
    "react-linkify": "0.2.2",
    "react-measure": "2.3.0",
    "react-reflex": "3.0.16",
    "react-swipeable-views": "0.13.3",
    "react-typography": "0.16.19",
    "react-window": "1.8.5",
    "recompose": "0.30.0",
    "styled-components": "4.3.2",
    "typeface-roboto": "0.0.75",
    "typography": "0.16.19",
    "workerize-loader": "1.1.0",
    "xlsx": "0.15.1"
  },
  "dependenciesComments": {
    "exceljs": "Do not upgrade past 1.10.0, will break in production. See: https://github.com/exceljs/exceljs/issues/871, https://github.com/exceljs/exceljs/issues/948",
    "remove-flow-types-loader": "needed because graphiql causes warnings: https://github.com/graphql/graphiql/issues/617#issuecomment-398237987"
  },
  "devDependencies": {
    "@graphile-contrib/pg-order-by-related": "1.0.0-beta.6",
    "@typescript-eslint/eslint-plugin": "1.x",
    "@typescript-eslint/parser": "1.x",
    "babel-eslint": "10.x",
    "copyfiles": "2.1.1",
    "docsify-cli": "4.3.0",
    "eslint": "6.3.0",
    "eslint-config-react-app": "5.0.1",
    "eslint-loader": "3.0.0",
    "eslint-plugin-import": "2.x",
    "eslint-plugin-jsx-a11y": "6.x",
    "eslint-plugin-react": "7.x",
    "eslint-plugin-react-hooks": "2.0.1",
    "postgraphile": "4.4.3",
    "postgraphile-plugin-connection-filter": "1.1.3",
    "postgraphile-upsert-plugin": "1.0.5",
    "react-scripts": "3.1.1",
    "remove-flow-types-loader": "1.1.0",
    "shx": "0.3.2",
    "source-map-explorer": "2.0.1"
  },
  "scripts": {
    "build": "gatsby build",
    "build2": "gatsby clean && gatsby build && copyfiles now.json public && copyfiles api/**/* public/api",
    "buildArtdaten": "gatsby clean && gatsby build && shx cp nowArtdaten.json public/now.json && copyfiles api/**/* public/api",
    "clean": "gatsby clean",
    "dev": "gatsby develop",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "analyze": "npx source-map-explorer build/static/js/main.*",
    "startDocs": "yarn docsify serve ./docs --port 8000"
  },
  "license": "ISC",
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie > 0",
    "not op_mini all"
  ]
}

[TrySound]

Show me what I asked in https://github.com/react-bootstrap/dom-helpers/issues/51#issuecomment-531229575

[barbalex]

Do you mean I should check the files in the node_modules folder?

• C:\Users\alexa\ae2\node_modules\react-transition-group\node_modules\dom-helpers\package.json says: 5.1.0
• C:\Users\alexa\ae2\node_modules\react-swipeable-views\node_modules only contains @babel and regenerator-runtime
• C:\Users\alexa\ae2\node_modules\scroll-behavior only contains a lib folder, license file, pacakge.json and readme
• C:\Users\alexa\ae2\node_modules\dom-helpers\package.json says v3.4.0

[TrySound]

Well, I see node_modules are correct. Not yarn problem, not dom-helpers problem. I guess webpack resolver in docz broken. They resolve dom-helpers only from root though there is nested v5 in react-transition-group. Ask there.

[TrySound]

I actually saw same a lot of times with CRA, Gatsby and Next.js. They all webpack based and somehow modified webpack resolver.

[barbalex]

@TrySound Thanks for great help. So looks like @jquense was right too in https://github.com/react-bootstrap/dom-helpers/issues/51#issuecomment-531000652. Thanks to both!

[barbalex]

@TrySound Sorry for repeating questions from further up this issue but I still want to create a pull-request to update scroll-behavior to use dom-helpers v5.

I am running into problems though, due to the changes in dom-helpers not being documented or me not finding the documentation. Some of the imports could be updated by using flat imports. But some not.

These three imports should be altered:

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. Hope that is correct.

But what about dom-helpers/events/off and ..on?

[TrySound]

Yes, that's correct https://github.com/react-bootstrap/dom-helpers/blob/master/src/animationFrame.ts#L40-L45 Here's basic utils https://github.com/react-bootstrap/dom-helpers/blob/master/src/addEventListener.ts https://github.com/react-bootstrap/dom-helpers/blob/master/src/removeEventListener.ts Here's their combination https://github.com/react-bootstrap/dom-helpers/blob/master/src/listen.ts

[barbalex]

@ thanks Unfortunately tests are not o.k. Could it be that

import scrollLeft from 'dom-helpers/query/scrollLeft';

is not simply

import scrollLeft from 'dom-helpers/scrollLeft';

?

[TrySound]

The code looks similar

[elyazinho]

Hi @TrySound @barbalex, so how do we modify the pakage.json?

[TrySound]

@elyazinho Remove dom-helpers resolutions if you added them and remove resolve.modules modification from your webpack config. If something is still broken rise an issue in your webpack wrapper.

[elyazinho]

hi @TrySound i haven't added any dom-helpers resolution nor modified the webpack config, so how do i resolve this error? ie how do i raise an issue in the webpack wrapper? what are the steps?

error is as such: Module not found: Can't resolve 'dom-helpers/events/off' in '../node_modules/react-swipeable-views/lib'

[TrySound]

What do you use gatsby, docz, cra?