Svelte-Kit项目中Storybook的viewport-addon无法显示自定义视口尺寸

问题根因 #

你遇到的自定义视口不生效问题由两个配置冲突导致：

1. @storybook/addon-essentials 默认已内置viewport插件，你在main.js的addons数组中额外重复注册了@storybook/addon-viewport，重复加载会导致自定义配置被默认配置覆盖。
2. .storybook目录下的package.json设置了"type": "commonjs"，但preview.js使用了ES模块的export语法，模块解析失败后Storybook会 fallback 到默认的MINIMAL_VIEWPORTS视口配置。

解决方案 #

步骤1：移除重复的viewport插件注册

修改.storybook/main.js，删除addons数组中单独的@storybook/addon-viewport声明：

// .storybook/main.js
module.exports = {
    core: {
        builder: 'storybook-builder-vite'
    },
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        '@storybook/addon-svelte-csf',
        '@storybook/addon-a11y'
    ],
    svelteOptions: {
        preprocess: import('../svelte.config.js').preprocess
    }
};

步骤2：统一模块语法（二选一即可）

方案A：将preview.js改为CommonJS语法

// .storybook/preview.js
const { INITIAL_VIEWPORTS, MINIMAL_VIEWPORTS } = require('@storybook/addon-viewport');

const customViewport = {
    iphone12promax: INITIAL_VIEWPORTS.iphone12promax,
    ipad: INITIAL_VIEWPORTS.ipad,
    desktop: MINIMAL_VIEWPORTS.desktop
};

module.exports = {
    parameters: {
        actions: { argTypesRegex: '^on[A-Z].*' },
        viewport: {
            viewports: { ...customViewport },
            // 可选配置：设置默认打开的视口
            defaultViewport: 'iphone12promax'
        },
        controls: {
            matchers: {
                color: /(background|color)$/i,
                date: /Date$/
            }
        }
    }
};

方案B：移除.storybook/package.json的CommonJS声明

直接删除.storybook/package.json中的"type": "commonjs"配置，继承根目录的ES模块规则，原有preview.js的ES语法即可正常生效。

步骤3：重启Storybook

执行npm run storybook重启服务，你的自定义视口即可正常显示在下拉菜单中。

内容的提问来源于stack exchange，提问作者shackra