Skip to main content
InVision Support Home Page
Sign in
InVision ambassador ambassador
Nicole Colabella
Nicole Colabella Updated

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.

2

comments

Sort by

Brittini O
InVision ambassador Brittini O , ambassador

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

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. , ambassador

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

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

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

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 , ambassador

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

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 , ambassador

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

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

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

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

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
Allison Greene
InVision ambassador Allison Greene , ambassador

Hi, Is it possible to use the new 5.3 configuration (with main.js file) that supports stories.js and stories.mdx files, and also use another config file for pushing any files with stories.js extension to Invision DSM?

 

Thanks,

Ali

0
Camille M
InVision ambassador Camille M , InVision Employee , ambassador

Hi Allison,

Thanks for reaching out!

For 5.3 configuration, you can view the steps in this article:

Declarative configuration in the DSM Storybook integration

 At the moment, we indeed don't support .mdx files in the initial parse., however, we're tracking the demand for this as a future request. I'll go ahead and open a ticket to let the Product Team know that you’re interested in this functionality so they can factor that into their product strategy.

That said, as a workaround, you should be able to add it to a story file. Please check out this thread for more info: For more information, https://github.com/InVisionApp/dsm-storybook-example-library/issues/18 

Thank you!

Camille

0
Alex Dobson
InVision ambassador Alex Dobson , ambassador

We were looking to use DSM... but your current advice is to use a version of storybook that was published in January 2020? On a deprecated implementation via Storybook? Referencing: https://github.com/InVisionApp/dsm-storybook-example-library/issues/32

As it's now April 2021, it looks like DSM isn't a supported as a tool... Both from the advice here and the lack of input on the ticket shown above. It could be a bad choice of tools as it's moving towards obsolete IMO.

1
Raynor B
InVision ambassador Raynor B , InVision Employee , ambassador

Hi Alex,

Thanks for reaching out on our Community!

We certainly understand the frustration here, and while I know it's not a solution to this, I'm going to go ahead and create a ticket on your behalf to pass on your feedback to our Product team and add your vote to our open feature request for supporting Storybook 6 for DSM. 

Please keep an eye out for an email indicating that we’ve formally tracked your feedback.

I'm sorry I don't have a more satisfying answer for you today, but thanks again for taking the time to offer your candid feedback on this. 

Best,
Raynor

0

join the conversation

To comment, sign up or sign in.