Invariant Violation: Element type is invalid: expected a string

[rodoabad]

Versions

    "@storybook/react": "^5.0.11",
    "storybook-addon-jsx": "^7.1.2"

As soon as I add the addon, I get this error message. If you look at the example component that I have, it is a valid React component.

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.

// addons.js
import 'storybook-addon-jsx/register';

// config.js
import {addDecorator, configure} from '@storybook/react';
import {jsxDecorator} from 'storybook-addon-jsx';

addDecorator(jsxDecorator);

const loadStories = () => {
    const req = require.context('../stories', true, /\.stories\.js$/);
    req.keys().forEach(filename => req(filename));
};

configure(loadStories, module);

// my-component.js
import PropTypes from 'prop-types';
import React from 'react';

export const MyComponent = (props) => (
    <div>{props.greeting}</div>
);

MyComponent.propTypes = {
    greeting: PropTypes.string
};

MyComponent.defaultProps = {
    greeting: 'Hello, world.'
};

// my-component.stories.js
import {MyComponent} from '../src/my-component';
import React from 'react';
import {storiesOf} from '@storybook/react';

storiesOf('MyComponent', module)
    .add('with default greeting', () => (
        <MyComponent/>
    ))
    .add('with custom greeting', () => (
        <MyComponent greeting={'Hello, Rodo!'}/>
    ));

[yakunins]

I also encountrered same error. In my case the problem was like a "circular" imports in components.
I have such a structure:

Button
  button.tsx
Icon
  icon.tsx
all-components.ts

And in button.tsx I have this import:

/* ./Button/button.tsx */
import { Icon } from "../all-components"

Problem solved after I set importing straight from the source:

/* ./Button/button.tsx */
import { Icon } from "../Button/button"

[johnathanludwig]

I'm seeing this issue as well. Similar to the example posted by @roboabad I am not importing other components so there is no circular import. As soon as I remove this addon it starts working. I've tried both the decorator and setAddon methods.

Also I've noticed that when it fails it sometimes renders the JSX in the panel, but the actual component never renders.

[katelynlensch]

I think this may be an issue with React versions. I don't have this issue after upgrading to React 16.7.2