Storybook still using Webpack, despite adding correct builder option

[jamespantalones]

Not sure what's going on exactly, but Webpack is still being used even after following instructions with a clean install.

Initialized a vite project using react and react-ts

npm init vite

Then added storybook and storybook-builder-vite:

npx sb@next init --builder storybook-builder-vite
npm run storybook

My current config:

module.exports = {
  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",
  },
  async viteConfig(config, { configType }) {
    return config;
  },
};

However, Webpack is still used, according to console output....

Version: webpack 4.46.0
Time: 7297ms
Built at: 02/18/2022 3:12:03 PM

Seeing this error on the client:

Uncaught SyntaxError: The requested module '/node_modules/jest-mock/build/index.js?v=9652e658' does not provide an export named 'fn'

And unable to view any stories.

This is with storybook-builder-vite:^0.1.16 and [email protected]

Any ideas? Thanks

[IanVS]

It looks like you are hitting storybookjs/storybook#17516, unfortunately.

As for webpack, it is indeed still used to build the manager portion of storybook (the sidebar and panels, etc). This builder is only responsible for the "preview" i.e. the iframe that your component renders into.

[jamespantalones]

aha, yep, that was it. when i remove @storybook/addon-interactions it works. many thanks