Add support for Storybook custom builder

[Jordan-Hall]

Currently storybook requires either webpack or webpack5 set in the { core: { builder: '...' } }

I've been wanting to use more custom builder for plugins without having to fork the whole storybook integration. For example:

const rootMain = require('../../../.storybook/main');

module.exports = {
  ...rootMain,

  core: { ...rootMain.core, builder: '@storybook/builder-vite' },

  stories: [
    ...rootMain.stories,
    '../src/lib/**/*.stories.mdx',
    '../src/lib/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [...rootMain.addons, '@nrwl/react/plugins/storybook'],

  async webpackFinal(config, { configType }) {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    return config;
  }
};

[mandarini]

Hi there @Jordan-Hall ! What happens when you make that change to your main.js?

[Jordan-Hall]

@mandarini it says its reverts to webpack 4

[mandarini]

Ohhhhhhhhhhhhhhh I know the issue! Ok, will look into this soon. I'm on PTO after PTO these days, but next week it will be my priority! :)

[mandarini]

I know the message says so, but does it actually use webpack4, or maybe it does use your builder-vite but just says it uses webpack 4?

[Jordan-Hall]

I know the message says so, but does it actually use webpack4, or maybe it does use your builder-vite but just says it uses webpack 4?

Yes it uses the vite under it. Sorry, the warning message thrown me off because of other issues I was facing! I didn't have time to debug it fully until now.

[mandarini]

Perfect!!!! Thanks these answers were super helpful!!! :D :D Just bad messaging, easy to fix!! Thanks @Jordan-Hall !

[mandarini]

Note to self: fix messaging and core builder check for Storybook

[Jordan-Hall]

I'll let you know if this is exactly the issue. WIth the setup I have it appears to still be running on webpack (At least thats what it says). I notice now #10584 is saying bable-loader being used so will need to debug for longer. However at the same time all the viteFinal config is being called as expected.

[mandarini]

Hi @Jordan-Hall ! I'm testing this out, right now!

Sooooo, great news!!!

I just tested this! I installed vite and @storybook/builder-vite. Then, in my React projects's .storybook/main.js I changed the builder to this: builder: '@storybook/builder-vite'.

Then I just did nx storybook my-project and it works like a charm.

Here is my repo. I had to do nothing more, it just works! I just need to remove that webpack4 message, which is disorienting! Here are the changes from the default Storybook setup as Nx creates it, to move to vite.

Please please let me know if it works for you!

You can also read the docs on the vite builder!

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.