Backgrounds Addon custom values not working

[giubatt]

When using the vite builder the values array is ignored when customizing the backgrounds addon configuration, the default key works fine.

I'm using this config:

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
  backgrounds: {
    default: "white",
    values: [
      {
        name: "light",
        value: "#f8f8f8"
      },
      {
        name: "dark",
        value: "#333333"
      },
      {
        name: "white",
        value: "#ffffff"
      },
    ]
  },
}

I get this error in the console when using the vite builder with this configuration

If I disable the vite builder by commenting the core": { "builder": "storybook-builder-vite" } line in main.js the addon works as expected, the "white" color is present and is the default.

Repo showing the bug: https://github.com/giubatt/sb-vite-background
I created a vite project from scratch, added storybook with vite builder and added the backgrounds addon config.

[IanVS]

I did a little bit of investigation, and it looks like we are missing some logic that the webpack builders have to sort the entries so that default addon configs come before the user's preview.js (https://github.com/storybookjs/storybook/blob/e8e4ca7709d975150fa48d7dad5db4e01ea6c9c5/lib/builder-webpack5/src/preview/entries.ts#L8-L28). Since we don't have that, the addParameters is called first with the values from preview.js, but then is overwritten by the defaults. You can see this by adding a console.log(value) before this line.

[husayt]

@IanVS this could be the reason also for #50

This is the issue which has been preventing me using storybook with vite, everything else i found workaround for

[IanVS]

Yes, I think we'll need to find a solution to this, it's a pretty serious problem. :-/