Add support for Storybook custom builder

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 @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!

[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 https://github.com/nrwl/nx/issues/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.