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模块中是一个非常特殊的词，规则是如果要从中导入的模块不则不能导入默认值>导出默认值，使用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不使用默认导出，而是也导出命名实体，以便您的{{ 1}}代码也不需要做奇怪的默认别名，但是您可以说：

Modal

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

1 个答案: