Storybook: TypeError: module.ReactComponent is not a function

[andresgutgon]

The issue

Hi, we're trying to move vite-plugin-svgr to latest version but we're getting this error.

We load our SVGs components in async mode with a code like this:

  const [Svg, setSvg] = useState<JSX.Element>(null)
  const file = iconNames[name]
  const iconColor = colors.textColors[color]

  useEffect(() => {
    let unmounted = false

    const fetchIcon = async () => {
      const module = await import(`../../assets/icons/${file}.svg`)

      if (unmounted) return

      setSvg(
        module.ReactComponent({
          ref,
          className: cn('fill-current', className, iconColor, {
            'w-4 h-4': small,
          }),
        })
      )
    }

    fetchIcon()

    return () => {
      unmounted = true
    }
  }, [name, iconColor, className])

  if (!Svg) return <div className='w-4 h4' />

  return Svg
})

Versions

Storybook: 6.5.10
Vite 2.9.13
vite-plugin-svgr: 2.2.1

Any idea of what could be the issue. I see that you did a big change in the way the React component is created but I don't know how to relate to Vite version.

The latest version that is working for us is Vite 1.1.0

[Jazzmanpw]

Any progress on this? My versions are a little bit newer, but the issue remains

• Storybook: 6.5.13
• Vite: 3.2.3
• vite-plugin-svgr: 2.2.2

[andresgutgon]

Sorry I didn't remember this was open.
It fixed magically for me after moving to new versions 🎉

• Storybook ^7.0.0-alpha.47
• Vite ^3.1.4
• vite-plugin-svgr ^2.2.1

[Jazzmanpw]

@andresgutgon could we keep it open? I'm not sure that integrating alpha version of Storybook into a project is the best idea (not a pet project I mean). And who knows when 7.0.0 will be out

Or what is the common approach for such issues?

[andresgutgon]

It was not an issue at all in our case. And we have quite some amount of code already. I would try to update and see if you find some issues

[andresgutgon]

In any case I'll reopen. No problem

[Jazzmanpw]

Oh, actually, I may've found the issue.

The builder will not read your vite.config.js file by default.

So one should add the plugin into both vite.config.js and into .storybook/main.js. Here's my current config, the bug went away. Can we treat it as a solution and close the issue finally? Maybe, add some know-how line into the docs?

const { mergeConfig } = require('vite');
const svgr = require("vite-plugin-svgr");

module.exports = {
  async viteFinal(config) {
    return mergeConfig(config, {
      plugins: [svgr()]
    });
  },
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/react",
  "core": {
    "builder": "@storybook/builder-vite"
  },
  "features": {
    "storyStoreV7": true
  }
}