storybook: Uncaught TypeError: (0 , _addonViewport.configure) is not a function

In my storybooks-config folder, I have an addons.js file with a single line: import test from '@storybook/addon-viewport/register';

I am running storybook with @storybook/react and I wanted to add viewport:

import {configure as viewport, INITIAL_VIEWPORTS} from ‘@storybook/addon-viewport’;

const newViewports = {
  kindleFire2: {
    name: 'Kindle Fire 2',
    styles: {
      width: '600px',
      height: '963px'
    }
  },
  kindleFireHD: {
    name: 'Kindle Fire HD',
    styles: {
      width: '533px',
      height: '801px'
    }
  }
};
viewport({
  viewports: {
    ...INITIAL_VIEWPORTS,
    ...newViewports
  }
});

This is what is in my package.json:

    "@storybook/addon-viewport": "^3.4.0-rc.3",
    "@storybook/addons": "^4.0.0-alpha.1",
    "@storybook/react": "^3.4.0-rc.3",

The view port shows up as long as I don’t try to run viewport(..). However, when I used your example code to add the kindle viewports, I get the error stated in the subject:

Uncaught TypeError: (0 , _addonViewport.configure) is not a function

What am I doing wrong?

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 1
Comments: 16 (10 by maintainers)

Most upvoted comments

You’re using an old version (3.4.0-rc.3) of the addon which doesn’t expose configure function, you should use version 4.0.0-alpha.1 instead.

It’s also recommended to use the same version of all storybook packages, as using different versions was not tested

mshaaban088 on Mar 30, 2018

I upgraded to 4.0.0-alpha.1 and I’m still getting (0 , _addonViewport.configure) is not a function when using import { configureViewport } from '@storybook/addon-viewport'; in my config.js.

Could it be that the documentation is outdated and I’m doing something wrong?

D7Torres on Aug 3, 2018

addon-viewport prior to 4.0.0 wasn’t exporting any function/fields, so you cannot simply install 3.4.4 and expect to see configure function 😉

So to answer your question, yes it’s necessary to upgrade

mshaaban088 on May 16, 2018

That’s why I’m totally ok to change it 😉 I was just stating the initial thoughts

mshaaban088 on Apr 2, 2018

I think it will be a good change for the naming convention between the addons. Think of having a configure function in 15 other addons at a time (there is already a configureA11y)… People will need to use aliasing which IMO is 🤢.

igor-dv on Apr 2, 2018