在 './Modal 中找不到导出 'default'（重新导出为 'Modal'）

Question

为什么我从 Storybook 收到以下警告：

WARNING in ./src/components/index.js 24:0-65
"export 'default' (reexported as 'Modal') was not found in './Modal'

./src/components/index.js 24

export { default as Modal, ModalNew, ModalVideo } from './Modal';

./src/components/Modal/index.js

export { default as ModalNew } from './ModalNew';
export { default as ModalAdapter } from './ModalAdapter';
export { default as ModalVideo } from './ModalVideo';

./src/components/Modal/ModalNew.js

import React from 'react';
import PropTypes from 'prop-types';
import StyledModal from './StyledModal';
import Header from './Header';
import Body from './Body';

const ModalNew = ({
  children,
  ...rest
}) => (
  <StyledModal {...rest}>
    {children}
  </StyledModal>
);

ModalNew.Header = Header;
ModalNew.Body = Body;

ModalNew.propTypes = {
  children: PropTypes.node.isRequired,
};

export default ModalNew;

Answer 1

default 是一个非常特殊的词，当涉及到 JS 模块时，规则是你 cannot import a default if you're importing from不导出默认值，使用 export default ....

所以在您显示的代码中，index.js 正在导入不存在的默认值：

export { default as Modal, ModalNew, ModalVideo } from './Modal';

相当于：

import { default as Modal, ModalNew, ModalVideo } from './Modal';
export { Modal, ModalNew, ModalVideo };

但是如果我们查看您的模态代码，我们会看到：

export { default as ModalNew } from './ModalNew';
export { default as ModalAdapter } from './ModalAdapter';
export { default as ModalVideo } from './ModalVideo';

显示三个命名导出，而不是一个 export default。要导入这些，请按字面意思执行：

export { Modal, ModalNew, ModalVideo } from './Modal';

或者更短：

export * from './Modal';

当然，最好确保 ModalNew、ModalAdapter 和 ModalVideo 不使用默认导出，而是也导出命名实体，这样您的Modal 代码也不需要做奇怪的默认别名，但你可以说：

export * from './ModalNew';
export * from './ModalAdapter';
export * from './ModalVideo';

在 './Modal 中找不到导出 'default'（重新导出为 'Modal'）

export 'default' (reexported as 'Modal') was not found in './Modal

reactjs

storybook