callstack / callstack/component-docs

Packages upgrade in v0.24.0 introduce many breaking changes

オープン
#49 コメント 1 件 リアクション 2 件 担当者 1 名 @satya164 が担当を希望しています GitHub で見る
主要言語
TypeScript
スター
141
フォーク
12
PR マージ指標
30日以内にマージされた PR はありません

説明

## Environment

- macOS 10.15
- Node.js 12.18.4
- `component-docs` @ 0.24.0

## Description

Although the example in this repo work as expected, if we use `component-docs`@0.24.0 as a dependency in another project, the new version breaks the `serve` as well as `build` command like in below screenshot:

Screenshot 2020-11-04 at 7 17 59 PM

Another escalation of the issue I found out next is that, if my main project has `react` as direct dependency but its major version is different from `component-docs@0.24.0`'s one (which is ^17.0.1). Say, my project still has `react@^16.14.0`, then when I execute the `component-docs serve` command, I got this error:

```
Error: Cannot find module '@mdx-js/tag'
...
```

I have to install `@mdx-js/tag` as direct dependency now, then get a couple of errors regarding missing: `react-dom` and `redbox-react`. However, once I installed those missing dependencies, I get this run time error:

```
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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
```

## Reproducible Demo

`cd` into **example** folder, and init a `package.json`. Add `component-docs@0.24.0` as dependency and with some scripts like so:

```
{
"name": "test-component-docs",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "component-docs build",
"docs": "component-docs serve"
},
"devDependencies": {
"component-docs": "^0.24.0"
}
}
```

1. First execute `yarn docs` and observe the broken layout of the preview site.
2. Add `react@16.14.0` as direct dependency and observe the compile time error
3. Add the missing dependencies and observe the errors.

## Suggestion

I don't know what happen yet but regarding the mismatch react version, I think we should move `react`, `react-dom` to devDependencies and peerDependencies so that component-docs should use the `react` version in consuming projects and avoid versions conflict.

コントリビューションガイド

コントリビューションガイドを開く

評価

この issue はまだ評価されていません。

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。