"Element type is invalid" on import

[GaelFerrand]

Describe the bug
A bug occurs when running Jest / Storybook snapshot testing of components using the library 'react-syntax-highlighter' (https://github.com/react-syntax-highlighter/react-syntax-highlighter). I am not sure that the bug is really linked to the library but rather to the way it exports its components.

Bug stacktrace:
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.

To Reproduce

1. Import 'react-syntax-highlighter' in a component and use it :

import { PrismLight } from 'react-syntax-highlighter';
import scala from 'react-syntax-highlighter/dist/esm/languages/prism/scala';
import okaidia from 'react-syntax-highlighter/dist/esm/styles/prism/okaidia';

// Actually use 'scala'
PrismLight.registerLanguage('scala', scala);

2. Run Jest / Storybook snapshot testing
3. The tests will fail with the stack strace described above.

Hint
The bug really seems to be linked to the imports. The 'react-syntax-highlighter/dist/esm/languages/prism/scala' import leads to this piece of code :

declare module "react-syntax-highlighter/dist/esm/languages/prism/scala" {
    const language: any;
    export default language;
}

I don't know if this syntax is somewhat unexpected for Storybook. Also worth noting, Storybook does not fail and displays the components correctly. It is the snapshot testing with Jest that fails.

Additional context
Storybook dependencies :

"@storybook/addon-actions": "^6.1.10",
"@storybook/addon-storyshots": "^6.1.5",
"@storybook/react": "^6.1.5",
"@storybook/addon-essentials": "^6.1.5",
"@storybook/addon-links": "^6.1.5",
"@storybook/addon-viewport": "^6.1.10",
"@storybook/node-logger": "^6.1.5",
"@storybook/preset-create-react-app": "^3.1.5",

React version :

"react": "^17.0.1",

Jest version :

"@testing-library/jest-dom": "^5.11.4",

Typescript version :

 "typescript": "^4.0.3"

[shilman]

I don't think this is a problem with Storybook.

import scala from 'react-syntax-highlighter/dist/esm/languages/prism/scala';
import okaidia from 'react-syntax-highlighter/dist/esm/styles/prism/okaidia';

This is importing the ESM version of the style. You should be able to import the CJS version instead:

import scala from 'react-syntax-highlighter/dist/cjs/languages/prism/scala';
import okaidia from 'react-syntax-highlighter/dist/cjs/styles/prism/okaidia';

Or you could try to get Jest to process ESM. If you figure that out, I'd love to get that back into Storybook so we can move to ESM entirely in 6.2.

[GaelFerrand]

I don't think this is a problem with Storybook.

import scala from 'react-syntax-highlighter/dist/esm/languages/prism/scala';
import okaidia from 'react-syntax-highlighter/dist/esm/styles/prism/okaidia';

This is importing the ESM version of the style. You should be able to import the CJS version instead:

import scala from 'react-syntax-highlighter/dist/cjs/languages/prism/scala';
import okaidia from 'react-syntax-highlighter/dist/cjs/styles/prism/okaidia';

Or you could try to get Jest to process ESM. If you figure that out, I'd love to get that back into Storybook so we can move to ESM entirely in 6.2.

You sir, saved my day. Thanks a lot! (went for cjs imports)