Babel configuration

[robcaldecott]

Is there a more elegant way to configure the babel options yet? I am currently hacking my viteFinal config to enable the formatjs plugin like this:

async viteFinal(config, { configType }) {
    config.plugins = [
      ...config.plugins.filter((plugin) => {
        return !(
          Array.isArray(plugin) && plugin[0].name === "vite:react-babel"
        );
      }),
      require("@vitejs/plugin-react")({
        exclude: [/\.stories\.(t|j)sx?$/, /node_modules/],
        babel: { plugins: ["formatjs"] },
      }),
    ];
    return config;
  },

This feels a bit brittle. I'm sure there was talk of a better way to handle this as it seems like a common use case. Anything on the radar?

[IanVS]

There has been a little talk of finding a better way, yes. So far there have been no concrete proposals of how to improve it, though. We're open to suggestions!

[mszekiel]

Can it use .babelrc file?

[IanVS]

You can configure the vite plugin-react to use your .babelrc files, with babelrc: true as shown here: https://github.com/vitejs/vite/tree/main/packages/plugin-react#babel-configuration. But I haven't tested this out. What would be your expectations for how it should work?

I'd really like to make it easier to configure babel for vite react storybook projects.

[mszekiel]

@IanVS sorry for late reply. For us in the current project, the problem is that vite-builder is using the predefined vitejs config from this repository. And I didn't see any way to provide extended config other than OP posted.

Maybe additional import of vite config of project inside predefined from builder?

Even with the solution you've provided, you have to modify it in viteFinal.

[IanVS]

Yes, that's right, the only way right now is with viteFinal, and adjusting the plugins manually.

There are some experiments going on right now that would change the way framework and builder packages work together, and I think if that turns out to work, it'll be a lot easier to set options like this, so I'd like to wait a little longer to see how that shakes out, before we think about adding an option to the global storybook config. I'd suggest using the approach posted above for now.

[mszekiel]

Yes, for now it's a valid solution that works, and we're talking about storybook environment, so it's not affected for production build.

Looking forward to then, thank you!

[Hideman85]

I have the same issue, but I have a delta, when I remove the default config to use mine it looks like lot of additional files are proceed by babel for no reason.
Would be great that by default the builder look for configFile: true, babelrc: true to be easier to override without the need to know the internal config.

[IanVS]

For anyone still dealing with this, you can now try out storybook 7 (in alpha currently, not very stable), which uses your vite.config.js config as a base for storybook. So, you can set your babel config in your react plugin there, and storybook will use it. Try npx sb@future upgrade --prerelease to convert. And let us know if you hit any issues. There are probably still a few bugs to work out, but it helps solve this particular issue pretty nicely.

[develohpanda]

@IanVS that's awesome to hear! Do you know if Storybook 7 has a target stable/release date? Our deployed instance of Storybook is not crucial however I'm wary of jumping onto a prerelease version in case it impacts development cycles.

[IanVS]

I haven't heard any recent estimates, but I think it will likely go into beta in October or November, and then stable release at the end of this year or beginning of next.

Totally understandable about not wanting to risk churn with prerelease versions. I'd love if you were willing to test it out, though, and report any issues you might come across. That's how we can help ensure the smoothest transition when we release the stable version, through early feedback from users. :)

[jcollicoat]

Hey @IanVS , we (myself and @develohpanda) are currently updating our Storybook to v7 alpha with vite, and are experiencing some discrepancies between our import.meta.env when developing vs building. I've created a minimal repo with some examples and notes here: https://github.com/jcollicoat/vite-storybook

I'd appreciate any help I can get on this! Please let me know if I can add more info or if this should be posted elsewhere.

[IanVS]

Thanks @jcollicoat, I replied in an issue, jcollicoat/vite-storybook#1, since it's not really related to Babel configuration (this issue here).

[Psvensso]

Just to confirm, the vite.config.ts loaded and used by default.
Work fine to set react > babel config there
Im currently using storybook 7.0.0-beta.19

[IanVS]

Yea, in 7.0 it is loaded automatically. This repo is for the 6.5 version, in 7.0 it moved into the main monorepo.

[karsonkalt]

Wanting a bit of clarification here, even if my project is on vite, sb7 still needs to use Babel? We are pure esbild and would like to avoid if possible.

[IanVS]

SB7 does not use babel in and of itself. If you're using @vitejs/plugin-react, that will use babel. If you're using @vitejs/plugin-react-swc then babel is not involved at all.