Allow configuring React plugin

[gustavohenke]

👋 been upgrading my packages today, and noticed that with Vite moving away from plugin-react-refresh and suggesting the use of plugin-react, one of the features I use in my codebase is not supported anymore: decorators.

plugin-react docs shows an example on how to enable it:
https://github.com/vitejs/vite/blob/b17444fd97b02bc54410c8575e7d3cb25e4058c2/packages/plugin-react/README.md#L54-L66

With the above said, my ask is: can we please have a way to configure the plugin?

I'm not sure if viteFinal() works for this already, but judging from Vite's plugin API, I'd say no.
Also adding the plugin-react twice to the config from there doesn't sound good.

thanks in advance!

[IanVS]

Hi, it's a little bit tricky, because of the way that plugin-react actually becomes a set of three plugin objects, but you should be able to examine the config.plugins that is supplied to viteFinal, remove the plugins, and re-add plugin-react with the settings that you want.

[IanVS]

Here's an example that I'm using in my own project. It's a little hacky, but it does work.

const plugins = [
  ...config.plugins.filter((plugin) => {
    return !(Array.isArray(plugin) && plugin[0].name === 'vite:react-babel');
  }),
  reactPlugin({
    exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
    babel: { plugins: ['@babel/plugin-transform-react-display-name'] },
  }),
];

[Psvensso]

My even more hacky workaround

.storybook/main.js

...
async viteFinal(config, { configType }) {
    config.base = "";
    config.plugins.splice(4, 1);
    config.plugins.push(
      require("@vitejs/plugin-react")({
        exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
        babel: {
          parserOpts: {
            plugins: ["decorators-legacy"],
          },
        },
      })
    );
    return config;
  },
  ...

[RussMax783]

@IanVS your solution worked for me. Was fighting that one for a while. I needed to have

require("@vitejs/plugin-react")({
        jsxImportSource: "@emotion/react",
        babel: {
          plugins: ["@emotion/babel-plugin"],
        },
      }),

Looks like its directly using some plugins but some of those are now deprecated in favor of the @vitejs/plugin-react package.

[gustavohenke]

While these solutions work, they are duplicating some logic that is in storybook-builder-vite, which is the ignoring of stories files.
That's why it'd be great to have an option to configure the underlying plugins 😃

[IanVS]

While these solutions work, they are duplicating some logic that is in storybook-builder-vite, which is the ignoring of stories files.
That's why it'd be great to have an option to configure the underlying plugins 😃

@gustavohenke do you have a suggestion of how we could accomplish it? I'm certainly open to ideas.

[gustavohenke]

uhh storybook docs is a bit difficult to navigate/poor when you want to find information about the .storybook/main.js file...

Are you able to read anything from the configuration file, or maybe just from the core: { builder: 'storybook-builder-vite }` object?

If yes, then that's definitely the place to read from, I wouldn't expect this package having knowledge of the separate vite config.

[Psvensso]

This can be closed i think

See #286

[IanVS]

I'll leave it open for now, but this is fixed in Storybook 7.0, where your project's vite.config file is used automatically instead of storybook itself injecting the vite plugin.

[khanakia]

I am using Storybook 7.0 and it's not working i have styled-components displayName configured in Babel and the setting does not work in storybook

[IanVS]

This repo is for Storybook 6.5. As I mentioned in the other issue you commented on, please open a new issue with all the details, so someone can look into it.

Closing this issue as wontfix for 6.5