[Bug]: Storybook 7 does not work with @vitejs/plugin-react-swc

[emildudnyk]

Describe the bug

Hello, if we are using @vitejs/plugin-react-swc instead of @vitejs/plugin-react in the vite config vite.config.ts storybook
is failing to build.

Error: Build failed with 4 errors:
../node_modules/react-textarea-autosize/dist/react-textarea-autosize.browser.esm.js:3:67: ERROR: Could not resolve "react"
../node_modules/use-composed-ref/dist/use-composed-ref.esm.js:1:36: ERROR: Could not resolve "react"
../node_modules/use-isomorphic-layout-effect/dist/use-isomorphic-layout-effect.browser.esm.js:1:32: ERROR: Could not resolve "react"
../node_modules/use-latest/dist/use-latest.esm.js:1:23: ERROR: Could not resolve "react"

I tried to use @vitejs/plugin-react in viteFinal config section but it doesn't solve the problem.

Temporary solution is to remove vite:react-swc plugins and use @vitejs/plugin-react for example:

import react from '@vitejs/plugin-react';

const removePlugin = (plugins: PluginOption[] | undefined, removePluginName: string): PluginOption[] | undefined => {
  if (!plugins) {
    return undefined;
  }
  return plugins.reduce<PluginOption[]>((acc, cur) => {
    if (Array.isArray(cur)) {
      acc.push(removePlugin(cur, removePluginName));
    } else {
      if (!(cur as Plugin)?.name?.includes(removePluginName)) {
        acc.push(cur);
      }
    }
    return acc;
  }, []);
};

const config: StorybookConfig = {
  async viteFinal(config) {
    config.plugins = removePlugin(config.plugins, 'vite:react-swc');

    return mergeConfig(config, {
      plugins: [react()],
    });
  },
...
}

Could you please suggest a solution.

To Reproduce

https://github.com/emildudnyk/storybook7-react-vite-swc
yarn install & yarn storybook

System

System:
    OS: macOS 13.1
    CPU: (10) x64 Apple M1 Pro
  Binaries:
    Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
    Yarn: 1.22.18 - /usr/local/bin/yarn
    npm: 9.6.3 - ~/.nvm/versions/node/v16.17.1/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Firefox: 108.0.1
    Safari: 16.2
  npmPackages:
    @storybook/addon-actions: 7.0.8 => 7.0.8 
    @storybook/addon-essentials: 7.0.8 => 7.0.8 
    @storybook/addon-interactions: 7.0.8 => 7.0.8 
    @storybook/addon-links: 7.0.8 => 7.0.8 
    @storybook/addon-mdx-gfm: 7.0.8 => 7.0.8 
    @storybook/react: 7.0.8 => 7.0.8 
    @storybook/react-vite: 7.0.8 => 7.0.8 
    @storybook/testing-library: 0.1.0 => 0.1.0

Additional context

No response

[shilman]

@IanVS is this something you've run into before?

[IanVS]

I pulled down the reproduction, ran yarn install then yarn storybook and yarn build-storybook, and it's all working fine for me. The @vitejs/plugin-react-swc should indeed be supported.

[connorjs]

@storybook/react-vite declares a dependency on @vitejs/plugin-react.

Is it possible to make this an optional peerDependency and add @vitejs/plugin-react-swc as an alternative, optional peedDependency?

Let me know if I should make a separate issue. I'm currently writing notes on my own side about what all brings in babel b/c that really explodes our installed node_modules.

[IanVS]

@connorjs the reason for this is to provide a default, fallback experience for users who do not have their own existing vite config. That plugin is only used in that situation, and unfortunately it needs to be a dependency for it to work that way.

That said, there have been discussions amongst the maintainers to change the way this is handled in 8.0, and we are leaning towards not bundling such framework vite plugins, and instead helping the user to create a vite config and install an appropriate plugin if they do not already have a config already (e.g. some design systems do not have their own vite config).

[connorjs]

Thanks for sharing some 8.0 thoughts! That sounds similar to my thinking.

[connorjs]

I am playing around with using overrides field in package.json.

"overrides": {
  "@vitejs/plugin-react": "@vitejs/plugin-react-swc@^3.6.0",
}

Storybook seemed to run fine, and this prevented @vitejs/plugin-react from being installed ("extra" dependency + Storybook's current version of it (3.x) conflicted with Vite 5 it seemed).

Sharing more for "oh no, please don't do that!" replies if applicable 😅.

[IanVS]

Clever. I think that should work fine, @connorjs, so long as you don't need to provide any arguments to @vitejs/plugin-react-swc.

The other thing you can do is to just add @vitejs/plugin-react-swc to your own vite.config.js, in which case the fallback @vitejs/plugin-react won't be used (though it will still throw a warning during installation, which you can safely ignore).

[IanVS]

Oh, and the 8.0 beta has been released, which has removed the fallback plugins as discussed above. Please try it out if you can, and report any issues you come across!

[valentinpalkovic]

I am closing this since it is fixed on the latest Storybook 8 beta release and will not be an issue anymore in Storybook 8. There are no plans to patch this back, though. If you'd like to fix the bug in Storybook 7, you can use the mentioned workarounds.

[kaceycleveland]

I had some tangentially related issues to this that were fixed when switching to swc; for others who might be in the same boat and want to wait until 8.0, this was my fix in altering the vite config from storybook (factor out the non swc vite plugin and use the swc one):

  async viteFinal(config) {
    const finalConfig = mergeConfig(
      {
        plugins: [
          react(), // this is the swc plugin
        ],
      },
      config,
    );

    finalConfig.plugins = finalConfig.plugins?.filter((plugin: any) => {
      if (Array.isArray(plugin) && plugin[0].name === 'vite:react-babel') return false;
      return true;
    });

    return finalConfig;
  },