`+react`

Environment: client, server

Local

Cumulative

Provided by: vike-react

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

Add options to the React functions that vike-react calls.

On the client-side, you can set the options of React's hydrateRoot() and createRoot().

// pages/+react.client.js
// Environment: client
 
export default {
  hydrateRootOptions: {
    onUncaughtError
    /*
    onCaughtError,
    onRecoverableError,
    ...
    */
  },
  createRootOptions: {
    onUncaughtError
    /*
    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
    /*
    onCaughtError,
    onRecoverableError,
    ...
    */
  },
  createRootOptions: {
    onUncaughtError
    /*
    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 also use 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
  }
}

On the server-side, you can set the options of React's renderToString().

// pages/+react.server.js
// Environment: server
 
export default {
  renderToStringOptions: {
    identifierPrefix: 'some-id-prefix'
  }
}

// pages/+react.server.ts
// Environment: server
 
import type { Config } from 'vike/types'
 
export default {
  renderToStringOptions: {
    identifierPrefix: 'some-id-prefix'
  }
} satisfies Config['react']

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

+react

See also

`+react`