You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When working with React Server Components, it's essential to have a
clear understanding of how they function and how to troubleshoot any
errors that may arise. This PR adds links to our documentation whenever
an error related to React Server Components occurs.
formattedMessage=`\n\nYou’re importing a class component. 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`
33
+
formattedMessage=`\n\nYou’re importing a class component. It only works in a Client Component but none of its parents are marked with "use client", so they're Server Components by default.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials#client-components\n\n`
34
34
}else{
35
35
formattedMessage=message.replace(
36
36
NEXT_RSC_ERR_REACT_API,
37
-
`\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`
37
+
`\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.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials\n\n`
38
38
)
39
39
}
40
40
formattedVerboseMessage=
@@ -45,17 +45,17 @@ function formatRSCErrorMessage(
45
45
switch(matches&&matches[1]){
46
46
case'react-dom/server':
47
47
// If importing "react-dom/server", we should show a different error.
48
-
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.`
48
+
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.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials`
49
49
break
50
50
case'next/router':
51
51
// If importing "next/router", we should tell them to use "next/navigation".
52
-
formattedMessage=`\n\nYou have a Server Component that imports next/router. Use next/navigation instead.`
52
+
formattedMessage=`\n\nYou have a Server Component that imports next/router. Use next/navigation instead.\nLearn more: https://nextjs.org/docs/app/api-reference/functions/use-router`
53
53
shouldAddUseClient=false
54
54
break
55
55
default:
56
56
formattedMessage=message.replace(
57
57
NEXT_RSC_ERR_SERVER_IMPORT,
58
-
`\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`
58
+
`\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.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials\n\n`
59
59
)
60
60
}
61
61
formattedVerboseMessage=shouldAddUseClient
@@ -71,7 +71,7 @@ function formatRSCErrorMessage(
71
71
}else{
72
72
formattedMessage=message.replace(
73
73
NEXT_RSC_ERR_CLIENT_IMPORT,
74
-
`\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`
74
+
`\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.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials\n\n`
75
75
)
76
76
formattedVerboseMessage=
77
77
'\n\nOne of these is marked as a client entry with "use client":\n'
`\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`
88
+
`\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.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive\n\n`
`\n\n${fileName} must be a Client Component. Add the "use client" directive the top of the file to resolve this issue.\n\n`
100
+
`\n\n${fileName} must be a Client Component. Add the "use client" directive the top of the file to resolve this issue.\nLearn more: https://nextjs.org/docs/getting-started/react-essentials#client-components\n\n`
You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with \\"use client\\", so they're Server Components by default.
0 commit comments