diff --git a/packages/next-swc/crates/core/src/lib.rs b/packages/next-swc/crates/core/src/lib.rs index c36ee7c6d00af..6e05034f9d1d0 100644 --- a/packages/next-swc/crates/core/src/lib.rs +++ b/packages/next-swc/crates/core/src/lib.rs @@ -90,6 +90,9 @@ pub struct TransformOptions { #[serde(default)] pub server_components: Option, + #[serde(default)] + pub styled_jsx: Option, + #[serde(default)] pub styled_components: Option, @@ -159,7 +162,12 @@ where )), _ => Either::Right(noop()), }, - styled_jsx::styled_jsx(cm.clone(), file.name.clone()), + match opts.styled_jsx { + Some(true) => + Either::Left(styled_jsx::styled_jsx(cm.clone(), file.name.clone())), + _ => + Either::Right(noop()) + }, hook_optimizer::hook_optimizer(), match &opts.styled_components { Some(config) => Either::Left(styled_components::styled_components( diff --git a/packages/next/build/swc/options.js b/packages/next/build/swc/options.js index 7773993d0a1f5..a6d79c13e8c50 100644 --- a/packages/next/build/swc/options.js +++ b/packages/next/build/swc/options.js @@ -36,9 +36,6 @@ function getBaseSWCOptions({ relativeFilePathFromRoot, hasServerComponents, }) { - if (filename.includes('page.js')) { - console.log('isServerLayer', isServerLayer, filename) - } const parserConfig = getParserOptions({ filename, jsConfig }) const paths = jsConfig?.compilerOptions?.paths const enableDecorators = Boolean( @@ -121,12 +118,14 @@ function getBaseSWCOptions({ : nextConfig?.compiler?.reactRemoveProperties, modularizeImports: nextConfig?.experimental?.modularizeImports, relay: nextConfig?.compiler?.relay, - ...(!isServerLayer - ? { - styledComponents: getStyledComponentsOptions(nextConfig, development), + // Disable css-in-js transform on server layer for server components + ...(isServerLayer + ? {} + : { emotion: getEmotionOptions(nextConfig, development), - } - : undefined), + styledComponents: getStyledComponentsOptions(nextConfig, development), + styledJsx: true, + }), serverComponents: hasServerComponents ? { isServer: !!isServerLayer, diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 99d48bf29f3ac..b9bfe119d0501 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -1626,7 +1626,7 @@ export default async function getBaseWebpackConfig( { ...codeCondition, issuerLayer: WEBPACK_LAYERS.middleware, - use: getBabelOrSwcLoader(), + use: defaultLoaders.babel, }, ...(hasServerComponents ? [ diff --git a/packages/next/server/config-schema.ts b/packages/next/server/config-schema.ts index 745148e3ebcb9..b3056c4002eae 100644 --- a/packages/next/server/config-schema.ts +++ b/packages/next/server/config-schema.ts @@ -265,6 +265,9 @@ const configSchema = { }, ] as any, }, + appDir: { + type: 'boolean', + }, externalDir: { type: 'boolean', }, diff --git a/test/e2e/app-dir/rsc-basic.test.ts b/test/e2e/app-dir/rsc-basic.test.ts index 0878802223087..774c2a588d0d0 100644 --- a/test/e2e/app-dir/rsc-basic.test.ts +++ b/test/e2e/app-dir/rsc-basic.test.ts @@ -76,8 +76,6 @@ describe('app dir - react server components', () => { expect(homeHTML).toMatch(/^ { }) it('should handle external async module libraries correctly', async () => { - const html = await renderViaHTTP(next.url, '/external-imports') - expect(html).toContain('module type:esm-export') - expect(html).toContain('export named:named') - expect(html).toContain('export value:123') - expect(html).toContain('export array:4,5,6') - expect(html).toContain('export object:{x:1}') + const clientHtml = await renderViaHTTP(next.url, '/external-imports/client') + const serverHtml = await renderViaHTTP(next.url, '/external-imports/server') + + expect(clientHtml).toContain('module type:esm-export') + expect(clientHtml).toContain('export named:named') + expect(clientHtml).toContain('export value:123') + expect(clientHtml).toContain('export array:4,5,6') + expect(clientHtml).toContain('export object:{x:1}') + + // support esm module on server side + expect(serverHtml).toContain('random-module-instance') }) it('should handle various kinds of exports correctly', async () => { @@ -314,6 +317,11 @@ describe('app dir - react server components', () => { // from styled-components expect(head).toMatch(/{color:(\s*)blue;?}/) + + // css-in-js like styled-jsx in server components won't be transformed + expect(html).toMatch( + /\\.this-wont-be-transformed\{color:purple;\}<\/style\>/ + ) }) it('should stick to the url without trailing /page suffix', async () => { diff --git a/test/e2e/app-dir/rsc-basic/app/css-in-js/page.js b/test/e2e/app-dir/rsc-basic/app/css-in-js/page.js index 6a69632037f02..c22cc6f82907b 100644 --- a/test/e2e/app-dir/rsc-basic/app/css-in-js/page.js +++ b/test/e2e/app-dir/rsc-basic/app/css-in-js/page.js @@ -6,6 +6,11 @@ export default function Page() {
+
) } diff --git a/test/e2e/app-dir/rsc-basic/app/external-imports/page.js b/test/e2e/app-dir/rsc-basic/app/external-imports/client/page.js similarity index 100% rename from test/e2e/app-dir/rsc-basic/app/external-imports/page.js rename to test/e2e/app-dir/rsc-basic/app/external-imports/client/page.js diff --git a/test/e2e/app-dir/rsc-basic/app/external-imports/server/page.js b/test/e2e/app-dir/rsc-basic/app/external-imports/server/page.js new file mode 100644 index 0000000000000..902dee4d25491 --- /dev/null +++ b/test/e2e/app-dir/rsc-basic/app/external-imports/server/page.js @@ -0,0 +1,9 @@ +import { name } from 'random-module-instance' + +export default function Page() { + return ( +
+

{name}

+
+ ) +} diff --git a/test/e2e/app-dir/rsc-basic/app/page.js b/test/e2e/app-dir/rsc-basic/app/page.js index bd896c1ae8199..98d5d164aa48c 100644 --- a/test/e2e/app-dir/rsc-basic/app/page.js +++ b/test/e2e/app-dir/rsc-basic/app/page.js @@ -1,6 +1,5 @@ import Nav from '../components/nav' import { headers } from 'next/dist/client/components/hooks-server' -// import { name } from 'random-module-instance' const envVar = process.env.ENV_VAR_TEST const headerKey = 'x-next-test-client' @@ -11,15 +10,9 @@ export default function Index() { return (
-

{`component:index.server`}

{'env:' + envVar}
{'header:' + header}
- {/*

{name}

*/}
)