Storybook Viewport Addon: Custom Viewports Do Not Build (react)

Question

I built an app using create-react-app. I create custom viewport types to add to my storybook. When I use yarn start everything builds fine and works. But when I build the app the viewports that I globally defined my preview.js file are not loading on the build. It is still the defaults. And for the life of me I can't figure out why. As far as I can tell I set it up the way the documentation explains.

This is my preview.js file

import { configure, addDecorator, addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { withA11y } from '@storybook/addon-a11y';
import { GlobalStyle } from '../src/styles/global-styles';

const loaderFn = () => {
  const allExports = [];
  const styles = require.context('../src/styles', true, /\.stories\.(js|mdx)$/);
  const req = require.context('../src/components', true, /\.stories\.(js|mdx)$/);
  addDecorator(withA11y, GlobalStyle);
  styles.keys().forEach(fname => allExports.push(styles(fname)));
  req.keys().forEach(fname => allExports.push(req(fname)));
  return allExports;
};

const customViewports = {
  phoneSmall: {
    name: 'Phone (320px min width)',
    styles: {
      width: '320px',
      height: '667px',
    },
  },
  tabletSmall: {
    name: 'Tablet Small & Portrait (600px min width)',
    styles: {
      width: '600px',
      height: '801px',
    },
  },
  tabletLarge: {
    name: 'Tablet Large & Landscape (960px min width)',
    styles: {
      width: '960px',
      height: '768px',
    },
  },
  desktop: {
    name: 'Desktop (1200px min width)',
    styles: {
      width: '1200px',
      height: '1024px',
    },
  },
};

configure(loaderFn, module);

addParameters({
  docs: {
    container: DocsContainer,
    page: DocsPage,
  },
  viewport: { viewports: customViewports },
});

My main.js file

module.exports = {
  stories: ['../src/**/*.stories.(js|mdx)'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-knobs/',
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-notes',
    '@storybook/addon-storysource',
    '@storybook/addon-a11y',
    '@storybook/addon-docs',
    '@storybook/addon-viewport',
  ]
}

Package.json

{
  "name": "tamman-ui",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@storybook/addon-a11y": "^5.3.17",
    "@storybook/addon-actions": "^5.3.17",
    "@storybook/addon-docs": "^5.3.17",
    "@storybook/addon-knobs": "^5.3.17",
    "@storybook/addon-links": "^5.3.17",
    "@storybook/addon-notes": "^5.3.17",
    "@storybook/addon-storyshots-puppeteer": "^5.3.17",
    "@storybook/addon-storysource": "^5.3.17",
    "@storybook/addon-viewport": "^5.3.17",
    "@storybook/addons": "^5.3.17",
    "@storybook/preset-create-react-app": "^2.1.0",
    "@storybook/react": "^5.3.17",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "autoprefixer": "^9.7.5",
    "camel-case": "^4.1.1",
    "core-js": "^3.6.4",
    "del": "^5.1.0",
    "fs": "^0.0.1-security",
    "node-sass": "^4.13.1",
    "pascal-case": "^3.1.1",
    "path": "^0.12.7",
    "prop-types": "^15.7.2",
    "puppeteer": "^2.1.1",
    "react": "^16.12.0",
    "react-dom": "^16.13.1",
    "react-scripts": "^3.4.1",
    "styled-components": "^5.0.1",
    "xml2js": "^0.4.23"
  },
  "scripts": {
    "start": "node ./src/components/atoms/Icon/utils/generate-icons.js && react-scripts start",
    "build-page": "node ./src/components/atoms/Icon/utils/generate-icons.js && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "storybook": "start-storybook -p 9009 -s public",
    "build": "yarn build-page && build-storybook -o build/storybook"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "homepage": ".",
  "browserslist": [
    "since 2010"
  ],
  "devDependencies": {
    "babel-loader": "^8.1.0",
    "react-is": "^16.12.0"
  }
}

Answer 1

Seems to be working fine. Try registering the viewport add-on

// main.js
module.exports = {
  ...
  addons: [
    ...
    '@storybook/addon-viewport/register',

    ],
  ]
}

Like the docs suggest.