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


InVision ambassador ambassador
Nicole Colabella 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!

 

2

comments

sort by


Brittini O
InVision ambassador Brittini O, InVision Employee , 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

join the conversation

to comment, sign up or sign in.