Viewport Addon: Custom viewports are NOT appearing as available options in Viewport drop-down

[sangzc]

Summary

Issue

I am attempting to add a custom viewports and they are not appearing in the viewport drop-down.

Steps to reproduce

Here is my .storybook/config.js file. Note: I've tried it with and without the @storybook/addon-viewport in the addons list.

import path from 'path';
import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: [
    '../stories/**/*.mdx',
    '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)',
    '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
    '@storybook/addon-viewport'
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  }
};
export default config;

This is my preview.ts

import type { Preview } from '@storybook/react';
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
import '@/components/_app.scss';

const CUSTOM_VIEWPORTS = {
  xxs: {
    name: 'xxs',
    styles: {
      width: '480px',
      height: '270px'
    }
  },
  xs: {
    name: 'xs',
    styles: {
      width: '600px',
      height: '270px'
    }
  }
}

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    backgrounds: {
      values: [
        { name: 'midnight', value: '#000525' },
        { name: 'white', value: '#ffffff' },
        { name: 'navy', value: '#0a145a' },
      ],
    },
    viewport: {
      viewports: {
        ...INITIAL_VIEWPORTS,
        ...CUSTOM_VIEWPORTS
      }
    },
  },
};

export default preview;

And my devDependencies in package.json

  "devDependencies": {
    "@storybook/addon-essentials": "^7.6.14",
    "@storybook/addon-interactions": "^7.5.3",
    "@storybook/addon-links": "^7.5.3",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/addon-viewport": "^7.6.14",
    "@storybook/blocks": "^7.5.3",
    "@storybook/nextjs": "^7.6.14",
    "@storybook/react": "^7.6.14",
    "@storybook/testing-library": "^0.2.2",
    "sass": "^1.69.5",
    "storybook": "^7.5.3",

I only see these 3 Viewports in the dropdown

Additional information

Relevant output when running storybook

@storybook/cli v7.5.3

(node:33861) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
info Found existing addon "@storybook/addon-viewport", skipping.
info Found existing addon "@storybook/addon-viewport", skipping.

Create a reproduction

No response

[dionatan-g]

The correct structure is:

viewport: {
  options: CUSTOM_VIEWPORTS
}

Also, the addon-viewport is not necessary anymore.