The React env uses version ^18.0.0
of React and React DOM.
Components using that env will be previewed using this version of React, and type-checked using this version of the corresponding @types/react
and @types/react-dom
libraries.
To keep React components compatible with a wide range of possible host applications, the env configures it components with versions ^17.0.0 || ^18.0.0
of the same libraries.
Run the following to inspect your env's dependencies:
The output lists react
and react-dom
as regular dependencies, with version ^18.0.0
Run the following to inspect one of your component's dependencies:
The output lists react
and react-dom
as peer dependencies, with a wide range of versions:
Run the following to fork a React 17 env:
Update the dependency policy in your custom env's env.jsonc
file to change the React version for your env, or to modify the components' range of supported versions.
For example, the following config sets your env to use React 16.0.0
, and sets the supported versions of React to be ^16.0.0
.
// @filename: env.jsonc { "policy": { "peers": [ { "name": "react", "version": "16.0.0", "supportedRange": "^16.8.0" }, { "name": "react-dom", "version": "16.0.0", "supportedRange": "^16.0.0" } ], "dev": [ { "name": "@types/react", "version": "^16.0.0", "hidden": true, "force": true }, { "name": "@types/react-dom", "version": "^16.0.0", "hidden": true, "force": true } ] } }
Your React version might not be compatible with the rendering functions used by your env to preview components.
For example, the following displays two different implementations of the mounter component, which is responsible for mounting the components' compositions to the page:
import { ComponentType, ReactNode } from 'react'; import { createRoot } from 'react-dom/client'; export type MounterProvider = ComponentType<{ children: ReactNode }>; export function createMounter(Provider: MounterProvider = React.Fragment): any { return (Composition: React.ComponentType) => { const rootDoc = document.getElementById('root'); const root = createRoot(rootDoc!); root.render( <Provider> <Composition /> </Provider> ); }; } export default createMounter;
To learn how to update the rendering function of your compositions, see Composition mounter.
To learn how to update the rendering function of your docs, see Docs template.