Integrating @storybook/html in DSM - displays loading

[mahathikrishna]

After publishing HTML storybook to DSM, I see "Loading..." but the storybook does not load.

package.json

"scripts": {
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook -c .storybook -o .out",
    "deploy-storybook": "storybook-to-ghpages",
    "dsm-storybook:publish": "dsm-storybook publish",
    "dsm-storybook:preview": "dsm-storybook preview"
  },
  "dependencies": {
    "@invisionapp/dsm-storybook": "latest",
    "npm": "^6.13.7"
  },
  "devDependencies": {
    "@babel/core": "^7.8.0",
    "@storybook/addon-a11y": "^5.3.9",
    "@storybook/addon-actions": "^5.3.9",
    "@storybook/addon-backgrounds": "^5.3.9",
    "@storybook/addon-centered": "^5.3.9",
    "@storybook/addon-docs": "^5.3.9",
    "@storybook/addon-knobs": "^5.3.8",
    "@storybook/addon-options": "^5.3.9",
    "@storybook/addons": "^5.3.9",
    "@storybook/html": "^5.3.2",
    "@storybook/storybook-deployer": "^2.8.1",
    "babel-loader": "^8.0.6",
    "babel-runtime": "^6.26.0",
    "eslint": "^6.8.0",
    "jquery": "3.4.1"
  },

config.js

import { configure, addDecorator, addParameters } from '@storybook/html';
import { withA11y } from '@storybook/addon-a11y';
import centered from '@storybook/addon-centered/html';
import { initDsm } from '@invisionapp/dsm-storybook';


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

addParameters({ docs: { page: null } });
addDecorator(withA11y);
addDecorator(centered);

//Init Dsm
initDsm({
  addDecorator,
  addParameters,
  callback: () => {
    // apply the custom options
    // setCustomOptions();
    configure(require.context('../stories', true, /\.stories\.js$/), module);
  }
});

[mahathikrishna]

Downgrading to V5.2.1 works. Not sure why 5.3.9 doesnt work with the integration

[mortal94]

Hey @mahathikrishna , thanks for reporting this! We will take a look and get back to you.

[baiirun]

Hey @mahathikrishna 👋. Can you show us the code for the addons.js and Badge component you are trying to view in DSM? You can remove the in-dsm object from the Badge code.

[mahathikrishna]

Absolutely @ByronGuina

addons.js

import '@storybook/addon-knobs/register';
import '@storybook/addon-actions/register';
import '@storybook/addon-a11y/register';
import '@storybook/addon-backgrounds/register';
import { registerDsm } from '@invisionapp/dsm-storybook/register';

registerDsm(process.env.STORYBOOK_DSM);

badge.stories.js

storiesOf("Components|Atoms/Badge", module)
  .addDecorator(centered)
  .add("BadgeVariation", () => BadgeVariation, {
    'in-dsm': {
      id: 
    }
  });

The BadgeVariation is just an HTML import file

[baiirun]

Thanks @mahathikrishna! We'll continue looking into it.

A few more questions:

• Are you able to run dsm-storybook preview to run the dsm-storybook addon locally? Do you get any errors running it locally on Storybook 5.3.9? Are you able to see the sample code in the Sample Code tab in storybook?
• Are you able to run storybook locally without the dsm-storybook? Any errors?

[yec]

Having the same problem. The storybook is there if i change the opacity of class .c-storybook-tab to 1. or add .loaded class.

using component story format and storybook 5.2.1
"@invisionapp/dsm-storybook": "0.0.127",