Import order wrongly causing "Element type is invalid" errors in stories

Description

When using a component import/export entry-point for terse imports throughout the application the order of imports can cause unexpected errors in Storybook only; not in the yarn start environment or compiled application. The error 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.

Imagine we have a components/ directory, in which we have an import/export entry-point index.js and each component has its own directory A/ and B/.

src/components/index.js:

// This order causes no errors in `yarn start` but causes an error in the story for component A
import { A } from "./A";
import { B } from "./B";
// This order causes no errors anywhere
// import { B } from "./B";
// import { A } from "./A";

// It doesn't matter in which order we export (A,B or B,A), only the order of the import causes the error
export { A, B };

This behaviour only appears to affect a component if it itself imports another component which appears below itself in the import/export entry-point.

For example in the above example component A itself imports component B to use within its render, and the only way to avoid the error in the story for component A is to remove component B from it or to swap the order of the imports in src/components/index.js.

Reproduction repo below for simpler demonstration.

To Reproduce

I understand that the description may be a little confusing to follow so I have created a barebones CRA + Storybook + 2 components reproduction repository which also causes the error.

Reproduction: https://github.com/chrisdunnbirch/storybook-import-bug

1. Clone [e-mail]:chrisdunnbirch/storybook-import-bug.git
2. Run yarn install
3. Run yarn storybook
4. Check A > Story in Storybook (should render with above error) a. Run yarn start (should render as expected: “AB”)
5. Comment lines 4-5 and uncomment lines 8-9 in src/components/index.js
6. Check A > Story in Storybook (should render as expected: “AB”)

Expected behavior

The story renders without error, as expected based on the behaviour of the yarn start environment and compiled application.

System

I first noticed this in a large TypeScript project which at the time had 5.3.0-rc.10 installed and the issue is still present in 5.3.6. The example reproduction repo above is the absolute barebones CRA + Storybook + 2 components with no TypeScript.

Additional context

It is worth noting that I have added a .env with NODE_PATH=src to recreate the behaviour of absolute imports that the CRA TypeScript preset allows by default.

[Jack-Works]

Also having this problem on Storybook 6

[GLosch]

storybook version 6.2.1 resolves this issue for me