Element type is invalid: expected a string (for built-in components) or a class/function?

Question

I'm experiencing a strange React/Storybook bug.

The error I'm seeing is:

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.

Here's the code that causes the error:

import React from 'react';
import styled from 'styled-components';

class LogoWordMark extends React.PureComponent {
  static Container = styled.div``;

  render() {
    return (
      <LogoWordMark.Container>
        mnkladjkl asdjklas djkkjlsad jklasdjklasd kl
        <a>asdad</a>
      </LogoWordMark.Container>
    );
  }
}

export default LogoWordMark;

What's strange is if I update one line, with:

    <a onClick={this.blah}>asdad</a>

Then the component renders as expected. Even though this.blah is not defined. Any one have an idea what's going on here?

I'm using:

"react": "16.8.6",
"@storybook/react": "5.1.7",

Answer 1

Based on the full example you posted:

You're exporting Brand there as a default, but not importing it as one. Change import { Brand } from "./Brand"; to just import Brand from "./Brand"; and it should work.

---

This is what the error is trying to warn about at the end:

you might have mixed up default and named imports.