Gatsby default components and Storybook

[joshuacox]

Following along with:
#28304
and
https://www.gatsbyjs.com/docs/how-to/testing/visual-testing-with-storybook/

I am experimenting with adding storybook to gatsby. After adding storybook to the default starter, I attempt to swap out the storybook header with the gatsby default header component.

In Header.stories.js, I swap out this import:

import { Header } from './Header';

to

import { Header } from '../components/header';

And I get this as an error in the storybook interface:

Cannot read property 'displayName' of undefined
TypeError: Cannot read property 'displayName' of undefined
    at displayName (http://localhost:6006/vendors~main.3b164e01d117462e1ac9.bundle.js:11848:22)
    at parseReactElement (http://localhost:6006/vendors~main.3b164e01d117462e1ac9.bundle.js:143123:21)
    at reactElementToJsxString (http://localhost:6006/vendors~main.3b164e01d117462e1ac9.bundle.js:143602:21)
    at http://localhost:6006/vendors~main.3b164e01d117462e1ac9.bundle.js:11861:76
    at mapSingleChildIntoContext (http://localhost:6006/vendors~main.3b164e01d117462e1ac9.bundle.js:147076:26)
    at traverseAllChildrenImpl (http://localhost:6006/vendors~main.3b164e01d117462e1ac9.bundle.js:146934:5)
    at traverseAllChildren (http://localhost:6006/vendors~main.3b164e01d117462e1ac9.bundle.js:147019:10)
    at mapIntoWithKeyPrefixInternal (http://localhost:6006/vendors~main.3b164e01d117462e1ac9.bundle.js:147101:3)
    at Object.mapChildren [as map] (http://localhost:6006/vendors~main.3b164e01d117462e1ac9.bundle.js:147125:3)
    at renderJsx (http://localhost:6006/vendors~main.3b164e01d117462e1ac9.bundle.js:11858:43)

As an attempt to fix this you can alter this line in components/Header.js

const Header = ({ siteTitle }) => (

to

export const Header = ({ siteTitle }) => (

and get rid of the export default at the bottom of the file. However this triggers errors in the gatsby render:

×
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Layout`.

Which leads me to believe that this is not the correct remedy. What is the correct method of adding the default components to storybook?