Storybook: @storybook/addon-viewport defaultViewport not working

Created on 12 Aug 2018 · 4Comments · Source: storybookjs/storybook

Bug or support request summary

Each time I reload the web browser the viewport always starts at responsive when I was hoping the setup I have in .storybook/config.js should make it default to the iphone6 viewport.

Steps to reproduce

package.json

...
  "scripts": {
    "build": "build-storybook -c .storybook -o .out",
     "start": "start-storybook -p 9001 -c .storybook",
  },
  "devDependencies": {
    "@storybook/addon-actions": "^4.0.0-alpha.16",
    "@storybook/addon-centered": "^4.0.0-alpha.16",
    "@storybook/addon-info": "^4.0.0-alpha.16",
    "@storybook/addon-links": "^4.0.0-alpha.16",
    "@storybook/addon-storysource": "^4.0.0-alpha.16",
    "@storybook/addon-viewport": "^4.0.0-alpha.16",
    "@storybook/addons": "^4.0.0-alpha.16",
    "@storybook/react": "^4.0.0-alpha.16",
    "typescript": "3.0.1"
}
...

.storybook/addons.js

import '@storybook/addon-storysource/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-links/register';
import '@storybook/addon-viewport/register';

.storybook/config.js

import { configure, addDecorator } from '@storybook/react';
import centered from '@storybook/addon-centered';
import { configureViewport } from '@storybook/addon-viewport';

configureViewport({
  defaultViewport: 'iphone6'
});

addDecorator(centered);

function loadStories() {
  require('../stories/index.tsx');
  require('../stories/App/index.tsx');
  // You can require as many stories as you need.
}

configure(loadStories, module);

.storybook/webpack.config.js

const path = require("path");
const TSDocgenPlugin = require("react-docgen-typescript-webpack-plugin");


module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve("awesome-typescript-loader")
  },
  {
    test: /\.tsx?$/,
    include: [
      path.resolve(__dirname, "../stories")
    ],
    loaders: [
      {
        loader: require.resolve('@storybook/addon-storysource/loader'),
        options: { parser: 'typescript' }
      }
    ]
  });
  config.plugins.push(new TSDocgenPlugin()); // optional
  config.resolve.extensions.push(".ts", ".tsx");

  return config;
};

tsconfig.json

{
    "compileOnSave": true,
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "jsx": "react",
        "module": "es2015",
        "moduleResolution": "node",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "declaration": true,
        "noUnusedLocals": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "removeComments": true,
        "strictNullChecks": true,
        "keyofStringsOnly": true,
        "watch": true,
        "lib": [
            "es6",
            "es7",
            "dom",
            "es2017"
        ],
        "jsx": "react"
    }
}

I can try out any suggestions

viewport bug question / support

Source

tquinlan1992

👍4

Most helpful comment

I'm experiencing the same bug. Have tried the fix suggested by @panosangelopoulos and it did not resolve the issue

ajhool on 9 May 2019

👍2

All 4 comments

@tquinlan1992
I saw an error in your .storybook/config.js file, it's necessary to first load your stories and then configure the Viewport.

Please try out this one

import { configure, addDecorator } from '@storybook/react';
import centered from '@storybook/addon-centered';
import { configureViewport } from '@storybook/addon-viewport'

addDecorator(centered);

function loadStories() {
  require('../stories/index.tsx');
  require('../stories/App/index.tsx');
  // You can require as many stories as you need.
}

configure(loadStories, module);

configureViewport({
  defaultViewport: 'iphone6'
});