Mark styled-jsx as client-only package (#41414)

For css-in-js libs like styled-jsx we don't recommend to use on server side since it will blow up the rsc payload during navigation. This upgration of styled-jsx includes `client-only` as dependency so that it will throw when it's been used on serevr layer

x-ref: vercel/styled-jsx#816

Author: huozhi

packages/next/package.json

@@ -78,7 +78,7 @@
     "@swc/helpers": "0.4.11",
     "caniuse-lite": "^1.0.30001406",
     "postcss": "8.4.14",
-    "styled-jsx": "5.0.7",
+    "styled-jsx": "5.1.0",
     "use-sync-external-store": "1.2.0"
   },
   "peerDependencies": {

pnpm-lock.yaml

@@ -1240,62 +1240,6 @@ describe('app dir', () => {
             await next.patchFile(filePath, origContent)
           }
         })
-
-        it('should throw an error when getServerSideProps is used', async () => {
-          const pageFile =
-            'app/client-with-errors/get-server-side-props/page.js'
-          const content = await next.readFile(pageFile)
-          const uncomment = content.replace(
-            '// export function getServerSideProps',
-            'export function getServerSideProps'
-          )
-          await next.patchFile(pageFile, uncomment)
-          const res = await fetchViaHTTP(
-            next.url,
-            '/client-with-errors/get-server-side-props'
-          )
-          await next.patchFile(pageFile, content)
-
-          await check(async () => {
-            const { status } = await fetchViaHTTP(
-              next.url,
-              '/client-with-errors/get-server-side-props'
-            )
-            return status
-          }, /200/)
-
-          expect(res.status).toBe(500)
-          expect(await res.text()).toContain(
-            '`getServerSideProps` is not allowed in Client Components'
-          )
-        })
-
-        it('should throw an error when getStaticProps is used', async () => {
-          const pageFile = 'app/client-with-errors/get-static-props/page.js'
-          const content = await next.readFile(pageFile)
-          const uncomment = content.replace(
-            '// export function getStaticProps',
-            'export function getStaticProps'
-          )
-          await next.patchFile(pageFile, uncomment)
-          const res = await fetchViaHTTP(
-            next.url,
-            '/client-with-errors/get-static-props'
-          )
-          await next.patchFile(pageFile, content)
-          await check(async () => {
-            const { status } = await fetchViaHTTP(
-              next.url,
-              '/client-with-errors/get-static-props'
-            )
-            return status
-          }, /200/)
-
-          expect(res.status).toBe(500)
-          expect(await res.text()).toContain(
-            '`getStaticProps` is not allowed in Client Components'
-          )
-        })
       }
     })
 

test/e2e/app-dir/index.test.ts

@@ -0,0 +1,92 @@
+import path from 'path'
+import { check, fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
+import { createNext, FileRef } from 'e2e-utils'
+import { NextInstance } from 'test/lib/next-modes/base'
+
+describe('app dir - rsc basics', () => {
+  let next: NextInstance
+
+  const { isNextDeploy, isNextDev } = global as any
+  const isReact17 = process.env.NEXT_TEST_REACT_VERSION === '^17'
+  if (isNextDeploy || isReact17) {
+    it('should skip tests for next-deploy and react 17', () => {})
+    return
+  }
+  if (!isNextDev) {
+    it('should skip tests for next-start', () => {})
+    return
+  }
+
+  beforeAll(async () => {
+    next = await createNext({
+      files: new FileRef(path.join(__dirname, './rsc-errors')),
+      dependencies: {
+        react: 'experimental',
+        'react-dom': 'experimental',
+      },
+    })
+  })
+  afterAll(() => next.destroy())
+
+  it('should throw an error when getServerSideProps is used', async () => {
+    const pageFile = 'app/client-with-errors/get-server-side-props/page.js'
+    const content = await next.readFile(pageFile)
+    const uncomment = content.replace(
+      '// export function getServerSideProps',
+      'export function getServerSideProps'
+    )
+    await next.patchFile(pageFile, uncomment)
+    const res = await fetchViaHTTP(
+      next.url,
+      '/client-with-errors/get-server-side-props'
+    )
+    await next.patchFile(pageFile, content)
+
+    await check(async () => {
+      const { status } = await fetchViaHTTP(
+        next.url,
+        '/client-with-errors/get-server-side-props'
+      )
+      return status
+    }, /200/)
+
+    expect(res.status).toBe(500)
+    expect(await res.text()).toContain(
+      '`getServerSideProps` is not allowed in Client Components'
+    )
+  })
+
+  it('should throw an error when getStaticProps is used', async () => {
+    const pageFile = 'app/client-with-errors/get-static-props/page.js'
+    const content = await next.readFile(pageFile)
+    const uncomment = content.replace(
+      '// export function getStaticProps',
+      'export function getStaticProps'
+    )
+    await next.patchFile(pageFile, uncomment)
+    const res = await fetchViaHTTP(
+      next.url,
+      '/client-with-errors/get-static-props'
+    )
+    await next.patchFile(pageFile, content)
+    await check(async () => {
+      const { status } = await fetchViaHTTP(
+        next.url,
+        '/client-with-errors/get-static-props'
+      )
+      return status
+    }, /200/)
+
+    expect(res.status).toBe(500)
+    expect(await res.text()).toContain(
+      '`getStaticProps` is not allowed in Client Components'
+    )
+  })
+
+  it('should error for styled-jsx imports on server side', async () => {
+    const html = await renderViaHTTP(next.url, '/server-with-errors/styled-jsx')
+    expect(html).toContain(
+      'This module cannot be imported from a Server Component module. It should only be used from a Client Component.'
+    )
+  })
+})

test/e2e/app-dir/rsc-errors.test.ts

@@ -0,0 +1,5 @@
+import JSXStyle from 'styled-jsx/style'
+
+export default function Page() {
+  return <JSXStyle>{`p{color:red}`}</JSXStyle>
+}

test/e2e/app-dir/app/app/client-with-errors/get-server-side-props/page.js renamed to test/e2e/app-dir/rsc-errors/app/client-with-errors/get-server-side-props/page.js

@@ -0,0 +1,3 @@
+module.exports = {
+  experimental: { appDir: true },
+}