[Bug]: vite transformation errors on serve and build after upgrading from version 6 to 7

LironHazan commented 1 year ago

Describe the bug

After upgrading (npx storybook@latest upgrade) from v6 to v7 I've started to get the following errors on build:

ERROR: The symbol "React" has already been declared
ERROR: The symbol "SvgPencil" has already been declared
ERROR: Multiple exports with the same name "ReactComponent"

pointing to an svg file (export { SvgPencil as ReactComponent };)

I'm using vite and in .storybook/main.js following plugins are declared plugins: [svgrPlugin(), react()] (vite-plugin-svgr, @vitejs/plugin-react)

When running storybook

I'm getting

 [vite] Internal server error: Transform failed with 3 errors
  ERROR: The symbol "inWebWorker" has already been declared
  ERROR: The symbol "prevRefreshReg" has already been declared
   ERROR: The symbol "prevRefreshSig" has already been declared
   Plugin: vite:esbuild

I'm using vite latest version (4.4.9)

Not sure what's causing those issues, and will appreciate any help!

To Reproduce

No response

System

Environment Info:

  System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M2 Pro
  Binaries:
    Node: 18.14.0 - ~/.volta/tools/image/node/18.14.0/bin/node
    npm: 9.3.1 - ~/.volta/tools/image/node/18.14.0/bin/npm
  Browsers:
    Chrome: 116.0.5845.187
    Safari: 16.4
  npmPackages:
    @storybook/addon-actions: ^7.4.1 => 7.4.1 
    @storybook/addon-essentials: ^7.4.1 => 7.4.1 
    @storybook/addon-interactions: ^7.4.1 => 7.4.1 
    @storybook/addon-links: ^7.4.1 => 7.4.1 
    @storybook/jest: ^0.2.2 => 0.2.2 
    @storybook/react: ^7.4.1 => 7.4.1 
    @storybook/react-vite: ^7.4.1 => 7.4.1 
    @storybook/test-runner: ^0.13.0 => 0.13.0 
    @storybook/testing-library: ^0.2.0 => 0.2.0

Additional context

No response

attilacsanyi commented 1 year ago

I managed to make it work with the following setting @LironHazan :

"vite-plugin-svgr": "4.1.0"

.storybook/main.ts:

const config: StorybookConfig = {
stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
addons: [
'@storybook/addon-essentials',
'@storybook/addon-interactions',
'storybook-dark-mode',
],
framework: {
name: '@storybook/react-vite',
options: {
  builder: {
    viteConfigPath: 'libs/ui/vite.config.ts',
  },
},
},
// Customize the Vite config here. <-- Added this
viteFinal: config =>
mergeConfig(config, {
  plugins: [svgr({ include: '**/*.svg' })],
}),
};

Usage:


import UnixLogo from 'src/assets/svg/smile.svg';

export const SmileSVGComponent = () => (
  <span className="h-6 w-6">
    <Smile /* cannot make it working with className here, so hence the wrapper span :( */ />
  </span>
);

I hope this help, let me know if there is a better way.

codeth commented 11 months ago

I also ran into this issue and the only way I could get it working was to downgrade to vite-plugin-svgr@3.3.0.

It would always fail with v4 in my project, because of some combination of:

Assets were imported using named export instead of default export, i.e. import { ReactComponent as SomeAsset } from '../path/to/asset.svg'
v4 of the plugin changed the include path logic to expect ?react on the end of the resolved path
Meanwhile, I'm also using esbuild-plugin-svgr when bundling the lib (with tsup) which does not expect ?react on the end of the resolved paths, so even if I got v4 work working it broke the other one.

I tried many different variations of options objects passed into v4 of the plugin, but nothing seemed to work for my project, so I gave up and settled for v3.

kolomyaka commented 8 months ago

I also ran into this issue and the only way I could get it working was to downgrade to vite-plugin-svgr@3.3.0.

It would always fail with v4 in my project, because of some combination of:

Assets were imported using named export instead of default export, i.e. import { ReactComponent as SomeAsset } from '../path/to/asset.svg'

v4 of the plugin changed the include path logic to expect ?react on the end of the resolved path

Meanwhile, I'm also using esbuild-plugin-svgr when bundling the lib (with tsup) which does not expect ?react on the end of the resolved paths, so even if I got v4 work working it broke the other one.

I tried many different variations of options objects passed into v4 of the plugin, but nothing seemed to work for my project, so I gave up and settled for v3.

I'm using this options for svgr and can import SVG using named export { ReactComponent as SomeAsset }. "vite-plugin-svgr": "^4.2.0", "storybook": "^7.6.17",

viteFinal: (config) => mergeConfig(config, { plugins: [svgr({ include: '**/*.svg', svgrOptions: { exportType: 'named', ref: true, svgo: false, titleProp: true } })], }),

zagros commented 8 months ago

I also ran into this issue and the only way I could get it working was to downgrade to vite-plugin-svgr@3.3.0. It would always fail with v4 in my project, because of some combination of:

Assets were imported using named export instead of default export, i.e. import { ReactComponent as SomeAsset } from '../path/to/asset.svg'

v4 of the plugin changed the include path logic to expect ?react on the end of the resolved path

Meanwhile, I'm also using esbuild-plugin-svgr when bundling the lib (with tsup) which does not expect ?react on the end of the resolved paths, so even if I got v4 work working it broke the other one.

I tried many different variations of options objects passed into v4 of the plugin, but nothing seemed to work for my project, so I gave up and settled for v3.

I'm using this options for svgr and can import SVG using named export { ReactComponent as SomeAsset }. "vite-plugin-svgr": "^4.2.0", "storybook": "^7.6.17",

viteFinal: (config) => mergeConfig(config, { plugins: [svgr({ include: '**/*.svg', svgrOptions: { exportType: 'named', ref: true, svgo: false, titleProp: true } })], }),

this worked, thanks (add import svgr from 'vite-plugin-svgr' and it should work)

remark: I removed the options, just use svgr() in the plugins array

storybookjs / storybook