Search code examples
reactjsstorybook

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

Why am I getting the following WARNING from 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;
Solution

  • default is a very special word when it comes to JS modules, with the rule being that you cannot import a default if the module you're importing from doesn't export a default, using export default ....

    So in the code you're showing, index.js is importing defaults that don't exist:

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

    is equivalent to:

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

    but if we look at your Modal code, we see:

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

    which shows three named exports, and not a single export default. To import those, literally do that:

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

    or, even shorter:

    export * from './Modal';

    And of course it's a good idea to make sure that ModalNew, ModalAdapter, and ModalVideo don't use default exports but instead export named entities too, so that your Modal code doesn't need to do weird default aliassing either, but you can just say:

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