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

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

npx create-react-app my-app && cd my-app
yarn add docz docz-theme-default --dev
Create a basic mdx file
yarn docz dev
A blank page appears
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

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 34
Comments: 31 (10 by maintainers)

Commits related to this issue

Prevent docz from throwing TypeError Ref: https://github.com/pedronauck/docz/issues/536 — committed to iCHEF/transcharts by hsunpei 5 years ago

Most upvoted comments

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

+24

elv1n on Dec 22, 2018

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.

burtyish on Jan 3, 2019

@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.

swyxio on Jan 30, 2019

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

Hoping this gets fixed soon!

KingScooty on Jan 20, 2019

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.

lorenzorapetti on Jan 19, 2019

@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

elv1n on Dec 22, 2018

npm workaround: npm i buble@0.19.6 ansi-styles@3.2.0 docz docz-theme-default

wonskarol on Mar 15, 2019

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

rm yarn.lock && yarn

rot1024 on Jan 16, 2019

@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.

IssueHuntBot on Mar 14, 2019

Thank @schalkventer. You saved my time.

duongdev on Feb 15, 2019

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"
}

schalkventer on Feb 13, 2019

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

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

to your package.json and run yarn again

swyxio on Feb 12, 2019

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

💰 Total deposit: $2.00
🎉 Repository reward(20%): $0.40
🔧 Service fee(10%): $0.20

IssueHuntBot on Mar 26, 2019

Having the same issue, even with regenerating the yarn lockfile

carloscuesta on Jan 30, 2019

In my repository, it works by regenerating yarn.lock…
rm yarn.lock && yarn

Cheers! It works.

nerdmax on Jan 17, 2019

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

theparthy on Dec 28, 2018