dumi icon indicating copy to clipboard operation
dumi copied to clipboard

bug: 升级 rc-4 之后,渲染有自动 API 的文档时报错

Open zhaoyao91 opened this issue 5 years ago • 5 comments

API.tsx:38 Uncaught TypeError: Cannot read property 'map' of undefined
    at push../node_modules/dumi-theme-default/src/builtins/API.tsx.__webpack_exports__.default (API.tsx:38)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22154)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at react-dom.development.js:11089
    at unstable_runWithPriority (scheduler.development.js:653)
    at runWithPriority$1 (react-dom.development.js:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
    at flushSyncCallbackQueue (react-dom.development.js:11072)
    at scheduleUpdateOnFiber (react-dom.development.js:21199)
    at dispatchAction (react-dom.development.js:15660)
    at checkForUpdates (use-subscription.development.js:87)
    at index.esm.js:674
    at Set.forEach (<anonymous>)
    at LoadableSubscription._update (index.esm.js:673)
    at index.esm.js:656
push../node_modules/dumi-theme-default/src/builtins/API.tsx.__webpack_exports__.default @ API.tsx:38
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
dispatchAction @ react-dom.development.js:15660
checkForUpdates @ use-subscription.development.js:87
(anonymous) @ index.esm.js:674
_update @ index.esm.js:673
(anonymous) @ index.esm.js:656
Promise.then (async)
retry @ index.esm.js:655
LoadableSubscription @ index.esm.js:610
init @ index.esm.js:519
LoadableComponent @ index.esm.js:560
renderWithHooks @ react-dom.development.js:14803
updateForwardRef @ react-dom.development.js:16816
beginWork @ react-dom.development.js:18645
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168
devScripts.js:5836 The above error occurred in one of your React components:
    in Unknown (at box.zh-CN.md:21)
    in div (at box.zh-CN.md:18)
    in Unknown (created by LoadableComponent)
    in LoadableComponent (created by Context.Consumer)
    in Route (created by Context.Consumer)
    in Switch (created by Context.Consumer)
    in component (created by Context.Consumer)
    in div (at layout.tsx:82)
    in div (at layout.tsx:61)
    in Layout (at layout.tsx:34)
    in div (at layout.tsx:33)
    in Layout (created by LoadableComponent)
    in LoadableComponent (created by Context.Consumer)
    in OuterLayout (created by LoadableComponent)
    in LoadableComponent (created by Context.Consumer)
    in Route (created by RouterComponent)
    in Switch (created by RouterComponent)
    in Router (created by RouterComponent)
    in RouterComponent

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.<computed> @ devScripts.js:5836
overrideMethod @ react_devtools_backend.js:2430
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
update.callback @ react-dom.development.js:20708
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19883
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
dispatchAction @ react-dom.development.js:15660
checkForUpdates @ use-subscription.development.js:87
(anonymous) @ index.esm.js:674
_update @ index.esm.js:673
(anonymous) @ index.esm.js:656
Promise.then (async)
retry @ index.esm.js:655
LoadableSubscription @ index.esm.js:610
init @ index.esm.js:519
LoadableComponent @ index.esm.js:560
renderWithHooks @ react-dom.development.js:14803
updateForwardRef @ react-dom.development.js:16816
beginWork @ react-dom.development.js:18645
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

Versions

  • dumi: ^1.1.0-rc.4
  • node:
  • npm:
  • OS:
  • Browser:

Steps to reproduce

What is Expected?

What is actually happening?

zhaoyao91 avatar Nov 27 '20 10:11 zhaoyao91

请提供复现步骤或 repo

PeachScript avatar Nov 30 '20 07:11 PeachScript

代码是内部的,不太方便公开,现在锁定到比较小的复现步骤如下

  • .md 文档中使用 ts 文件作为 API src,如 <API src="./button/api.ts" />
  • api.ts 文件中,从其他库导入了组件,进行了适当的筛选和名称修正,然后重新导出,如
// @ts-nocheck

import { Button } from 'xxx';

export const _Button = Button;
_Button.displayName = 'Button';

export const _Group = Button.Group;
_Group.displayName = 'Button.Group';
  • 观察到,如果对 displayName 的设置,就可以工作。但是原封不动的代码,在 rc-2 的上是可以正确运行的

zhaoyao91 avatar Nov 30 '20 10:11 zhaoyao91

缩小范围,更新到 rc.3就不行了

浏览了一下 rc2 -> rc3,确实涉及到 parse api 的相关改动,不知道是不是产生了某些问题

https://github.com/umijs/dumi/compare/[email protected]@1.1.0-rc.3

zhaoyao91 avatar Dec 02 '20 07:12 zhaoyao91

或者,能否了解下,如何暴露 npm 包中的组件的 API 而不是项目中新写的,但同时合理的控制暴露哪些模块,每个模块按什么名字来展示?

zhaoyao91 avatar Dec 25 '20 02:12 zhaoyao91

导出的组件没写 displayName,或者没和组件名一致,都会有渲染错误问题

xiaohuoni avatar Jan 13 '21 02:01 xiaohuoni

dumi v1 不再更新,issue 关闭

PeachScript avatar Jan 28 '23 10:01 PeachScript