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


InVision ambassador ambassador
minshuo

Storybook Unable to load on DSM website

Hi, I have some questions regarding publishing storybook on DSM website. I have successfully uploaded my storybook to the DSM website, however, the DSM website was unable to load my storybook.

1. First, you can see the storybook info shown under the HTML tab.

2. Second, after loading for a while, the website showed "Unable to load the Storybook."

Below is the code that I was using for publishing the story:

import { withKnobs, select, text, boolean } from '@storybook/addon-knobs';
import { decorate } from '@storybook/addon-actions';
import '../components/button/_button.scss';
import buttonDocs from '../components/button/button.mdx';

// This story is written in "Component Story Format" that was introduced in Storybook 5.2
export default {
title:'Buttons',
parameters: {
decorators: [withKnobs],
// Module-Level 'in-dsm' configuration (Will apply to all stories inside the module)
'in-dsm': { id:'' }
}
};

const kindOptions = {
primary:'primary',
secondary:'secondary',
tertiary:'tertiary',
tertiary_underline:'tertiary -underline'
}
const sizeVariations = {
default:'default',
small:'sm'
}
const iconAlignment = {
left:'icon-left-aligned',
right:'icon-right-aligned'
}
const iconOptions = {
add:'add',
accessibility:'accessibility',
rotate_right:'rotate_right',
keyboard_arrow_left:'keyboard_arrow_left',
keyboard_arrow_right:'keyboard_arrow_right'
}
const decoratedAction = decorate([() => ['Click']]);


export const button_variations = () => {
constkind = select('Button kind', kindOptions, kindOptions.primary);
constsize = select('Size variations', sizeVariations, sizeVariations.default);
consticon = select('Icon', iconOptions, iconOptions.add);
constalignment = select('Alignment of the icon', iconAlignment, iconAlignment.left);
constchildren = text('Label', 'Button');
constdisabled = boolean('Disabled', false);

returndecoratedAction.withActions({ 'click .cds-button':'Button clicked!' })(
() => `
<button class="cds-button${kind !== kindOptions ? ` -${kind}` : ''}${size !== sizeVariations.default ? ` -${size}` : ''} " ${disabled ? 'disabled' : ''}>
${children}
</button>
&nbsp;
<button class="cds-button${kind !== kindOptions ? ` -${kind}` : ''}${size !== sizeVariations.default ? ` -${size}` : ''} ${alignment !== iconAlignment ? ` -${alignment}` : ''} " ${disabled ? 'disabled' : ''} icon-name="${icon}">
${children}
</button>
&nbsp;
<button class="cds-button${kind !== kindOptions ? ` -${kind}` : ''}${size !== sizeVariations.default ? ` -${size}` : ''} -icon-only " ${disabled ? 'disabled' : ''} icon-name="${icon}" aria-label="Add">
</button>
`
);
};


button_variations.story = {
parameters: {
// Story-Level 'in-dsm' configuration (Will apply only to the story that is being configured)
// Story-Level configuration will override Module-Level 'in-dsm' configuration for the specific story
'in-dsm': {
docFilePath:'../components/button/button.docs.json',
id:'5ed96aabf149f372bd4016dd'
},
docs: { page:buttonDocs }
}
};

 

I am using "Storybook-v5", "version": "1.0.0" in Storybook HTML. Can you help me on understanding what went wrong in this upload? Thanks!

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


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

Hi Minshuo,

Thanks for reaching out, and our apologies for this trouble publishing to DSM. So we can take a closer look into this, could you please provide the following details:

  1. Would you be able to provide a new screenshot that includes the developer console? 
  2. Could you confirm if the same happens with other browsers as well?

This information will help us to further investigate the issue. I look forward to your response!

Best,

Shaina

1

minshuo
InVision ambassador minshuo , ambassador
Comment actions Permalink

Hi Shaina,

Thanks for your follow up. Here's a screenshot of my Terminal:

As for the Storybook display on browsers, I've tried Safari and Firefox. They all have the same loading issue with Chrome. Here's what showed up in my Safari:

0

Michael S
InVision ambassador Michael S, InVision Employee , ambassador
Comment actions Permalink

Hi Minshuo,

Thanks for letting us know, and I'm sorry to hear you're still experiencing this issue. We'd like to have our Support team take a look into this for you. Can you provide the following details when you have a chance?

  1. What Node version are you currently running (Terminal command: node -v)?
  2. Which Storybook and DSM integration versions are you using? Could you provide a copy of your package.json file?
  3. Which language are you using to build your stories (React, Vue, Angular, HTML)?
  4. If you are getting any error messages, could you provide a screenshot showing what’s going wrong? In particular, are you seeing any messages after previewing or publishing your components?

Thanks in advance!

Michael

0

join the conversation

to comment, sign up or sign in.