In the step Add landing page grid of Step 2 of the tutorial just simply adding the import import { Grid, Column } from '@carbon/react'; leads to a Server Error right away. The error gets fixed only by adding 'use client'; to src/app/page.js.
Call stack:
- error node_modules/@carbon/react/lib/internal/usePrefix.js (18:61) @ createContext
- error createContext only works in Client Components. Add the "use client" directive at the top of the file to use it. Read more: https://nextjs.org/docs/messages/context-in-server-component
at eval (webpack-internal:///(sc_server)/./node_modules/@carbon/react/lib/internal/usePrefix.js:17:63)
at (sc_server)/./node_modules/@carbon/react/lib/internal/usePrefix.js (/home/stanley/repos/carbon-tutorial-nextjs/.next/server/app/page.js:8866:1)
at __webpack_require__ (/home/stanley/repos/carbon-tutorial-nextjs/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(sc_server)/./node_modules/@carbon/react/lib/components/Accordion/Accordion.js:12:17)
at (sc_server)/./node_modules/@carbon/react/lib/components/Accordion/Accordion.js (/home/stanley/repos/carbon-tutorial-nextjs/.next/server/app/page.js:5709:1)
at __webpack_require__ (/home/stanley/repos/carbon-tutorial-nextjs/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(sc_server)/./node_modules/@carbon/react/lib/index.js:11:17)
at (sc_server)/./node_modules/@carbon/react/lib/index.js (/home/stanley/repos/carbon-tutorial-nextjs/.next/server/app/page.js:8580:1)
at __webpack_require__ (/home/stanley/repos/carbon-tutorial-nextjs/.next/server/webpack-runtime.js:33:43)
at eval (webpack-internal:///(sc_server)/./src/app/home/page.js:7:71) {
name: 'TypeError',
digest: undefined
}
null
Reproduce
checkout v11-next-step-2
add import { Grid, Column } from '@carbon/react'; just below use client in src/app/home/page.js
Description
In the step Add landing page grid of Step 2 of the tutorial just simply adding the import
import { Grid, Column } from '@carbon/react';
leads to a Server Error right away. The error gets fixed only by adding'use client';
tosrc/app/page.js
.Call stack:
Reproduce
v11-next-step-2
import { Grid, Column } from '@carbon/react';
just belowuse client
insrc/app/home/page.js