mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Niklas MischkulnigandGitHub
2a9e7560a5
We have two lines of defense:
1. crates/next-custom-transforms/src/transforms/react_server_components.rs validates ESM imports of server-only and client-only and throws an issue if something is wrong. Notably, `require('server-only')` isn't caught by this
2. additionally, we had an `BeforeResolvePlugin` for server-only, client-only and styled-jsx.
We should probably get rid of the first one completely for consistency (it's brittle)
https://github.com/vercel/next.js/blob/79040a318d29641eb3d96a5a47c92a5f8506e826/crates/next-custom-transforms/src/transforms/react_server_components.rs#L663-L674
This PR is about improving the second one:
The error message isn't ideal yet, but better than before (note: no import trace):
```
./bench/basic-app/app
Invalid import
'server-only' cannot be imported from a Client Component module. It should only be used from a Server Component.
The error was caused by importing 'bench/basic-app/app'
```
now
<img width="708" height="386" alt="Bildschirmfoto 2026-01-07 um 17 21 59" src="https://github.com/user-attachments/assets/4d49eff3-4959-4b70-aa47-6f3c10c75588" />
387 lines
12 KiB
TypeScript
387 lines
12 KiB
TypeScript
/* eslint-env jest */
|
||
import { createSandbox } from 'development-sandbox'
|
||
import { FileRef, nextTestSetup } from 'e2e-utils'
|
||
import path from 'path'
|
||
import { outdent } from 'outdent'
|
||
|
||
describe('Error Overlay invalid imports', () => {
|
||
const { next } = nextTestSetup({
|
||
files: new FileRef(path.join(__dirname, 'fixtures', 'default-template')),
|
||
dependencies: {
|
||
'server-only': 'latest',
|
||
'client-only': 'latest',
|
||
},
|
||
skipStart: true,
|
||
})
|
||
|
||
it('should show error when using styled-jsx in server component', async () => {
|
||
await using sandbox = await createSandbox(
|
||
next,
|
||
new Map([
|
||
[
|
||
'app/comp1.js',
|
||
outdent`
|
||
import { Comp2 } from './comp2'
|
||
|
||
export function Comp1() {
|
||
return <Comp2 />
|
||
}
|
||
`,
|
||
],
|
||
[
|
||
'app/comp2.js',
|
||
outdent`
|
||
export function Comp2() {
|
||
return (
|
||
<div>
|
||
<style jsx>{\`
|
||
p {
|
||
color: red;
|
||
}
|
||
\`}</style>
|
||
</div>
|
||
)
|
||
}
|
||
`,
|
||
],
|
||
[
|
||
'app/page.js',
|
||
outdent`
|
||
'use client'
|
||
import { Comp1 } from './comp1'
|
||
|
||
export default function Page() {
|
||
return <Comp1 />
|
||
}
|
||
`,
|
||
],
|
||
])
|
||
)
|
||
const { session } = sandbox
|
||
const pageFile = 'app/page.js'
|
||
const content = await next.readFile(pageFile)
|
||
const withoutUseClient = content.replace("'use client'", '')
|
||
await session.patch(pageFile, withoutUseClient)
|
||
|
||
await session.waitForRedbox()
|
||
if (process.env.IS_TURBOPACK_TEST) {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./app/comp2.js
|
||
'styled-jsx' cannot be imported from a Server Component module
|
||
It only works in a Client Component but none of its parents are marked with 'use client', so they're Server Components by default.
|
||
|
||
Import trace:
|
||
Server Component:
|
||
./app/comp2.js
|
||
./app/comp1.js
|
||
./app/page.js"
|
||
`)
|
||
} else if (process.env.NEXT_RSPACK) {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./app/comp2.js
|
||
× 'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.
|
||
│
|
||
│ The error was caused by using 'styled-jsx' in './app/comp2.js'. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
|
||
│
|
||
│ Import trace for requested module:
|
||
│ ./app/comp2.js
|
||
│ ./app/comp1.js
|
||
│ ./app/page.js"
|
||
`)
|
||
} else {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./app/comp2.js
|
||
'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.
|
||
|
||
The error was caused by using 'styled-jsx' in './app/comp2.js'. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.
|
||
|
||
Import trace for requested module:
|
||
./app/comp2.js
|
||
./app/comp1.js
|
||
./app/page.js"
|
||
`)
|
||
}
|
||
})
|
||
|
||
it('should show error when require-ing client-only in server component', async () => {
|
||
await using sandbox = await createSandbox(
|
||
next,
|
||
new Map([
|
||
[
|
||
'app/foo.js',
|
||
outdent`
|
||
require("client-only")
|
||
`,
|
||
],
|
||
[
|
||
'app/page.js',
|
||
outdent`
|
||
'use client'
|
||
import './foo'
|
||
|
||
export default function Page() {
|
||
return "Hello"
|
||
}
|
||
`,
|
||
],
|
||
])
|
||
)
|
||
const { session } = sandbox
|
||
const pageFile = 'app/page.js'
|
||
const content = await next.readFile(pageFile)
|
||
const withoutUseClient = content.replace("'use client'", '')
|
||
await session.patch(pageFile, withoutUseClient)
|
||
|
||
await session.waitForRedbox()
|
||
if (process.env.IS_TURBOPACK_TEST) {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./app/foo.js (1:1)
|
||
'client-only' cannot be imported from a Server Component module
|
||
> 1 | require("client-only")
|
||
| ^^^^^^^^^^^^^^^^^^^^^^
|
||
|
||
It should only be used from a Client Component.
|
||
|
||
Import trace:
|
||
Server Component:
|
||
./app/foo.js
|
||
./app/page.js"
|
||
`)
|
||
} else if (process.env.NEXT_RSPACK) {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./app/foo.js
|
||
× 'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.
|
||
│
|
||
│ The error was caused by importing 'next/dist/compiled/client-only/error.js' in './app/foo.js'.
|
||
│
|
||
│ Import trace for requested module:
|
||
│ ./app/foo.js
|
||
│ ./app/page.js"
|
||
`)
|
||
} else {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./app/foo.js
|
||
'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.
|
||
|
||
The error was caused by importing 'next/dist/compiled/client-only/error.js' in './app/foo.js'.
|
||
|
||
Import trace for requested module:
|
||
./app/foo.js
|
||
./app/page.js"
|
||
`)
|
||
}
|
||
})
|
||
|
||
it('should show error when external package imports client-only in server component', async () => {
|
||
await using sandbox = await createSandbox(
|
||
next,
|
||
new Map([
|
||
[
|
||
'node_modules/client-only-package/index.js',
|
||
outdent`
|
||
require("client-only")
|
||
`,
|
||
],
|
||
[
|
||
'node_modules/client-only-package/package.json',
|
||
outdent`
|
||
{
|
||
"name": "client-only-package",
|
||
"main": "index.js"
|
||
}
|
||
`,
|
||
],
|
||
[
|
||
'app/comp1.js',
|
||
outdent`
|
||
import { Comp2 } from './comp2'
|
||
|
||
export function Comp1() {
|
||
return <Comp2 />
|
||
}
|
||
`,
|
||
],
|
||
[
|
||
'app/comp2.js',
|
||
outdent`
|
||
import "client-only-package"
|
||
export function Comp2() {
|
||
return (
|
||
<div>Hello world</div>
|
||
)
|
||
}
|
||
`,
|
||
],
|
||
[
|
||
'app/page.js',
|
||
outdent`
|
||
'use client'
|
||
import { Comp1 } from './comp1'
|
||
|
||
export default function Page() {
|
||
return <Comp1 />
|
||
}
|
||
`,
|
||
],
|
||
])
|
||
)
|
||
const { session } = sandbox
|
||
const pageFile = 'app/page.js'
|
||
const content = await next.readFile(pageFile)
|
||
const withoutUseClient = content.replace("'use client'", '')
|
||
await session.patch(pageFile, withoutUseClient)
|
||
|
||
await session.waitForRedbox()
|
||
if (process.env.IS_TURBOPACK_TEST) {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./node_modules/client-only-package/index.js (1:1)
|
||
'client-only' cannot be imported from a Server Component module
|
||
> 1 | require("client-only")
|
||
| ^^^^^^^^^^^^^^^^^^^^^^
|
||
|
||
It should only be used from a Client Component.
|
||
|
||
Import trace:
|
||
Server Component:
|
||
./node_modules/client-only-package/index.js
|
||
./app/comp2.js
|
||
./app/comp1.js
|
||
./app/page.js"
|
||
`)
|
||
} else if (process.env.NEXT_RSPACK) {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./app/comp2.js
|
||
× 'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.
|
||
│
|
||
│ The error was caused by importing 'client-only-package/index.js' in './app/comp2.js'.
|
||
│
|
||
│ Import trace for requested module:
|
||
│ ./app/comp2.js
|
||
│ ./app/comp1.js
|
||
│ ./app/page.js"
|
||
`)
|
||
} else {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./app/comp2.js
|
||
'client-only' cannot be imported from a Server Component module. It should only be used from a Client Component.
|
||
|
||
The error was caused by importing 'client-only-package/index.js' in './app/comp2.js'.
|
||
|
||
Import trace for requested module:
|
||
./app/comp2.js
|
||
./app/comp1.js
|
||
./app/page.js"
|
||
`)
|
||
}
|
||
})
|
||
|
||
it('should show error when external package imports server-only in client component', async () => {
|
||
await using sandbox = await createSandbox(
|
||
next,
|
||
new Map([
|
||
[
|
||
'node_modules/server-only-package/index.js',
|
||
outdent`
|
||
require("server-only")
|
||
`,
|
||
],
|
||
[
|
||
'node_modules/server-only-package/package.json',
|
||
outdent`
|
||
{
|
||
"name": "server-only-package",
|
||
"main": "index.js"
|
||
}
|
||
`,
|
||
],
|
||
[
|
||
'app/comp1.js',
|
||
outdent`
|
||
import { Comp2 } from './comp2'
|
||
|
||
export function Comp1() {
|
||
return <Comp2 />
|
||
}
|
||
`,
|
||
],
|
||
[
|
||
'app/comp2.js',
|
||
outdent`
|
||
import 'server-only-package'
|
||
export function Comp2() {
|
||
return (
|
||
<div>Hello world</div>
|
||
)
|
||
}
|
||
`,
|
||
],
|
||
[
|
||
'app/page.js',
|
||
outdent`
|
||
import { Comp1 } from './comp1'
|
||
|
||
export default function Page() {
|
||
return <Comp1 />
|
||
}
|
||
`,
|
||
],
|
||
])
|
||
)
|
||
const { session } = sandbox
|
||
const file = 'app/page.js'
|
||
const content = await next.readFile(file)
|
||
await session.patch(file, "'use client'\n" + content)
|
||
|
||
await session.waitForRedbox()
|
||
if (process.env.IS_TURBOPACK_TEST) {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./node_modules/server-only-package/index.js (1:1)
|
||
'server-only' cannot be imported from a Client Component module
|
||
> 1 | require("server-only")
|
||
| ^^^^^^^^^^^^^^^^^^^^^^
|
||
|
||
It should only be used from a Server Component.
|
||
|
||
Import traces:
|
||
Client Component Browser:
|
||
./node_modules/server-only-package/index.js [Client Component Browser]
|
||
./app/comp2.js [Client Component Browser]
|
||
./app/comp1.js [Client Component Browser]
|
||
./app/page.js [Client Component Browser]
|
||
./app/page.js [Server Component]
|
||
|
||
Client Component SSR:
|
||
./node_modules/server-only-package/index.js [Client Component SSR]
|
||
./app/comp2.js [Client Component SSR]
|
||
./app/comp1.js [Client Component SSR]
|
||
./app/page.js [Client Component SSR]
|
||
./app/page.js [Server Component]"
|
||
`)
|
||
} else if (process.env.NEXT_RSPACK) {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./app/comp2.js
|
||
× 'server-only' cannot be imported from a Client Component module. It should only be used from a Server Component.
|
||
│
|
||
│ The error was caused by importing 'server-only-package/index.js' in './app/comp2.js'.
|
||
│
|
||
│ Import trace for requested module:
|
||
│ ./app/comp2.js
|
||
│ ./app/comp1.js
|
||
│ ./app/page.js"
|
||
`)
|
||
} else {
|
||
expect(await session.getRedboxSource()).toMatchInlineSnapshot(`
|
||
"./app/comp2.js
|
||
'server-only' cannot be imported from a Client Component module. It should only be used from a Server Component.
|
||
|
||
The error was caused by importing 'server-only-package/index.js' in './app/comp2.js'.
|
||
|
||
Import trace for requested module:
|
||
./app/comp2.js
|
||
./app/comp1.js
|
||
./app/page.js"
|
||
`)
|
||
}
|
||
})
|
||
})
|