Vite ​

Vite uses ESBuild under the hood, which does not allow to use its internal AST in the plugins. To apply custom transformations to the code one must use either Babel or SWC, which are allowing custom AST-transformations.

Babel ​

1. Install required dependencies:

pnpm add --save-dev vite-plugin-babel

yarn add --dev vite-plugin-babel

npm install --dev vite-plugin-babel

2. Add vite-plugin-babel to your project:

// vite.config.ts
import { defineConfig } from 'vite';
import babel from 'vite-plugin-babel';

export default defineConfig({
  plugins: [
    // Babel will try to pick up Babel config files (.babelrc or .babelrc.json)
    babel(),
    // ...
  ],
});

3. Set up effector/babel-plugin in your Babel config:

// .babelrc
{
  "plugins": ["effector/babel-plugin"]
}

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['effector/babel-plugin'],
      },
    }),
  ],
});

SWC ​

SWC is a blazing fast alternative to Babel.

Due to the experimental status of SWC plugins, we do not provide a detailed guide on how to use SWC with Farfetched. However, you can find an instruction in the official documentation of @effector/swc-plugin.

Disable HMR ​

Effector does not support HMR yet. So, it's better to disable HMR for now to avoid unexpected behavior.

// vite.config.ts
export default defineConfig({
  server: {
    hmr: false,
  },
});