search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.1k stars 26.72k forks source link

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

Closed eric-burel closed 3 years ago

eric-burel commented 3 years ago

Bug report

Describe the bug

Cross-posting this from Storybook: https://github.com/storybookjs/storybook/issues/12668#issuecomment-730288458

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

Timer commented 3 years ago

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

eric-burel commented 3 years ago

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

robertu7 commented 3 years ago

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

eric-burel commented 3 years ago

@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 commented 3 years ago

@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 commented 2 years ago

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.