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

Jonathon Pitman
InVision ambassador Jonathon Pitman , ambassador
Comment actions Permalink

Was there ever a resolution to this?  We're seeing the same problem.

1

Raynor B
InVision ambassador Raynor B, InVision Employee , ambassador
Comment actions Permalink

Hi Jonathon,

We're sorry to hear that this issue is occurring for you as well. We'll be happy to pass this onto our Support team for further troubleshooting. To that end, would you mind providing the following details? 

  • What Node version are you currently running (Terminal command: node -v)?
  • Which Storybook and DSM integration versions are you using? Could you provide a copy of your package.json file?
  • Which language are you using to build your stories (React, Vue, Angular, HTML)?
  • 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, Jonathon!

Regards,
Raynor

0

Jonathon Pitman
InVision ambassador Jonathon Pitman , ambassador
Comment actions Permalink

Hi Raynor, 

 

Here are the details you requested. There are no error messages when previewing or publishing.

Node version v12.16.1

{
"name": "StoryBookHtml",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook",
"dsm-storybook:publish": "dsm-storybook publish",
"dsm-storybook:preview": "dsm-storybook preview"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.10",
"@storybook/addon-actions": "^6.1.11",
"@storybook/addon-essentials": "^6.1.11",
"@storybook/addon-links": "^6.1.11",
"@storybook/html": "^6.1.11",
"babel-loader": "^8.2.2"
},
"dependencies": {
"@invisionapp/dsm-storybook": "0.0.137",
"@storybook/addon-options": "^5.3.21",
"@storybook/addons": "^6.1.11",
"request": "^2.88.2"
}
}
0

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

Hi Jonathon,

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

0

join the conversation

to comment, sign up or sign in.