Add babel plugin to @vitejs/plugin-react in Storybook config

[JesusTheHun]

I'm using react-intl and in my app I pass some options to the react plugin :

// vite.config.ts
{
    plugins: [
      react({
        babel: {
          plugins: [
            ['formatjs', {
                'idInterpolationPattern': '[sha512:contenthash:base64:6]',
                'ast': true,
            }],
          ],
        }
      }),
    ],
}

Sadly, you cannot pass options to Storybook for the plugin instantiation. So I decided to swap the instance with my own :

function replaceViteReactBabel(config: UserConfig, babelOptions: Options['babel']) {
  for (let i = 0; i < config.plugins.length; i++) {
    const pluginOption = config.plugins[i];

    if (Array.isArray(pluginOption)) {
      const viteReactBabelIndex = pluginOption.findIndex(p => isPluginObject(p) && p.name === 'vite:react-babel');
      if (viteReactBabelIndex === -1) continue;

      const newViteReactPluginOption = react({ babel: babelOptions });

      const newViteReactBabelPluginInstance = newViteReactPluginOption.find(p => isPluginObject(p) && p.name === 'vite:react-babel');
      pluginOption.splice(viteReactBabelIndex, 1, newViteReactBabelPluginInstance);
      break;
    }
  }

  return config;
}

function isPluginObject(p: unknown): p is Plugin {
  return Object.prototype.hasOwnProperty.call(p, 'name');
}

And then in my main.ts :

const config: StorybookConfig = {
  async viteFinal(config) {
    return replaceViteReactBabel(config, {
      plugins: [
        ['formatjs', {
          'idInterpolationPattern': '[sha512:contenthash:base64:6]',
          'ast': true,
        }],
      ],
    });
  },
}

And it works just fine 👌