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

[heregoesthekrr]

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

Got this error while bundling:
```shell⠀
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

[rakannimer]

Hello @heregoesthekrr,

Thanks for reporting this.

1. Which docz version are you using ?
2. Is your project in a monorepo ? (yarn workspace/lerna)

[heregoesthekrr]

1. ^2.0.0-rc.39
2. no

[rakannimer]

Could you try clearing the cache and lock files and re-installing:

rm -rf .docz yarn.lock node_modules && yarn && yarn docz dev

If this doesn't work I will need more information about your project.

If you could, try to reproduce this issue on one of the official examples or using create-docz-app and share a repo and that will help resolve your issue faster.

[heregoesthekrr]

Yep, I've tried this earlier, has no effect.

What information should I prodive?

[rakannimer]

Any chance you could reproduce this issue on one of the official examples or using create-docz-app and share a repo ?

[heregoesthekrr]

I've tried it already, works fine. Seems that there's issue with my packages. v1 works fine although.

[barbalex]

I am getting the same error. Even after rm -rf .docz yarn.lock node_modules && yarn && yarn dev:

alex@pca:/mnt/c/Users/alexa/ae2$ yarn dev
yarn run v1.17.3
$ gatsby develop
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.363 s
success load plugins - 1.758 s
success onPreInit - 0.063 s
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 not any stale
data
success initialize cache - 0.090 s
success copy gatsby files - 0.608 s
success onPreBootstrap - 0.093 s
Configuring yargs through package.json is deprecated and will be removed in the next major release, please use the JS API instead.
warn The gatsby-plugin-mdx plugin has generated no Gatsby nodes. Do you need it?
success source and transform nodes - 2.135 s
success Add explicit types - 0.064 s
success Add inferred types - 0.179 s
success Processing types - 0.112 s
success building schema - 0.515 s
success createPages - 0.670 s
success createPagesStatefully - 0.372 s
success onPreExtractQueries - 0.075 s
success update schema - 0.097 s
success extract queries from components - 0.882 s
success write out requires - 0.175 s
success write out redirect data - 0.174 s
success Build manifest and related icons - 0.246 s
success onPostBootstrap - 0.368 s
⠀
info bootstrap finished - 14.026 s
⠀
success run static queries - 0.503 s — 2/2 4.92 queries/second
success run page queries - 0.240 s — 20/20 138.79 queries/second
success start webpack server - 22.249 s — 1/1 0.13 pages/second
 ERROR  Failed to compile with 2 errors                                                                                                                                                                                9:49:31 PM⠀
These dependencies were not found:
⠀
* dom-helpers/addClass in ./node_modules/react-transition-group/esm/CSSTransition.js
* dom-helpers/removeClass in ./node_modules/react-transition-group/esm/CSSTransition.js
⠀
To install them, you can run: npm install --save dom-helpers/addClass dom-helpers/removeClass
✖ ｢wdm｣:
ERROR in ./node_modules/react-transition-group/esm/CSSTransition.js
Module not found: Error: Can't resolve 'dom-helpers/addClass' in '/mnt/c/Users/alexa/ae2/node_modules/react-transition-group/esm'
 @ ./node_modules/react-transition-group/esm/CSSTransition.js 5:0-47 13:11-22
 @ ./node_modules/react-transition-group/esm/index.js
 @ ./node_modules/@material-ui/core/esm/ButtonBase/TouchRipple.js
 @ ./node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js
 @ ./node_modules/@material-ui/core/esm/ButtonBase/index.js
 @ ./node_modules/@material-ui/core/esm/Button/Button.js
 @ ./node_modules/@material-ui/core/esm/Button/index.js
 @ ./src/pages/404.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/event-source-polyfill/src/eventsource.js ./node_modules/webpack-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app

ERROR in ./node_modules/react-transition-group/esm/CSSTransition.js
Module not found: Error: Can't resolve 'dom-helpers/removeClass' in '/mnt/c/Users/alexa/ae2/node_modules/react-transition-group/esm'
 @ ./node_modules/react-transition-group/esm/CSSTransition.js 6:0-53 19:11-25
 @ ./node_modules/react-transition-group/esm/index.js
 @ ./node_modules/@material-ui/core/esm/ButtonBase/TouchRipple.js
 @ ./node_modules/@material-ui/core/esm/ButtonBase/ButtonBase.js
 @ ./node_modules/@material-ui/core/esm/ButtonBase/index.js
 @ ./node_modules/@material-ui/core/esm/Button/Button.js
 @ ./node_modules/@material-ui/core/esm/Button/index.js
 @ ./src/pages/404.js
 @ ./.cache/sync-requires.js
 @ ./.cache/app.js
 @ multi ./node_modules/event-source-polyfill/src/eventsource.js ./node_modules/webpack-hot-middleware/client.js?path=/__webpack_hmr&reload=true&overlay=false ./.cache/app
ℹ ｢wdm｣: Failed to compile.

I am trying to add gatsby-theme-docz to this existing project: https://github.com/FNSKtZH/ae2/tree/docx

Some data:

• PC is Windows 10 up to date
• building on Ubuntu on Windows
• gatsby-theme-docz: 2.0.0-rc.39

[barbalex]

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 of dom-helpers "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?

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

[rakannimer]

Hey @barbalex

I think you're right, the problem is from conflicting required versions of dom-helpers with breaking changes between them 😓

You could maybe try using an older version of @material-ui/core to be compatible with your graphql-voyager#@material-ui/core dependency.

That would make all dependencies to dom-helpers ask for version 3.4.0

Or you could submit PRs to :

• react-swipeable-views and update dom-helpers dependency
• graphql-voyager and update material-ui/core dependency
• scroll-behavior to update dom-helpers version and propagate it to gatsby-react-router-scroll and then upstream to gatsby.

[barbalex]

@rakannimer Thanks, I am trying to do that, see https://github.com/react-bootstrap/dom-helpers/issues/51#issuecomment-531189070 and following comments.

~I guess this problem has nothing to do with docz itself so the issue could be closed.~

[TrySound]

@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

[rakannimer]

@TrySound Thanks ! I was following along the conversation https://github.com/react-bootstrap/dom-helpers/issues/51

I'm honestly not sure why that would happen.

EDIT: I read @jquense's reply I might have an idea why this is happening, will explore more tomorrow.

[artem-popov]

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.

1. First of all, remove useless "resolutions" from above
2. Install explicit [email protected] for docz
   yarn add [email protected] -D
3. Install fake package [email protected] accessible with other name
   yarn add dom-helpers5@npm:[email protected] -D
4. add alias in projects's webpack for accessing dom-helpers
   resolve: { ... alias: { 'dom-helpers': 'dom-helpers5' } },
5. Done! docz uses 3.4.0, my project 5.1.3

[rahul3103]

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 ?

[GabeCabrera]

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.

[pete-lennart]

Same problem as described by @rahul3103 at my side. Cannot confirm @GabeCabrera 's fix.

[aleksandervalle]

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.

[rakannimer]

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.

[aleksandervalle]

@rakannimer Superb. Docz is fantastic, thanks for doing an awesome job! :-)

[rakannimer]

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.

[behnammodi]

I resolved

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