search

react-bootstrap / dom-helpers

tiny, extremely modular, DOM helper library for IE9+
MIT License
404 stars 65 forks source link

Build failing due as dependency is not resolved #51

Open anandrajana opened 6 years ago

anandrajana commented 6 years ago

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 commented 5 years ago

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 "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 commented 5 years ago

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

TrySound commented 5 years ago

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

barbalex commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

barbalex commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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"
react-swipeable-views@0.13.3:
  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"
dom-helpers@3.4.0, 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 commented 5 years ago

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

dom-helpers@3.4.0, dom-helpers@^3.2.1, dom-helpers@^5.0.1:
  version "3.4.0"
barbalex commented 5 years ago

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": "alex@gabriel-software.ch",
    "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 commented 5 years ago

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

barbalex commented 5 years ago

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

TrySound commented 5 years ago

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 commented 5 years ago

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

barbalex commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@ 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 commented 5 years ago

The code looks similar

elyazinho commented 4 years ago

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

TrySound commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

What do you use gatsby, docz, cra?

elyazinho commented 4 years ago

@TrySound cra

behnammodi commented 4 years ago

I resolved

rm -rf node_modules
rm package-lock.json
npm i