styled-jsx-plugin-postcss can create build issues with Webpack

[eric-burel]

Bug report

Describe the bug

Cross-posting this from Storybook: storybookjs/storybook#12668 (comment)

Webpack build of Storybook can fail or hang when using styled-jsx-plugin-postcss.
The issue is specifically misleading when it hangs because we don't have any error message.

There seems to be some version mismatching with postcss, I don't know why, but using resolutions to force it to 7.0.35 (required by Next) did not fix it.

Note that the app is not using Next 10 yet, but Next 9.5, I expect to update it soon to confirm if it still happen with a more recent version of Next.

To Reproduce

Reproduction here: https://github.com/VulcanJS/vulcan-next/tree/bugfix/styled-jsx-postcss-storybook-build-fail

yarn
yarn storybook # will hang

In .storybook/main.js, you can comment out styled-jsx-plugin-postcss (https://github.com/VulcanJS/vulcan-next/blob/bugfix/styled-jsx-postcss-storybook-build-fail/.storybook/main.js#L39) => the build will succeed when you rerun yarn storybook.

The component using Styled JSX is AppLayout, basically as soon as <styled jsx is encountered in an imported component, the build fails. If we remove the import, it works back. So if styled-jsx-plugin-postcss is in Babel config but not used it works, but as soon as it is actually needed then the build will hang.

Expected behavior

Storybook should build.
Note that Storybook may still not work after the build but that's unrelated, the goal here is to get Storybook to build).

System information

• OS: [e.g. macOS, Windows] Ubuntu
• Version of Next.js: [e.g. 10.0.1] 9.5

[Timer]

There was a known hang scenario fixed in 3.0.2 of said plugin.

[eric-burel]

Beautiful, it works perfect. I was using v2 of the plugin, upgrading to 3.0.2 fixes the issue.

[robertu7]

I have a similar issue, next@10.0.2 & styled-jsx-plugin-postcss@3.0.2 still hanging.

[eric-burel]

@robertu7 do you use Storybook 6.1 too? As it is required to work with React 17
Edit: you don't seem too, maybe try an upgrade, because I also had code hanging probably for unrelated reason in previous version of SB. The difficulty here is to isolate the package that makes the build hangs, as Webpack won't tell it.

[robertu7]

@eric-burel I found one of my issues was caused by postcss-mixins@7.0.1 with error Error: [object Object] is not a PostCSS plugin, which depends on PostCSS 8. Downgraded to 6.2.3 works fine now.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.