[Bug] Does not work with @vitejs/plugin-react-swc

[tastafur]

What version of vite are you using?

4.0.4

System info and storybook versions

Environment Info:

System:
OS: macOS 13.1
CPU: (10) arm64 Apple M1 Pro
Binaries:
Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.10.0/bin/yarn
npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
Browsers:
Chrome: 109.0.5414.119
Firefox: 109.0
Safari: 16.2
npmPackages:
@storybook/addon-actions: 6.5.16 => 6.5.16
@storybook/addon-essentials: 6.5.16 => 6.5.16
@storybook/addon-interactions: 6.5.16 => 6.5.16
@storybook/addon-links: 6.5.16 => 6.5.16
@storybook/builder-vite: 0.4.0 => 0.4.0
@storybook/react: 6.5.16 => 6.5.16
@storybook/testing-library: 0.0.13 => 0.0.13

Describe the Bug

Good morning, with version 0.3.0, it worked fine for me, until I tried to introduce the svgr library,
https://react-svgr.com/ in the vite project with the following configuration it works, I mean the package.json and vite.config.js configuration that I show you.

What's special about me, because I'm using swc @vitejs/plugin-react-swc to make it work much faster. So for it to work I have tried to use the vite configuration vite.config.js, not the storybook one because if not, I have to use webpack to configure svgr and I want to use storybook with vite. so I tried to use the configuration to be able to use the vite project configuration but the resolve returns me undefined and it doesn't work of course, I did many tests with that part and nothing.
resolve: (await import('../vite.config.js')).default.resolve,

This morning Spanish time I have seen a new update that you released last night, the 0.4.0, I update it and directly without svgr it does not work for me, it must be in conflict with @vitejs/plugin-react-swc, this error gives

" @storybook/builder-vite requires @vitejs/plugin-react to be installed when using @storybook/react."

package.json

"dependencies": {
    "husky": "8.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-router-dom": "6.8.0",
    "styled-components": "5.3.6",
    "vite-plugin-svgr": "2.4.0"
  },
  "devDependencies": {
    "@babel/core": "7.20.12",
    "@storybook/addon-actions": "6.5.16",
    "@storybook/addon-essentials": "6.5.16",
    "@storybook/addon-interactions": "6.5.16",
    "@storybook/addon-links": "6.5.16",
    "@storybook/builder-vite": "0.4.0",
    "@storybook/react": "6.5.16",
    "@storybook/testing-library": "0.0.13",
    "@swc/plugin-styled-components": "1.5.37",
    "@types/react": "18.0.27",
    "@types/react-dom": "18.0.10",
    "@types/styled-components": "5.1.26",
    "@typescript-eslint/eslint-plugin": "5.50.0",
    "@typescript-eslint/parser": "5.50.0",
    "@vitejs/plugin-react-swc": "3.0.1",
    "babel-loader": "8.3.0",
    "eslint": "8.33.0",
    "eslint-config-prettier": "8.6.0",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-react": "7.32.2",
    "prettier": "2.8.3",
    "typescript": "4.9.4",
    "vite": "4.0.4"
  },
  "resolutions": {
    "styled-components": "^5"
  }

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  // @ts-ignore
  plugins: [
    react({ plugins: [['@swc/plugin-styled-components', {}]] }),
    svgr({
      svgrOptions: {
        icon: true,
        svgo: false,
        replaceAttrValues: {
          currentColor: '{props.color}',
        },
      },
    }),
  ],
  esbuild: {
    exclude: 'src/**/stories.@(js|jsx|ts|tsx)',
  },
  optimizeDeps: {
    entries: '!src/**/stories.@(js|jsx|ts|tsx)',
  },
  envDir: 'envs',
});

Link to Minimal Reproducible Example

No response

Participation

• I am willing to submit a pull request for this issue.

[IanVS]

OK good point, I didn't consider @vitejs/plugin-react-swc, we can make some changes there.

In the meantime, have you considered upgrading to storybook 7? It will use your vite.config file automatically, and does not use webpack for the manager. You can try upgrading with npx sb@next upgrade --prerelease.

Of if you'd like to submit a PR to allow @vitejs/plugin-react-swc, the logic is here:

builder-vite/packages/builder-vite/vite-config.ts

Lines 210 to 221 in ed9cc3d

	try {
	const reactPlugin = require('@vitejs/plugin-react');
	plugins.push(reactPlugin());
	} catch (err) {
	if ((err as NodeJS.ErrnoException).code === 'MODULE_NOT_FOUND') {
	throw new Error(`
	@storybook/builder-vite requires @vitejs/plugin-react to be installed when using @storybook/react.
	Please install it and start storybook again.
	`);
	}
	throw err;
	}

.

[ArnaudBarre]

Hi @IanVS! Do you need me to change anything on the plugin side?

[IanVS]

Nope, but thanks @ArnaudBarre! I just need to remember that it exists, that's all. 🤦

[IanVS]

Released in 0.4.1