Docz: Stuck trying to run docz dev

[bugzpodder]

Just tried docz rc 1.0.0 rc3 and got the following multiple instances of error:

✖ fatal Error parsing static types
✖ error Error: No suitable component definition found.
at parse (/Users/bugzpodder/ui/node_modules/docz-core/node_modules/react-docgen/dist/parse.js:70:13)
at Object.defaultParse [as parse] (/Users/bugzpodder/ui/node_modules/docz-core/node_modules/react-docgen/dist/main.js:64:29)
at resolve (/Users/bugzpodder/ui/node_modules/docz-core/dist/index.js:1412:38)
at new Promise ()
at jsParser (/Users/bugzpodder/ui/node_modules/docz-core/dist/index.js:1409:12)
at Promise.all.files.map (/Users/bugzpodder/ui/node_modules/docz-core/dist/index.js:1430:15)
at Array.map ()
at docgen (/Users/bugzpodder/ui/node_modules/docz-core/dist/index.js:1427:42)

Turning debug: off and the UI is stuck at this:
● Docz █████████████████████████ building (10%) 2/4 modules 2 active
../node_modules/url/url.js

After about 5 minutes I get a build success with the following UI error:
Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

  10 |   useDataServer('ws://127.0.0.1:60505')
  11 |   return (
  12 |     <Theme linkComponent={Link} db={database}>
> 13 |       <Routes imports={imports} />
     |      ^  14 |     </Theme>
  15 |   )
  16 | }

  11 | const root = document.querySelector('#root')
  12 | const render = (Component = Root) => {
  13 |   onPreRender()
> 14 |   ReactDOM.render(<Component />, root, onPostRender)
     |  ^  15 | }
  16 | 
  17 | render(Root)

[mwood23]

Ran into this today and looked in the package.json file for Docz. I saw that the React typings they are using is for ^16.8.2. I was using React ^16.8.3 for the project I have Docz on.

Make sure you're running the following versions of React in the project you have Docz on:

    "react": "^16.8.2",
    "react-dom": "^16.8.2",

After that, blast away the .docz folder and node_modules. Finally, re-install node_modules and run docz and you should be good!

What's interesting is that I don't see any peer dependencies stating the version of React that needs to be installed to run the project. @pedronauck Happy to put in a PR to update the Readme and add the specific React version to the package.json.

[pedronauck]

What @mwood23 told should fix this problem.

[bugzpodder]

@pedronauck It doesn't.
I pinned my react to 16.8.2 in package.json and docz automatically installs 16.8.6 so now I have two versions of react installed (according to yarn why)
I changed my react to 16.8.6 and now there is only one version but it still won't stack with the same errors above.

[bugzpodder]

DOCZ_SOURCE=./src/ yarn docz dev debug
yarn run v1.15.2
$ ~/dev/node_modules/.bin/docz dev debug

● Docz █████████████████████████ building (10%) 2/4 modules 2 active
  ../node_modules/url/url.js


<--- Last few GCs --->

[68584:0x102645000]   123578 ms: Mark-sweep 1391.3 (1424.5) -> 1390.8 (1423.5) MB, 645.1 / 0.0 ms  (average mu = 0.091, current mu = 0.038) allocation failure scavenge might not succeed
[68584:0x102645000]   123583 ms: Scavenge 1391.6 (1423.5) -> 1391.1 (1424.0) MB, 2.7 / 0.0 ms  (average mu = 0.091, current mu = 0.038) allocation failure 
[68584:0x102645000]   123587 ms: Scavenge 1391.8 (1424.0) -> 1391.3 (1424.5) MB, 2.5 / 0.0 ms  (average mu = 0.091, current mu = 0.038) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x17ac3f1dbe3d]
Security context: 0x31c23fe9e6e1 <JSObject>
    1: /* anonymous */ [0x31c2e77794f9] [~/dev/node_modules/ast-types/lib/path-visitor.js:~174] [pc=0x17ac3f9c941f](this=0x31c2a9841179 <Object map = 0x31c2a3acbf79>,path=0x31c2b54c0d49 <NodePath map = 0x31c2a3ac6881>)
    2: /* anonymous */ [0x31c2e77794f9] [~/dev/node_modules/ast-types/lib/path-visitor.js:~174] [pc=0x17ac3f9...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x10003b125 node::Abort() [~/.nvm/versions/node/v10.15.0/bin/node]
 2: 0x10003b32f node::OnFatalError(char const*, char const*) [~/.nvm/versions/node/v10.15.0/bin/node]
 3: 0x1001a8e85 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [~/.nvm/versions/node/v10.15.0/bin/node]
 4: 0x1005742a2 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [~/.nvm/versions/node/v10.15.0/bin/node]
 5: 0x100576d75 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [~/.nvm/versions/node/v10.15.0/bin/node]
 6: 0x100572c1f v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [~/.nvm/versions/node/v10.15.0/bin/node]
 7: 0x100570df4 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [~/.nvm/versions/node/v10.15.0/bin/node]
 8: 0x10057d68c v8::internal::Heap::AllocateRawWithLigthRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [~/.nvm/versions/node/v10.15.0/bin/node]
 9: 0x10057d70f v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [~/.nvm/versions/node/v10.15.0/bin/node]
10: 0x10054d054 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [~/.nvm/versions/node/v10.15.0/bin/node]
11: 0x1007d4f24 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [~/.nvm/versions/node/v10.15.0/bin/node]
12: 0x17ac3f1dbe3d 
13: 0x17ac3f9c941f 
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[rafalpetryka]

It is probably because, docz, and docz-theme-default not using react and react-dom as peerDependency. Unfortunately I don't know if the right way to fix this problem is make a pull request with dependency as peerDependency. So I can present workaround. I'm using npm so i've installed that library (https://github.com/rogeriochaves/npm-force-resolutions). That lib forces our dependencies to use only one library (without duplicated). So after installation I added this to my package.json

"resolutions": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
}

And docz works again ;)
PS. I've using rc7 and rc8 versions. Maybe this problem will be resolved in next versions

[christopherjbaker]

I had the same issue. My project was at 16.8.2 when I upgraded docz, so docz got its own copy of react at 16.8.6. Once I obliterated my node_modules and package-lock and reinstalled, it deduped the one in docz and the problem went away.

This is exactly what peerDependencies is for.

[yyynnn]

Still got this error:
Error parsing static types × error Error: No suitable component definition found.

But build and dev works fine though

[camilatropia]

Hey guys, i've got the same problem, my package.json looks like this:

{
"name": "driver-app",
"version": "0.1.0",
"private": true,
"homepage": "/react/",
"dependencies": {
"axios": "^0.18.0",
"history": "^4.9.0",
"react": "^16.8.2",
"react-dom": "^16.8.2",
"react-css-modules": "^4.7.9",
"react-modal": "^3.8.1",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.5",
"react-slick": "^0.23.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"docz:dev": "docz dev",
"docz:build": "docz build"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"docz": "latest",
"docz-theme-default": "^1.0.4",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"svg-sprite-loader": "^4.1.3"
}
}

can anyone help?

[alexhawkins]

same issue

[johntran]

How I & @alexhawkins fixed it

My situation was that I have a monorepo that's managed by npm scripts, no monorepo tool like Lerna.

I have a frontend folder that contains all of our Gatsby apps. The frontend repo package.json has

  "resolutions": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
"dependencies" : {
    "react": "16.8.6",
    "react-dom": "16.8.6"
},
  "devDependencies": {
    "docz": "^1.0.4",
    "docz-theme-default": "^1.0.4"
}

1. Add .docz to .gitignore
2. In frontend folder, rm -rf node_modules package-lock.json .docz
3. In frontend folder, npm i
4. In frontend folder, docz dev

Should work out. For people reading this in the future, your react dependencies might have to match up with whatever React version is in https://github.com/pedronauck/docz/blob/master/core/docz/package.json

[newtriks]

After trying all of the above, I also found that upgrading to V1 results in the same stack trace no matter how I fix versions of React, etc.

● Docz █████████████████████████ building (11%) 9/16 modules 7 active
 node_modules/docz-core/node_modules/webpack-dev-server/client/overlay.js


<--- Last few GCs --->

[7187:0x10276f000]    28993 ms: Scavenge 1389.3 (1422.5) -> 1388.9 (1423.0) MB, 2.2 / 0.0 ms  (average mu = 0.093, current mu = 0.039) allocation failure 
[7187:0x10276f000]    28996 ms: Scavenge 1389.6 (1423.0) -> 1389.2 (1423.5) MB, 2.2 / 0.0 ms  (average mu = 0.093, current mu = 0.039) allocation failure 
[7187:0x10276f000]    29000 ms: Scavenge 1389.9 (1423.5) -> 1389.5 (1424.5) MB, 2.4 / 0.0 ms  (average mu = 0.093, current mu = 0.039) allocation failure 


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x14a3e9a4fc7d]
Security context: 0x3042e899d949 <JSObject>
    1: getMembers(aka getMembers) [0x3042a4ca4ef9] [/Users/simon.bailey/src/web-ui/node_modules/react-docgen/dist/utils/getMembers.js:~43] [pc=0x14a3ea33dc3e](this=0x3042c9e825b1 <undefined>,0x3042b2f35bc1 <NodePath map = 0x3042a6c16111>,0x3042c9e82741 <true>)
    2: getPropType(aka getPropType) [0x3042dec3fd21] [/Users/simon.bailey/src/web-ui/node_modules/r...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x100062991 node::Abort() [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
 2: 0x100063030 node::errors::TryCatchScope::~TryCatchScope() [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
 3: 0x10019cf37 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
 4: 0x10019ced4 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
 5: 0x1005a2032 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
 6: 0x1005a4563 v8::internal::Heap::CheckIneffectiveMarkCompact(unsigned long, double) [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
 7: 0x1005a0a98 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
 8: 0x10059ec55 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
 9: 0x1005ab4fc v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
10: 0x1005ab57f v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
11: 0x10057a774 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
12: 0x10082cc94 v8::internal::Runtime_AllocateInNewSpace(int, v8::internal::Object**, v8::internal::Isolate*) [/Users/simon.bailey/.nvm/versions/node/v11.7.0/bin/node]
13: 0x14a3e9a4fc7d 

[draperunner]

I also ended up with double React installations in my project when trying to use a custom theme from a separate repo that was linked locally with npm link. I could get around it by deleting react from the theme's node_modules and symlinking the doc project's react to the theme's node_modules... But I encountered some other issues and gave up on having my theme in a separate repo.

[kevinSuttle]

Ditto. Same package versions, tried adding a resolutions field, etc. Same stack trace.

[fullstackzach]

Any updates on this? I too tried pinning react to 16.8.6, removed node_modules and package-lock.json to get deduped react versions, but still encounter this error

[saimonmoore]

Would something like this help? https://github.com/pedronauck/docz/pull/882

[bugzpodder]

A coworker recommended set api.cache(true) in babel.config.js if you use it to get it working.
https://babeljs.io/docs/en/configuration

[reneolivo]

rebuilding the package-lock.json worked for me.

[hipstersmoothie]

Still getting this error. Pinned deps were working but not no more

[rakannimer]

Hey @hipstersmoothie

Could you please provide the docz version you're using ?

[wldcordeiro]

I get this problem on latest of the v1 releases. Seeing as v2 seems to have stalled out on the infinite RC status I worry about this package stability for either major version.

[rakannimer]

Hey @wldcordeiro

V2 will get out of RC status next Monday November 25.

Did you give it a try ?

I encourage you to try it and if you face any problems we'll be happy to help ! Or feel free to wait for next week 👍

[Clarity-89]

@rakannimer Just wanted to mention that the errors will still be displayed in console in v2 when debug is set to true in doczrc.js, not sure if that's intentional and if those errors have any impact.

[rakannimer]

Hey @Clarity-89

I'm not sure which errors are appearing.
It's not intentional and I wasn't able to reproduce.

Any chance you can provide a repro or tell me more about your project where it's happening ?

[Clarity-89]

@rakannimer The errors related to the types:

✖  fatal     Error parsing static types
✖  error     Error: No suitable component definition found. 
at parse (/Users/user/dev/uikit/node_modules/react-docgen/dist/parse.js:70:13)
at Object.defaultParse [as parse] (/Users/user/dev/uikit/node_modules/react-docgen/dist/main.js:64:29)
at parseFilepathProps (/Users/user/dev/uikit/node_modules/docz-core/dist/index.js:1898:33)
at Array.map (<anonymous>)
    at jsParser (/Users/user/dev/uikit/node_modules/docz-core/dist/index.js:1909:16)
    at docgen (/Users/user/dev/uikit/node_modules/docz-core/dist/index.js:2116:102)

Unfortunately the project is commercial code, so can't really share the repo.

It's basically a monorepo UI component library managed by Lerna. I wonder if the error could be due to some of the dependencies? It does not seem to impact the running app in any way tho.

[Clarity-89]

@rakannimer I was able to reproduce the warning in a small monorepo with one package. You can find it here: https://github.com/Clarity-89/uikit.
Steps to reproduce:

1. Clone the repo
2. run yarn install
3. run docz dev

The error shows after createSchemaCustomization step. I tried it using Node 10.16.2 and 13.2.

Let me know if you need any more info.

[milufranz08]

I'm still having this issue. If I install Docz in my React app, I get more than one copy of React in the same app:

I tried using npm force-resolutions and it does not solve this issue in my case.

I've noticed that Docz uses the following versions of react and react-dom:
"react": "^16.8.0",
"react-dom": "^16.8.0"

And my project is using 16.13.1, could this be the issue?

Please any help would be very much appreciated!