import {} from "effector-react/compat";

The library provides a separate module with compatibility up to IE11 and Chrome 47 (browser for Smart TV devices).

Bundler, Not Transpiler

Since third-party libraries can import effector-react directly, you should not use transpilers like Babel to replace effector-react with effector-react/compat in your code because by default, Babel will not transform third-party code.

Use a bundler instead, as it will replace effector-react with effector-react/compat in all modules, including those from third parties.

Since effector-react uses effector under the hood, you need to use the compat-version of effector as well. Please, read effector/compat for details.

Required Polyfills

You need to install polyfills for these objects:

Promise
Object.assign
Array.prototype.flat
Map
Set

In most cases, a bundler can automatically add polyfills.

Vite

Vite Configuration Example

import { defineConfig } from "vite";
import legacy from "@vitejs/plugin-legacy";

export default defineConfig({
  plugins: [
    legacy({
      polyfills: ["es.promise", "es.object.assign", "es.array.flat", "es.map", "es.set"],
    }),
  ],
});

Usage

Manual Usage

You can use it instead of the effector-react package if you need to support old browsers.

import {useUnit} from 'effector-react'
import {useUnit} from 'effector-react/compat'

Automatic Replacement

However, you can set up your bundler to automatically replace effector with effector/compat in your code.

Webpack

module.exports = {
  resolve: {
    alias: {
      effector: "effector/compat",
      "effector-react": "effector-react/compat",
    },
  },
};

Vite

import { defineConfig } from "vite";

export default defineConfig({
  resolve: {
    alias: {
      effector: "effector/compat",
      "effector-react": "effector-react/compat",
    },
  },
});