Docz: Invaild hook call when running builded docz

[shmidt-i]

Bug Report

Describe the bug
After docz build when you serve the files and open the application, you have runtime error, which makes JS fail and the page not interactive

A clear and concise description of what the bug is.
Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings
Invalid hook call, which can be due to many things.

To Reproduce

1. Make sure you have clean cache by removing .cache inside .docz
2. Run docz build
3. Try to serve the statics, e.g. docz serve
4. See error

Expected behavior

Builded page should work

Environment

• OS: MacOS
• Node/npm version: Node v12.9.0 / yarn v1.17.3

Additional context/Screenshots
Happens in @mdx-js's useMDXComponents hook:
var contextComponents = React.useContext(MDXContext); <- this line shoots for some reason.

yarn.lock's entries:

[email protected], react@^16.8.0, react@^16.9.0:
  version "16.9.0"
  resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa"
  integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
    prop-types "^15.6.2"

[email protected], react-dom@^16.9.0:
  version "16.9.0"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
  integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==
  dependencies:
    loose-envify "^1.1.0"
    object-assign "^4.1.1"
    prop-types "^15.6.2"
    scheduler "^0.15.0"

So, versions match at least

No errors during build step, only because I redefined Header and NavLink components in gatsby-theme-docz. Also, for some reason SSR for styled-components was broken and styled-components stylesheet updating was broken in playground, which I fixed locally and maybe can submit it later.

Also, dev mode works just okay.

Big thanks if somebody will have time to look through this issue!

[rakannimer]

Hello @shmidt-i

Thanks for reporting this, I got the same issue here : #1037

The problem is that two versions of React are being included in the production build the one in /.docz/node_modules/react and /node_modules/react

I'll start working on a fix as soon as I fix the "interactivity" problem of the built version. I will update here when it's released.

Meanwhile, which docz version are you using ?

[shmidt-i]

Docz version: 2.0.0-rc.10
I though that it may be because of two versions of react, but:

$ cat .docz/node_modules/react/package.json | grep version
  "version": "16.9.0",
$ cat node_modules/react/package.json | grep version
  "version": "16.9.0"

Also, did manual deduplication of both yarn.lock's on the top level and in .docz/

UPD: also, same goes for react-dom

[rakannimer]

Yep I mistakenly said versions, I meant 2 instances of React being used in the prod build.

To confirm this, try removing .docz/node_modules/react and then run npm run build the invalid hook error should disappear.

[shmidt-i]

That works indeed! But playground now just renders the component inside, no live :(
How can I help?

[rakannimer]

Thanks for the offer to help !

Hopefully it won't be necessary, I already started working on a fix that should be done in a couple of hours.

Will update here when I release it.

[rakannimer]

Should be fixed in [email protected]

If updating docz in an existing project :

rm -rf .docz/ && yarn add docz@next && yarn docz dev 

yarn docz build && yarn docz serve

Could you let me know if it works as expected on your project ?

[shmidt-i]

Yes indeed! Nice job!!

Some things are still broken, but I'm gonna create other issues out of that ;)

[rakannimer]

Awesome!

Keep them coming so we can get to a flawless v2 :)

[ChangerHe]

Same question. but when I close typescript, the problem resolved.