Module import issue with Webpack 5

[jnoer]

Bug report

Error with Create React App when stitches is a dependency of a dependency.

Uncaught TypeError: (0 , _react.createStitches) is not a function

This appears in react-scripts 5 (webpack 5), but not react-scripts 4 (webpack 4).

We have a storybook project that has stitches as a dependency. When we import components from that storybook project, Webpack seems to not be loading the stitches module. @stitches/react doesn't appear in Chrome DevTools node_modules. Storybook doesn't appear to be involved here.

The _react variable above should resolve to a Module, but resolves to a path string with media in the path.

To Reproduce

Minimal apps: https://github.com/jnoer/react-app

This is the package that has stitches as a dependency. It's pulled in by the above project. https://github.com/jnoer/storybook

Expected behavior

Error should not appear and things should work as with react-scripts 4

Screenshots

System information

• OS: [macOS]
• Browser (if applies) [Chrome]
• Version of Stitches: [e.g. 1.2.8]
• Version of Node.js: [16.15.1]

Additional context

Add any other context about the problem here.

[jnoer]

This seems to be the same issue as https://github.com/stitchesjs/stitches/issues/973

[jnoer]

I added a comment to this closed issue which is the same thing, but without a stitches.config.js: https://github.com/stitchesjs/stitches/issues/973

[TheeMattOliver]

Observing same thing in fresh repo after publishing a basic stitches lib bundled with rollup.

The repro on the library side is here:

https://github.com/TheeMattOliver/radix-stitches-styled-not-function-repro

The consumer's just a fresh CRA app

[ChristopherMeek]

Observing same thing in fresh repo after publishing a basic stitches lib bundled with rollup.

The repro on the library side is here:

https://github.com/TheeMattOliver/radix-stitches-styled-not-function-repro

The consumer's just a fresh CRA app

Have you managed to find a way around this? I've got exactly the same problem.