Docz: Uncaught TypeError: Cannot read property 'close' of undefined

[lorenzorapetti]

Bug Report

Describe the bug

When i add docz to a create-react-app and start the server, it shows a blank page and it gives me this error.

To Reproduce

1. npx create-react-app my-app && cd my-app
2. yarn add docz docz-theme-default --dev
3. Create a basic mdx file
4. yarn docz dev
5. A blank page appears
6. See this error in console:

Uncaught TypeError: Cannot read property 'close' of undefined
    at Object.eval (index.js?e094:72)
    at eval (index.js:230)
    at Object../node_modules/chalk/index.js (vendors.js:554)
    at __webpack_require__ (runtime~app.js:801)
    at fn (runtime~app.js:164)
    at eval (formatWebpackMessages.js?5b63:10)
    at Object../node_modules/react-dev-utils/formatWebpackMessages.js (vendors.js:6800)
    at __webpack_require__ (runtime~app.js:801)
    at fn (runtime~app.js:164)
    at eval (webpackHotDevClient.js?7ef4:23)

Expected behavior

The app should work

Environment

• OS: MacOS 10.14.1
• Node/npm version: Node 10.14.2/npm 6.4.1/Yarn 1.12.3

[lorenzorapetti]

If i downgrade to 0.12.17 everything works

[elv1n]

I've noticed that the problem appears when using docz with react-scripts and the reason is a different version of 'ansi-styles'.
Currently, you can fix it with addition resolutions to package.json

  "resolutions": {
    "ansi-styles": "^3.2.0"
  }

and run yarn

[elv1n]

@pedronauck It's easy to reproduce, yarn add react-scripts in examples/basic.
Changing "chalk" in docz-core from "^2.4.1" to "2.4.1" will fix it.

On local machine it works in this way
when chalk ^2.4.1 yarn install react-scripts dependencies in root node_modules folder and version that different in docz-core dependencies installs into node_modules/docz-core/node_modules. when chalk 2.4.1 yarn do it vise versa

[sw-yx]

thanks for the tip. is this a fix we should do in docz or in react-scripts? seems like react-scripts is at fault for pinning versions

[theparthy]

I had the same issue using yarn, using npm the issue is not there.

[psullivan6]

TL;DR: I think the issue is docz is referencing the older ansi-styles version from the docz-core node_modules instead of the ansi-styles that comes as a dependency of chalk within the project root node_modules.

I'm not sure if this will help or not @sw-yx, but it appears to be independent of react-scripts. I was able to see the issue in both a fresh create-react-app install as well as another non-CRA app. Further, after digging into chalk I was able to correctly log out ansiStyles.color from a node script calling the same version of chalk. BUT, when doing that same log within the context of the docz webpack build it came back undefined. My initial presumption (haven't confirmed) is the docz-core package leverages an outdated version of ansi-styles via the webpack build process. The issue becomes apparent when comparing /node_modules/ansi-styles/index.js to the docz version: node_modules/docz-core/node_modules/ansi-styles/index.js. Comparing those package's package.json file further highlights the version mismatch and thus the missing color object.

[sw-yx]

mm. cc @pedronauck

[nerdmax]

Having the same issue here. Any updates?

[burtyish]

I can confirm that it's not related to react-scripts. I'm running a non-CRA app and ran into the same issue while setting up docz.

[rot1024]

In my repository, it works by regenerating yarn.lock...

rm yarn.lock && yarn

[nerdmax]

In my repository, it works by regenerating yarn.lock...

rm yarn.lock && yarn

Cheers! It works.

[pedronauck]

It's solved? Can I close this issue guys?

[nerdmax]

It's solved? Can I close this issue guys?

It's ok for me. Cheers!

[lorenzorapetti]

In my repository, it works by regenerating yarn.lock...

rm yarn.lock && yarn

I tried regenerating yarn.lock but it works only if i have

"resolutions": {
  "ansi-styles": "^3.2.0"
}

in my package.json.

Although i can confirm that fixing the version of chalk to 2.4.1 instead of ^2.4.1 in docz-core works even without resolutions. @pedronauck if you want i can submit a PR with this change.

[KingScooty]

Can confirm this is still an issue after regenerating yarn.lock.

Hoping this gets fixed soon!

[carloscuesta]

Having the same issue, even with regenerating the yarn lockfile

[sw-yx]

@pedronauck fwiw i dont consider this solved because you still have to regenerate yarn.lock with the ansi-lock resolution override. many people will be using docz with CRA, we need to make sure that this use case is as smooth as possible.

[schalkventer]

Running into the same problem with CRA, does anyone know if ejecting CRA solves this?

[sw-yx]

@schalkventer you dont need to eject at all. just add

"resolutions": {
  "ansi-styles": "^3.2.0"
}

to your package.json and run yarn again

[schalkventer]

Thanks @sw-yx! 👍

Turns out the reason why I struggled to get it working is because I am using a Yarn monorepo via workspaces. Turns out that you need to put the following in your root monorepo package.json and not in the package.json of the actual project.

"resolutions": {
  "ansi-styles": "^3.2.0"
}

[duongdev]

Thank @schalkventer. You saved my time.

[IssueHuntBot]

@rororofff has funded $2.00 to this issue.

---

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

[wonskarol]

I'm getting the same error in non CRA app.

"resolutions": {
  "ansi-styles": "^3.2.0"
}

didn't help. Using npm not yarn

[sw-yx]

use yarn please. npm has another issue with peer deps that they acknowledge is their fault.

[wonskarol]

Ouch, that's impossible :( In my company we moved back from yarn to npm some time ago and for some reasons (internal tools, ci/cd etc) I can't just use yarn.

What's the issue with npm? Maybe I can help.
That's really pity. docz seems to be great and offers exactly what we need...

[wonskarol]

npm workaround:
npm i [email protected] [email protected] docz docz-theme-default

[sw-yx]

yea its a peer dep thing - https://twitter.com/ReBeccaOrg/status/1098310086269620225 but i didnt know you couldnt use yarn. yarn is just easier to tell people to use :) but yea you can use npm if you pin versions.

[sag1v]

@sw-yx so is this the current solution?

"resolutions": {
  "ansi-styles": "^3.2.0"
}

[pedronauck]

Closed in the newest release.

[IssueHuntBot]

@pedronauck has rewarded $1.40 to @pedronauck. See it on IssueHunt

• :moneybag: Total deposit: $2.00
• :tada: Repository reward(20%): $0.40
• :wrench: Service fee(10%): $0.20

[thomhubers]

npm workaround:
npm i [email protected] [email protected] docz docz-theme-default

@ future wanderers: For another project, npm i [email protected] solved it for me.