forked from vercel/next.js
/
parseRSC.ts
125 lines (113 loc) · 5.29 KB
/
parseRSC.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import type { webpack } from 'next/dist/compiled/webpack/webpack'
import { relative } from 'path'
import { SimpleWebpackError } from './simpleWebpackError'
function formatRSCErrorMessage(message: string): null | [string, string] {
if (message && /NEXT_RSC_ERR_/.test(message)) {
let formattedMessage = message
let formattedVerboseMessage = ''
// Comes from the "React Server Components" transform in SWC, always
// attach the module trace.
const NEXT_RSC_ERR_REACT_API = /.+NEXT_RSC_ERR_REACT_API: (.*?)\n/s
const NEXT_RSC_ERR_SERVER_IMPORT = /.+NEXT_RSC_ERR_SERVER_IMPORT: (.*?)\n/s
const NEXT_RSC_ERR_CLIENT_IMPORT = /.+NEXT_RSC_ERR_CLIENT_IMPORT: (.*?)\n/s
const NEXT_RSC_ERR_CLIENT_DIRECTIVE = /.+NEXT_RSC_ERR_CLIENT_DIRECTIVE\n/s
const NEXT_RSC_ERR_CLIENT_DIRECTIVE_PAREN =
/.+NEXT_RSC_ERR_CLIENT_DIRECTIVE_PAREN\n/s
const NEXT_RSC_ERR_INVALID_API = /.+NEXT_RSC_ERR_INVALID_API: (.*?)\n/s
if (NEXT_RSC_ERR_REACT_API.test(message)) {
formattedMessage = message.replace(
NEXT_RSC_ERR_REACT_API,
`\n\nYou're importing a component that needs $1. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.\n\n`
)
formattedVerboseMessage =
'\n\nMaybe one of these should be marked as a client entry with "use client":\n'
} else if (NEXT_RSC_ERR_SERVER_IMPORT.test(message)) {
const matches = message.match(NEXT_RSC_ERR_SERVER_IMPORT)
switch (matches && matches[1]) {
case 'react-dom/server':
// If importing "react-dom/server", we should show a different error.
formattedMessage = `\n\nYou're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.`
break
case 'next/router':
// If importing "next/router", we should tell them to use "next/navigation".
formattedMessage = `\n\nYou have a Server Component that imports next/router. Use next/navigation instead.`
break
default:
formattedMessage = message.replace(
NEXT_RSC_ERR_SERVER_IMPORT,
`\n\nYou're importing a component that imports $1. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.\n\n`
)
}
formattedVerboseMessage =
'\n\nMaybe one of these should be marked as a client entry "use client":\n'
} else if (NEXT_RSC_ERR_CLIENT_IMPORT.test(message)) {
formattedMessage = message.replace(
NEXT_RSC_ERR_CLIENT_IMPORT,
`\n\nYou're importing a component that needs $1. That only works in a Server Component but one of its parents is marked with "use client", so it's a Client Component.\n\n`
)
formattedVerboseMessage =
'\n\nOne of these is marked as a client entry with "use client":\n'
} else if (NEXT_RSC_ERR_CLIENT_DIRECTIVE.test(message)) {
formattedMessage = message.replace(
NEXT_RSC_ERR_CLIENT_DIRECTIVE,
`\n\nThe "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.\n\n`
)
formattedVerboseMessage = '\n\nImport path:\n'
} else if (NEXT_RSC_ERR_CLIENT_DIRECTIVE_PAREN.test(message)) {
formattedMessage = message.replace(
NEXT_RSC_ERR_CLIENT_DIRECTIVE_PAREN,
`\n\n"use client" must be a directive, and placed before other expressions. Remove the parentheses and move it to the top of the file to resolve this issue.\n\n`
)
formattedVerboseMessage = '\n\nImport path:\n'
} else if (NEXT_RSC_ERR_INVALID_API.test(message)) {
formattedMessage = message.replace(
NEXT_RSC_ERR_INVALID_API,
`\n\n"$1" is not supported in app/. Read more: https://beta.nextjs.org/docs/data-fetching/fundamentals\n\n`
)
formattedVerboseMessage = '\n\nFile path:\n'
}
return [formattedMessage, formattedVerboseMessage]
}
return null
}
// Check if the error is specifically related to React Server Components.
// If so, we'll format the error message to be more helpful.
export function getRscError(
fileName: string,
err: Error,
module: any,
compilation: webpack.Compilation,
compiler: webpack.Compiler
): SimpleWebpackError | false {
const formattedError = formatRSCErrorMessage(err.message)
if (!formattedError) return false
// Get the module trace:
// https://cs.github.com/webpack/webpack/blob/9fcaa243573005d6fdece9a3f8d89a0e8b399613/lib/stats/DefaultStatsFactoryPlugin.js#L414
const visitedModules = new Set()
const moduleTrace = []
let current = module
while (current) {
if (visitedModules.has(current)) break
visitedModules.add(current)
moduleTrace.push(current)
const origin = compilation.moduleGraph.getIssuer(current)
if (!origin) break
current = origin
}
const error = new SimpleWebpackError(
fileName,
formattedError[0] +
formattedError[1] +
moduleTrace
.map((m) =>
m.resource
? ' ' + relative(compiler.context, m.resource).replace(/\?.+$/, '')
: ''
)
.filter(Boolean)
.join('\n')
)
// Delete the stack because it's created here.
error.stack = ''
return error
}