d89bdb2b0c
Improve errors caused by client hook called in a server component. Before ![image](https://user-images.githubusercontent.com/25056922/210399932-02d1071c-0d06-4260-8f1d-7da436e8bca9.png) After ![image](https://user-images.githubusercontent.com/25056922/210399817-f949fb14-2f81-4309-bfcb-27af38ea1329.png) Fixes NEXT-311 ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
40 lines
757 B
Markdown
40 lines
757 B
Markdown
# React client hook in Server Component
|
|
|
|
#### Why This Error Occurred
|
|
|
|
You are using a React client hook in a Server Component.
|
|
|
|
#### Possible Ways to Fix It
|
|
|
|
Mark the component using the hook as a Client Component by adding `'use client'` at the top of the file.
|
|
|
|
##### Before
|
|
|
|
```jsx
|
|
import { useEffect } from 'react'
|
|
|
|
export default function Page() {
|
|
useEffect(() => {
|
|
console.log('in useEffect')
|
|
})
|
|
return <p>Hello world</p>
|
|
}
|
|
```
|
|
|
|
##### After
|
|
|
|
```jsx
|
|
'use client'
|
|
import { useEffect } from 'react'
|
|
|
|
export default function Page() {
|
|
useEffect(() => {
|
|
console.log('in useEffect')
|
|
})
|
|
return <p>Hello world</p>
|
|
}
|
|
```
|
|
|
|
### Useful Links
|
|
|
|
[Server and Client Components](https://beta.nextjs.org/docs/rendering/server-and-client-components)
|