docz: Failed to compile, can't resolve dom-helpers modules

Got docz installed on existing UI library, trying to run docz dev with no mdx files at all

Got this error while bundling:

ERROR  Failed to compile with 5 errors                                                                                                                                                                                                                  10:55:41 AM

These dependencies were not found:
⠀
* dom-helpers/events/off in ../node_modules/scroll-behavior/lib/index.js
* dom-helpers/events/on in ../node_modules/scroll-behavior/lib/index.js
* dom-helpers/query/scrollLeft in ../node_modules/scroll-behavior/lib/index.js
* dom-helpers/query/scrollTop in ../node_modules/scroll-behavior/lib/index.js
* dom-helpers/util/requestAnimationFrame in ../node_modules/scroll-behavior/lib/index.js

Seems that it is some kind of versioning issue: node_modules in ./.docz contains dom-helpers v5, which has no such exports unlike v3 which probably should be resolved and installed

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 2
Comments: 21 (7 by maintainers)

Commits related to this issue

fix(gatsby-theme-docz): fix faulty webpack resolution #1102 by @aleksandervalle — committed to doczjs/docz by rakannimer 5 years ago

Most upvoted comments

I have fixed that by adding “resolutions”: { “dom-helpers”: “3.4.0” },

Update: It actually brokes react-transition-group dependency of dom-helpers “5.1.3”, and unfortunately even such “resolutions” doesn’t work:

  "resolutions": {
    "docz/**/dom-helpers": "3.4.0"
  },

yarn.lock seems to be correct (?), but still not working.

Update 2: Finally get it working by patching my project, not ideal I think (ideal would be fix in docz?), but both my project and docz working simultaneously.

First of all, remove useless “resolutions” from above
Install explicit dom-helpers@3.4.0 for docz yarn add dom-helpers@3.4.0 -D
Install fake package dom-helpers@5.1.3 accessible with other name yarn add dom-helpers5@npm:dom-helpers@5.1.3 -D
add alias in projects’s webpack for accessing dom-helpers resolve: { ... alias: { 'dom-helpers': 'dom-helpers5' } },
Done! docz uses 3.4.0, my project 5.1.3

+13

artem-popov on Nov 6, 2019

I am also facing same issue with create-next-app With material-ui and docz together.

. Then I tried using npx create-docz-app my-docz-app. And added yarn add @material-ui/core and I am facing same dom-helper issue.

yarn run dev     
yarn run v1.19.1
warning ../package.json: No license field
$ docz dev

Building app
warn Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.
success open and validate gatsby-configs - 1.260s
success load plugins - 0.671s
success onPreInit - 0.004s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.031s
success copy gatsby files - 0.107s
success onPreBootstrap - 0.327s
warn Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.
success source and transform nodes - 0.748s
success building schema - 0.315s
success createPages - 0.136s
success createPagesStatefully - 0.066s
success onPreExtractQueries - 0.003s
success update schema - 0.035s
success extract queries from components - 0.089s
success write out requires - 0.010s
success write out redirect data - 0.003s
success onPostBootstrap - 0.002s
⠀
info bootstrap finished - 8.123 s
⠀
success run queries - 0.080s - 7/7 87.15/s
warn ESLintError: 
/Users/rahulshrivastava/projects/personal/my-docz-app/src/components/Alert.jsx
  18:7  warning  Duplicate key 'background'  no-dupe-keys

✖ 1 problem (0 errors, 1 warning)


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'dom-helpers/events/off' in '/Users/rahulshrivastava/projects/personal/my-docz-app/node_modules/scroll-behavior/lib'

File: ../node_modules/scroll-behavior/lib/index.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'dom-helpers/events/on' in '/Users/rahulshrivastava/projects/personal/my-docz-app/node_modules/scroll-behavior/lib'

File: ../node_modules/scroll-behavior/lib/index.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'dom-helpers/query/scrollLeft' in '/Users/rahulshrivastava/projects/personal/my-docz-app/node_modules/scroll-behavior/lib'

File: ../node_modules/scroll-behavior/lib/index.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'dom-helpers/query/scrollTop' in '/Users/rahulshrivastava/projects/personal/my-docz-app/node_modules/scroll-behavior/lib'

File: ../node_modules/scroll-behavior/lib/index.js


 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'dom-helpers/util/requestAnimationFrame' in '/Users/rahulshrivastava/projects/personal/my-docz-app/node_modules/scroll-behavior/lib'

File: ../node_modules/scroll-behavior/lib/index.js

failed Building development bundle - 6.386s


———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
6 pages                                                                       Failed                                                                       docz-app

App ready on http://localhost:3001

yarn.lock

dom-helpers@^3.2.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"

dom-helpers@^5.0.1:
  version "5.1.3"
  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.1.3.tgz#7233248eb3a2d1f74aafca31e52c5299cc8ce821"
  integrity sha512-nZD1OtwfWGRBWlpANxacBEZrEuLa16o1nh7YopFWeoF68Zt8GGEmzHu6Xv4F3XaFIC+YXtTLrzgqKxFgLEe4jw==
  dependencies:
    "@babel/runtime" "^7.6.3"
    csstype "^2.6.7"

react-transition-group@^4.3.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"

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"

gatsby-react-router-scroll > scroll-behavior > dom-helpers "^3.2.1" @material-ui/core@^4.6.1 > react-transition-group > dom-helpers "^5.0.1"

"dependencies": {
    "@material-ui/core": "^4.6.1",
    "docz": "next",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "scheduler": "^0.15.0"
  }

@barbalex @rakannimer any solution or way around temp fix ?

rahul3103 on Nov 18, 2019

@rakannimer I don’t see anything wrong with dependencies. Conflicting ones are nested in packages properly. But for some reason docz resolver finds only dom-helpers from the root. https://github.com/react-bootstrap/dom-helpers/issues/51#issuecomment-531236558

TrySound on Sep 13, 2019

Thanks @aleksandervalle 😃

The issue should be fixed in 2.0.0-rc.77 👍

Going to close this issue, please comment here if the problem re-occurs.

rakannimer on Nov 25, 2019

Nice catch @aleksandervalle ! I was able to reproduce and it works indeed.

The code is a remnant from an old version of docz.

I’ll remove it and publish the last release candidate before the 2.0 version later today.

rakannimer on Nov 25, 2019

Installed material-ui/core on a pretty fresh docz-install, and getting same error – conflicting versions of dom-helpers.

After reading https://github.com/webpack/webpack/issues/6538, I tried commenting out this whole if-statement (https://github.com/doczjs/docz/blob/master/core/gatsby-theme-docz/lib/onCreateWebpackConfig.js#L23):

  if (hasParentNodeModules) {
    actions.setWebpackConfig({
      resolve: {
        modules: [nodeModules, parentNodeModules],
      },
    })
  }

I’ll admit ignorance to webpack module resolution, but seems to me that things are resolving fine, i.e. things seem to be working.

aleksandervalle on Nov 24, 2019

@rakannimer Superb. Docz is fantastic, thanks for doing an awesome job! 😃

aleksandervalle on Nov 25, 2019

Bump of Rahuls comment, I am also receiving the same issue using create-react-app, material-ui/core and docz together.

Generating development JavaScript bundle failed

Can't resolve 'dom-helpers/util/requestAnimationFrame' in '/Users/gabecabrera/Desktop/code/bobber-fullstack/bobber-ui/node_modules/scroll-behavior/lib'

File: ../node_modules/scroll-behavior/lib/index.js

failed Building development bundle - 8.112s

EDIT: I resolved my issue by deleting my NODE_MODULES, yarn.lock and doing a fresh yarn install, after that I was given a “could not resolve docz-theme-default” error, which was resolved by doing a yarn add docz-theme-default, after which docz worked as expected.

GabeCabrera on Nov 21, 2019