Skip to content
DocsErrorsReact Class component rendered in a Server Component

React Class component rendered in a Server Component

Why This Error Occurred

You are rendering a React Class Component in a Server Component, React.Component and React.PureComponent only works in Client Components.

Possible Ways to Fix It

Use a Function Component.

Before
app/page.js
export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}
After
app/page.js
export default function Page() {
  return <p>Hello world</p>
}

Mark the component rendering the React Class Component as a Client Component by adding 'use client' at the top of the file.

Before
app/page.js
export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}
After
app/page.js
'use client'
 
export default class Page extends React.Component {
  render() {
    return <p>Hello world</p>
  }
}

Server Components