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

[ghost]

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?

[mshaaban088]

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

[igor-dv]

@mshaaban088 , WDYT about changing it to the configureViewport ?

[mshaaban088]

On one hand it makes a lot of sense, but on the other hand it looks
redundant.

But I'm totally ok with renaming it to avoid conflicts with storybook's configure function

[igor-dv]

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 🤢.

[mshaaban088]

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

[ghost]

igor-dv's statement: "Think of having a configure function in 15 other addons at a time (there is already a configureA11y)... " is spot on. We already have a configure for the react addon. But honestly, aliasing is fine IMO... just because it's for storybook configuration, not production code. But whatever you decide is fine by me. Just as long as it works.

[ghost]

PS: the upgrade to 3.4.0-rc.3 did not fix my issue. Looking through your code, i don't see where configure or equivalent is being exported. I just see that we are supposed to import register which works fine. Is there some type of order between register and configure that is supposed to occur?

[mshaaban088]

Have you upgraded @storybook/addon-viewport to 4.0.0-alpha.1 and configure function wasn't still a function?

[mshaaban088]

Please see configure function

[ghost]

I'm gonna wait till you're not bleeding edge... it works fine with 'register' . But if I want to add any configurations, the whole thing blows up. I'll keep watching, but I don't have time to mess with this right now.

[rwieruch]

I am on version 3.4.4 for Storybook but also the viewport addon.

"@storybook/addon-actions": "^3.4.4",
"@storybook/addon-knobs": "^3.4.4",
"@storybook/addon-storyshots": "^3.4.4",
"@storybook/addon-viewport": "^3.4.4",

Everything runs fine, except for the viewport addon. It exports nothing for me.

addons.js

import '@storybook/addon-actions/register';
import '@storybook/addon-knobs/register';
import '@storybook/addon-viewport/register';

config.js

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

const req = require.context('../src', true, /stories\.js$/);

console.log(configureViewport);
// undefined

addDecorator(withKnobs);

const viewports = {
  foo: {
    name: 'foo',
    styles: {
      width: '600px',
      height: '963px',
    },
  },
  bar: {
    name: 'bar',
    styles: {
      width: '533px',
      height: '801px',
    },
  },
};

configureViewport({
  viewports,
});

configure(() => req.keys().forEach(filename => req(filename)), module);

But also when I try the default import or named import, there is nothing available.

import * as everything from '@storybook/addon-viewport';

or

import { configureViewport as qwerty } from '@storybook/addon-viewport';
import { configure as qwerty } from '@storybook/addon-viewport';

Is it necessary to upgrade everything to an unstable 4.0.0 alpha in order to get it right?

@westandy were you able to fix it? :)

[mshaaban088]

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

[rwieruch]

Thank you @mshaaban088 Looking really forward to the official 4.0 release. Is there any timeline when this will happen? I would lobe to cover the viewport add-on in an article of mine :)

[D7Torres]

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?

[mukeshsoni]

The documentation says install using

npm install --save-dev @storybook/addon-viewport

which will not install the alpha version. But the rest of the documentation is with respect to the alpha version.

Should the public facing documentation be about the alpha version functionality?

[arbaaz]

Doc says adding a new viewport is not supported in 3.4.11
https://github.com/storybooks/storybook/tree/v3.4.11/addons/viewport#faq