Cannot destructure property 'files' of 'parameters' as it is undefined

[mdesilva]

I am getting the above error even though I have parameters and files defined. My preview.ts is as follows:

import './global.css';
import '../src/utilities.css';
import SportsTheme from "../src/themes/sports.css";
import NationTheme from "../src/themes/nation.css";

import type { Preview } from "@storybook/preact";
import cssVariablesTheme from "@etchteam/storybook-addon-css-variables-theme";

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

export const decorators = [
  cssVariablesTheme
];

export const parameters = {
  cssVariables: {
    files: {
      "Sports": SportsTheme,
      "Nation": NationTheme
    }
  }
};

export default preview;

FYI: The css files are being imported correctly as I tell webpack to use css-loader to import css files as modules, and if I make a css syntax mistake on purpose Storybook tells me about that error first. After I resolve that error, the above error pops up.

[DanWebb]

@mdesilva could you try combining the two parameters objects you have there...

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
    cssVariables: {
      files: {
        "Sports": SportsTheme,
        "Nation": NationTheme
      }
    }
  },
};

[mdesilva]

@DanWebb Yep I realized this shortly after posting the question. Thank you.

[hamza14khan]

I experienced the same issue when upgrading storybook to v8. The fix was to introduce a new parameters key instead of directly exporting the object.

e.g.

This is not going to work.

export const parameters: {
...
}

This will work.

export const parameters: {
  parameters: {
    ...
  }
}