`+react`

Environment: client, server

Per-page

Cumulative

Provided by: vike-react

You need vike-react to be able to use the +react setting.

Set the options passed to the React and react-streaming functions that vike-react calls.

Client

On the client-side, you can set the options of following functions:

React's hydrateRoot()
React's createRoot()

// pages/+react.client.js
// Environment: client
 
export default {
  hydrateRootOptions: {
    onUncaughtError: (err) => {
      /*...*/
    }
    /*
    onCaughtError,
    onRecoverableError,
    ...
    */
  },
  createRootOptions: {
    onUncaughtError: (err) => {
      /*...*/
    }
    /*
    onCaughtError,
    onRecoverableError,
    ...
    */
  }
}
 
function onUncaughtError(err) {
  console.error('Uncaught React error', err)
}

// pages/+react.client.ts
// Environment: client
 
import type { Config } from 'vike/types'
 
export default {
  hydrateRootOptions: {
    onUncaughtError: (err) => { /*...*/ }
    /*
    onCaughtError,
    onRecoverableError,
    ...
    */
  },
  createRootOptions: {
    onUncaughtError: (err) => { /*...*/ }
    /*
    onCaughtError,
    onRecoverableError,
    ...
    */
  }
} satisfies Config['react']
 
function onUncaughtError(err) {
  console.error('Uncaught React error', err)
}

Make sure you define these in react.client.js.

You can access pageContext:

// pages/+react.client.js
 
export const react = (pageContext) => {
  return {
    hydrateRootOptions: {
      /* ... */
    },
    createRootOptions: {
      /* ... */
    }
  }
}

// pages/+react.client.ts
 
import type { Config, PageContextClient } from 'vike/types'
 
export const react: Config['react'] = (pageContext: PageContextClient) => {
  return {
    hydrateRootOptions: {
      /* ... */
    },
    createRootOptions: {
      /* ... */
    }
  }
}

Server

On the server-side, you can set the options of following functions:

React's renderToString()
react-streaming's renderToStream

// pages/+react.server.js
// Environment: server
 
export default {
  renderToStringOptions: {
    identifierPrefix: 'some-id-prefix'
    /* ... */
  },
  renderToStreamOptions: {
    onBoundaryError: (err) => {
      /* ... */
    }
    /*
    onTimeout,
    seoStrategy,
    streamOptions,
    ...
    */
  }
}

// pages/+react.server.ts
// Environment: server
 
import type { Config } from 'vike/types'
 
export default {
  renderToStringOptions: {
    identifierPrefix: 'some-id-prefix'
    /* ... */
  },
  renderToStreamOptions: {
    onBoundaryError: (err) => { /* ... */ }
    /*
    onTimeout,
    seoStrategy,
    streamOptions,
    ...
    */
  }
} satisfies Config['react']

Make sure you define these in react.server.js.

You can access pageContext:

// pages/+react.server.js
 
export const react = (pageContext) => {
  return {
    renderToStringOptions: {
      /*...*/
    },
    renderToStreamOptions: {
      /*...*/
    }
  }
}

// pages/+react.server.ts
 
import type { Config, PageContextServer } from 'vike/types'
 
export const react: Config['react'] = (pageContext: PageContextServer) => {
  return {
    renderToStringOptions: {
      /*...*/
    },
    renderToStreamOptions: {
      /*...*/
    }
  }
}

+react

Client

Server

See also

`+react`