diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js
index d6037779f735..8608a39d8bee 100644
--- a/packages/next/build/swc/options.js
+++ b/packages/next/build/swc/options.js
@@ -117,14 +117,13 @@ function getBaseSWCOptions({
: nextConfig?.compiler?.reactRemoveProperties,
modularizeImports: nextConfig?.experimental?.modularizeImports,
relay: nextConfig?.compiler?.relay,
- // Disable css-in-js transform on server layer for server components
- ...(isServerLayer
- ? {}
- : {
- emotion: getEmotionOptions(nextConfig, development),
- styledComponents: getStyledComponentsOptions(nextConfig, development),
- styledJsx: true,
- }),
+ // Always transform styled-jsx and error when `client-only` condition is triggered
+ styledJsx: true,
+ // Disable css-in-js libs (without client-only integration) transform on server layer for server components
+ ...(!isServerLayer && {
+ emotion: getEmotionOptions(nextConfig, development),
+ styledComponents: getStyledComponentsOptions(nextConfig, development),
+ }),
serverComponents: hasServerComponents
? {
isServer: !!isServerLayer,
diff --git a/test/e2e/app-dir/rsc-errors.test.ts b/test/e2e/app-dir/rsc-errors.test.ts
index 79d99edd4726..75bd36be8f57 100644
--- a/test/e2e/app-dir/rsc-errors.test.ts
+++ b/test/e2e/app-dir/rsc-errors.test.ts
@@ -90,14 +90,6 @@ describe('app dir - rsc errors', () => {
)
})
- it('should not transform css-in-js such as styled-jsx in server components', async () => {
- const html = await renderViaHTTP(next.url, '/not-transform/styled-jsx')
-
- expect(html).toMatch(
- /
- )
-}
diff --git a/test/e2e/app-dir/rsc-errors/app/server-with-errors/styled-jsx/page.js b/test/e2e/app-dir/rsc-errors/app/server-with-errors/styled-jsx/page.js
index 2ba4eaa6b98a..766d723e5e88 100644
--- a/test/e2e/app-dir/rsc-errors/app/server-with-errors/styled-jsx/page.js
+++ b/test/e2e/app-dir/rsc-errors/app/server-with-errors/styled-jsx/page.js
@@ -1,5 +1,11 @@
-import JSXStyle from 'styled-jsx/style'
-
export default function Page() {
- return