carbon-design-system / carbon-tutorial-nextjs

https://carbon-tutorial-nextjs.vercel.app
Apache License 2.0
17 stars 439 forks source link

Server error in "Step 2" in "Add landing page grid" step #92

Open smith558 opened 9 months ago

smith558 commented 9 months ago

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'; 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

image

Reproduce

  1. checkout v11-next-step-2
  2. add import { Grid, Column } from '@carbon/react'; just below use client in src/app/home/page.js
  3. visit http://localhost:3000/
smith558 commented 9 months ago

The same issue arises later in step Add repo page grid again.