React Version

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:

$bit show envs/my-react-env

Copied

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:

$bit show pages/welcome

Copied

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:

$bit fork teambit.react/v17/react-env

Copied

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
      }
    ]
  }
}
Copied

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;
Copied

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.