Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Nicole Colabella Edited

Broken build with updated Storybook (5.3) Configuration

Hello, I am having issues publishing to my DSM after making the changes listed here: 

https://medium.com/storybookjs/declarative-storybook-configuration-49912f77b78

I now have a main.js, manager.js, and preview.js. 

 

When I publish with npm this is the error I see this, even though the build does not fail:  

DSM => Failed to read Storybook config file "./.storybook"

 

And when I load my published component in the DSM I see this error in the console in safari: 

[Error] Failed to load resource: the server responded with a status of 404 () (runtime~main.48d9e98d9e9dc0b34df4.bundle.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (main.48d9e98d9e9dc0b34df4.bundle.js.map, line 0)
[Error] Failed to load resource: the server responded with a status of 404 () (vendors~main.48d9e98d9e9dc0b34df4.bundle.js.map, line 0)

 

Chrome gives a few errors about iFrame configuration, but nothing else that looks helpful.  Here is the full output for reference:

 
app.bundle.63d042a1.js:40 React version: 16.9.0
425470.js:29 HubSpot initialized on page...
11
A cookie associated with a cross-site resource at <URL> was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at <URL> and <URL>.
sync-modules.js:1 [Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted' event. Consider using MutationObserver to make the page more responsive.
cloud-global-pre-appes-synchronous.js:1 [Violation] 'load' handler took 1986ms
[Violation] Forced reflow while executing JavaScript took 87ms
cloud-global-pre-appes-synchronous.js:1 [Violation] 'setTimeout' handler took 93ms
cloud-global-pre-appes-synchronous.js:1 [Violation] 'setTimeout' handler took 380ms
6adab61.chunk.js:1 Selected Storybook Build Id SGeOPZiNe
cloud-global-pre-appes-synchronous.js:1 [Violation] 'load' handler took 508ms
A_MGFjZjlkZDY2YjhlM2--primary-button:15 unable to connect to top frame for connecting dev tools
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 storybook-addon-options is deprecated and will stop working soon
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 Adding a click listener to iframe failed: DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. at r (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:94914) at https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:95210 at Array.forEach (<anonymous>) at https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:94856 at hs (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:77780) at Sl (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:102512) at t.unstable_runWithPriority (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3x4jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:82:3462) at Yi (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:45441) at El (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:102275) at al (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:87213)
A_MGFjZjlkZDY2YjhlM2TD7-hIL4Q--IJQ==:97 [Violation] 'setTimeout' handler took 601ms
[Violation] Forced reflow while executing JavaScript took 73ms
A_MGFjZjlkZDY2YjhlM2n&viewMode=story:70 unable to connect to top frame for connecting dev tools
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager invision-dsm/on_init_dsm_registered
2
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storyRender
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 Adding a click listener to iframe failed: DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. at HTMLIFrameElement.r (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:94914)
A_MGFjZjlkZDY2YjhlM2icpkiFi4-TYDGhw==:2 [Violation] 'setTimeout' handler took 109ms
A_MGFjZjlkZDY2YjhlM2icpkiFi4-TYDGhw==:2 message arrived at preview invision-dsm/on_init_dsm {"DSM_PROD_ENV":true,"DSM_HOST":"viacom.invisionapp.com","STORYBOOK_FRAMEWORK":"react","STORYBOOK_VERSION":"5.3.6"}
  1. {displayMode: "normal", panelsAvailable: false}
A_MGFjZjlkZDY2YjhlM2icpkiFi4-TYDGhw==:2 message arrived at preview channelCreated
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager setStories
  1. {stories: {…}}
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 The default hierarchy separators are changing in Storybook 6.0. '|' and '.' will no longer create a hierarchy, but codemods are available. Read more about it in the migration guide: https://github.com/storybookjs/storybook/blob/master/MIGRATION.md
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storybookjs/knobs/set-options
  1. {escapeHTML: true}
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storybookjs/knobs/set-options
  1. {escapeHTML: true}
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storybook/source-loader/set
  1. {edition: {…}, story: {…}, location: {…}}
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storyRendered design-system-buttons--primary-button
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storyUnchanged
  1. {id: "design-system-buttons--primary-button", revision: 0, kind: "Design System|Buttons", name: "Primary Button", viewMode: "story"}
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storiesConfigured
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 Adding a click listener to iframe failed: DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. at r (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:94914) at https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:95210 at Array.forEach (<anonymous>) at https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:94856 at hs (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:77780) at Sl (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:102512) at t.unstable_runWithPriority (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3x4jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:82:3462) at Yi (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:45441) at El (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:102275) at https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:102186
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storybookjs/knobs/set
  1. {knobs: {…}, timestamp: 1579287574366}
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 Adding a click listener to iframe failed: DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. at r (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:94914) at https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:95210 at Array.forEach (<anonymous>) at https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:94856 at hs (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:77780) at Sl (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:102512) at t.unstable_runWithPriority (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3x4jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:82:3462) at Yi (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:45441) at El (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:102275) at al (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:87213)
A_MGFjZjlkZDY2YjhlM2icpkiFi4-TYDGhw==:2 Unexpected loaded state. Did you call `load` twice?
2
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storyRender
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storybookjs/knobs/set
  1. {knobs: {…}, timestamp: 1579287574096}
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 Adding a click listener to iframe failed: DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame. at r (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:94914) at https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:95210 at Array.forEach (<anonymous>) at https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:39:94856 at hs (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:77780) at Sl (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:102512) at t.unstable_runWithPriority (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3x4jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:82:3462) at Yi (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:45441) at El (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA3jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:102275) at al (https://assets.v7-io.invisionapp.com/assets/A_MGFjZjlkZDY2YjhlM2JmOQIfSpMA34jugvhBOXnIUQJGY1z4XqOFu5tgDX6c3gP56C0fAcvuW8Cx8aTD7-hIL4Q--IJQ==:74:87213)
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storyUnchanged
  1. {id: "design-system-buttons--primary-button", revision: 0, kind: "Design System|Buttons", name: "Primary Button", viewMode: "story"}
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storyUnchanged
  1. {id: "design-system-buttons--primary-button", revision: 0, kind: "Design System|Buttons", name: "Primary Button", viewMode: "story"}
A_MGFjZjlkZDY2YjhlM2aTD7-hIL4Q--IJQ==:1 message arrived at manager storiesConfigured

Here are my configuration files:

main.js

module.exports = {
stories: ['../src/components/**/*.stories.js'],
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-links',
'@storybook/addon-knobs',
'@storybook/addon-docs'
],
};

 

manager.js

import { registerDsm } from '@invisionapp/dsm-storybook/register';
registerDsm(process.env.STORYBOOK_DSM);

 

preview.js

import React from 'react';
import { addDecorator, addParameters, configure } from '@storybook/react';
import { GlobalStyle } from '../src/shared/global';
import { initDsm } from '@invisionapp/dsm-storybook';

addDecorator(story => (
<>
<GlobalStyle />
{story()}
</>
));

//Init Dsm
initDsm({
addDecorator,
addParameters,
callback: () => {
configure(require.context('../src/components', true, /\.stories\.js$/), module);
}
});

 

Can you let me know how I can get my configuration working?

 

Thank you!

 

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

sort by


Brittini O
InVision ambassador Brittini O , ambassador
Comment actions Permalink

Hi Nicole,

So sorry to hear that you’re running into this issue! Thanks for providing the details you have here in Community for our team to use for further troubleshooting.

I’m opening a ticket on your behalf with our Support team so they can troubleshoot with you internally. Please keep an eye out for an email from one of our Support agents soon.

I apologize for any frustration and disruption that this issue is causing you!

Thanks for hanging in there,

Brittini 

0

Rémy Beulé Dauzat
InVision ambassador Rémy Beulé Dauzat , ambassador
Comment actions Permalink

Hello

Same probleme on my side.

It's seems that dsm library is not ready for storybook 5.3.

Waiting the update, I still have configuration in my preview.js

This make DSM work, but storybook stop working on firefox and safari (seems to be a polyfill problem).

So if you use just DSM, it could be enough for you

 

addon.js

import { registerDsm } from '@invisionapp/dsm-storybook/register';

registerDsm(process.env.STORYBOOK_DSM);

 

preview.js

import {addDecorator, addParameters} from '@storybook/angular';
import {withA11y} from '@storybook/addon-a11y';
import {centered} from '@storybook/addon-centered/angular';
import {initDsm} from '@invisionapp/dsm-storybook';
import { setCompodocJson } from '@storybook/addon-docs/angular';
import docJson from '../documentation.json';
setCompodocJson(docJson);

addParameters({
backgrounds: [{name: 'DSM background', value: '#fff', default: true}, {name: 'dark', value: '#333'}]
});

addDecorator(withA11y);
addDecorator(centered);

//Init Dsm
initDsm({
addDecorator,
addParameters,
callback: () => {
configure(require.context('../src', true, /\.stories\.(ts|js|mdx)$/), module);
}
});




0

Monika R.
InVision ambassador Monika R., InVision Employee , ambassador
Comment actions Permalink

Hey Rémy Beulé Dauzat,

Although we are not yet supporting Storybook v.5.3.0 in our Live Components integration, rest assured that we're actively looking into adding support for the new features that have been released in that version. I will also open a ticket for you to add your voice to the feature request to support the new features, including Declarative Configurations. Stay tuned for an email confirmation shortly. 

If you do run into any issues when using one of the currently supported versions (if using Storybook v5, the Live Components feature supports version 5.1.1- 5.2.8), please do let us know! 

Cheers,

Monika

0

Rémy Beulé Dauzat
InVision ambassador Rémy Beulé Dauzat , ambassador Edited
Comment actions Permalink

Hello

 

Any news on this subject ?

It's seems to work now for me.

It's just de build wich is working because In the web page dsm, the component is not able to be displayed (infinit loading)

I'm openeing a new ticket for that

Where can I found updates on the support ?

 

Thanks a lot for your help

0

Laura Cunha
InVision ambassador Laura Cunha, InVision Employee , ambassador
Comment actions Permalink

Hi Rémy,

Thank you for taking the time to check-in with us regarding this. I see you have already been in touch with our Support team. In case it's helpful for you or anyone else who may come across this thread, I'm also sharing below the update from our Support Engineers:

At the moment, we haven't published any changes that would add support for Storybook 5.3.0 or the Declarative Configurations feature. It's possible that our integration is bundling things, but treating the directory as if it were empty. This lack of configuration would result in the broken build that you encountered. Unfortunately, you will still need to revert back to pre-declarative configuration to get things back up and running. 

Thank you for hanging in there, and please don't hesitate to reach out to our team any time you have questions or concerns!

Best,
Laura

0

Jan Fässler
InVision ambassador Jan Fässler , ambassador
Comment actions Permalink

Hi InVision Team

What is the current state of "@invisionapp/dsm-storybook" support for Storybook V5.3?
Is this topic in Backlog, Progress, Review, etc.?

Best,
Jan

1

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Jan,

As mentioned in our documentation here, DSM supports Storybook 5.1.1 and above, as well as Storybook 4.x. DSM does not yet support stories written in the new MDX story format or the new declarative configuration file that was introduced in version 5.3.

While we don't currently support the Declarative Config method of Storybook 5.3, we're currently tracking this as a feature request. That being said, I will open a ticket on your behalf so that you can stay in the loop on any updates here. Please keep an eye out for an email confirming that we've tracked your support for this.

Please let me know if there's anything else I can help out with.

Have a great day!

Shaina

If anybody else would like to add their feedback about this, please fill out a ticket with Support here detailing the feature you are looking for.

2

David Lyons
InVision ambassador David Lyons , ambassador Edited
Comment actions Permalink

Hi InVision Team,

Are there any updates on support for the Declarative Configuration in Storybook 5.3?

Thanks!
David

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi David,

As mentioned in this help article, DSM supports Storybook 5.1.1 and above, as well as Storybook 4.x. DSM does not yet support stories written in the new MDX story format or the new declarative configuration file that was introduced in version 5.3.

In Storybook 5.3, the configuration file has been renamed to make it clearer what needs to be done and to remove confusion for Storybook users around which settings should go in which file. The currently supported ​config.js​ file that lives within the .storybook​ directory was replaced/updated to ​main.j​ in 5.3. Unfortunately, we do not yet support this new configuration method and our team is continuing to track support for it as a potential feature. If you'd like me to add your interest for this please let me know.

In the meantime, could you try reverting back to the pre 5.3 method of configuring Storybook and let me know how things go? 

Thanks,

Shaina

0

David Lyons
InVision ambassador David Lyons , ambassador Edited
Comment actions Permalink

Hi Shaina,

I can publish to DSM with the old config.js in Storybook 5.2. Can you please add my interest for the new main.js configuration method in 5.3?

Thanks!

David

0

Camille M
InVision ambassador Camille M, InVision Employee , ambassador
Comment actions Permalink

Hi David,

Thanks for taking the time to write into Community to share your feedback about this, and your interest in this feature

I will open a ticket on your behalf to track your interest for this potential feature. Please keep an eye out for an email indicating that we’ve formally tracked your feedback.

Have a great day,

Camille

0

Dan Langston
InVision ambassador Dan Langston , ambassador Edited
Comment actions Permalink

Seeing as Storybook currently warns that several of the config files that DSM relies on is depreciated and even states-

“storybook-addon-options is deprecated and will stop working soon”

what is inVisions plan?

I know inVision is working on better supporting new Storybook features, but the fact that 5.3 has been out for a while and 6 is in pre-release makes this a bit concerning, especially sense Storybook is already referencing version 7 in their dev-tool warnings. So as it stands inVision is two minor releases behind and almost one major one behind, some answers beyond "we are working on it" would be nice.

 
0

Ehud Halberstam
InVision ambassador Ehud Halberstam, InVision Employee , ambassador
Comment actions Permalink

Hi Dan,

My name is Ehud and I'm a Product Manager on the DSM team. Thanks for reaching out here in Community to get some clarification on the strategy around Storybook updates.

In general, we’re looking to update DSM to work with the latest release of Storybook, and we’re investing in this on an ongoing basis. For example, we've added support for TypeScript recently and improved the handling of error states. We prioritize support for new Storybook features against other features that will help elevate the developer experience, such as design tokens. 

We’re currently working on supporting Storybook 6.0, which includes support for the declarative configuration that’s introduced in Storybook 5.3. We’ll update on the timeline as we finalize the definition and scope of the integration experience given the new features of Storybook 6.0.

Thanks again and have a great day!

0

join the conversation

to comment, sign up or sign in.