Skip to main content
Latest news: [[ newestAnnouncement.title ]] Learn more
InVision Support Home Page
Sign in
InVision ambassador ambassador
Chirag Kular
Chirag Kular Updated

Storybook V6 Support

Using Storybook v6.0.21 and dsm-storybook: 0.0.133.
Framework: HTML

After following the steps mentioned in the article https://support.invisionapp.com/hc/en-us/articles/360048142812

I am running into the following error (found in .dsm/log.error folder): 
Error message: No stories with DSM component container IDs were found.

Created Date: 9/10/2020, 2:03:24 PM
Story file path: No story file path
Component file path: Not found in "in-dsm"

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.

7

comments

Sort by

Jon Wålstedt
InVision ambassador Jon Wålstedt , ambassador Edited

Any solution to this? I have the same problem using:

"@invisionapp/dsm-storybook": "^0.0.137"
"@storybook/react": "^6.1.8",

Error message: No stories with DSM component container IDs were found.
Story file path: No story file path
Component file path: Not found in "in-dsm"

 

import React from 'react';
import { withKnobs, boolean } from '@storybook/addon-knobs';
import { Story, Meta } from '@storybook/react/types-6-0';
import { Button, ButtonProps } from './Primary/Large';

export default {
title: 'Button',
component: Button,
decorators: [withKnobs],
parameters: {
'in-dsm': {
id: '<my-container-id>',
},
},
argTypes: {
backgroundColor: { control: 'color' },
},
} as Meta;

const Template: Story<ButtonProps> = (args) => <Button {...args} disabled={boolean('Disabled', false)} />;

export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};

 

0
Camille M
InVision ambassador Camille M , ambassador

Hi Jon,

Sorry to hear you're running into trouble with Storybook!

We'd like to gather some additional details to assist in troubleshooting this further. Would it be possible to provide the following?

  • 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)?

Thanks!

Camille​

0
Jon Wålstedt
InVision ambassador Jon Wålstedt , ambassador

Hi Camille,

I have tried with node versions 10.23.0, 12.18.3 and 14.8.0.

I am using React and Typescript to build my stories.

Here is my package.json

{
"name": "my-package",
"version": "1.0.0",
"license": "MIT",
"scripts": {
"build": "rollup -c rollup.config.ts",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook -s public",
"dsm-storybook:publish": "dsm-storybook publish",
"dsm-storybook:preview": "dsm-storybook preview"
},
"main": "lib/index.cjs.js",
"module": "lib/index.esm.js",
"types": "lib/types",
"devDependencies": {
"@invisionapp/dsm-storybook": "0.0.137",
"@rollup/plugin-babel": "5.2.2",
"@rollup/plugin-commonjs": "17.0.0",
"@rollup/plugin-json": "4.1.0",
"@rollup/plugin-url": "6.0.0",
"@storybook/addon-essentials": "6.1.9",
"@storybook/addon-options": "5.3.21",
"@storybook/react": "6.1.9",
"@svgr/rollup": "5.5.0",
"@types/react": "17.0.0",
"antd": "^4.9.1",
"babel-plugin-import": "1.13.3",
"css-loader": "5.0.1",
"cssnano": "4.1.10",
"less": "3.12.2",
"less-loader": "7.1.0",
"less-vars-to-js": "1.3.0",
"postcss-cssnext": "3.1.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"request": "2.88.2",
"rollup": "2.34.0",
"rollup-plugin-peer-deps-external": "2.2.4",
"rollup-plugin-postcss": "3.1.8",
"rollup-plugin-typescript2": "0.29.0",
"style-loader": "2.0.0",
"typescript": "4.1.2"
},
"peerDependencies": {
"antd": "^4.9.1",
"react": "17.0.1",
"react-dom": "17.0.1"
}
}

0
Camille M
InVision ambassador Camille M , ambassador

Hi Jon,

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
Andrew Harvard
InVision ambassador Andrew Harvard , ambassador Edited

Hey Chirag Kular and Jon Wålstedt, I ran in into this same problem. I got help from Support back on Nov 12, 2020, here what they said:

"After some further review, I believe these issues are due to the use of Storybook Args, and the DSM => × No stories with DSM component container IDs were found error messaging specifically due to the Button.bind({}) syntax.

For context, the latest dsm-storybook package does support some aspects of Storybook 6, but we're still working on supporting some of the newer features, including args. I've added your vote to add support for Storybook Args. Though, a potential cause to this issue, I don't believe this is where the No stories with DSM component container IDs were found error is stemming from. 

We recently became aware of a known limitation where the use of the Template.bind({}) syntax will result in a No stories with DSM component container IDs were found error in the console when you try to publish. In this case, I believe it's due to the Button.bind({}) syntax. 

As a workaround, we recommend not using the Button.bind({}) syntax in Storybook 6, or potentially downgrading to Storybook 5.3.x. Removing the the Button.bind({}) syntax should allow you to publish. If you can give that a try, and please let us know if you run into any trouble still. 
After some further review, I believe these issues are due to the use of Storybook Args, and the DSM => × No stories with DSM component container IDs were found error messaging specifically due to the Button.bind({}) syntax."

Anyone from InVision know what the status is for supporting Storybook Args?

0
Chirag Kular
InVision ambassador Chirag Kular , ambassador

Jon Wålstedt Andrew Harvard

Yeah, I got the same response from the them and only way to get this working is not use Bind syntax and use Knobs. 

0
Jon Wålstedt
InVision ambassador Jon Wålstedt , ambassador Edited

I got rid of the "No stories with DSM component container IDs" by removing the use of "as Meta" and writing the stories as below. Using the Bind syntax does not work properly either but I was able to publish the stories even with the bind syntax when removing the "as Meta".

import React from "react";
import { Story } from "@storybook/react/types-6-0";
import { DefaultButton, IDefaultButtonProps } from "./DefaultButton";

export default {

title: "Button/Default",
component: DefaultButton,
decorators: [],
parameters: {
"in-dsm": { id: "my-id"},
},
};

 

export const DefaultLarge = ({ children, ...args }: IDefaultButtonProps) => (

<DefaultButton {...args}>{children}</DefaultButton>

);

 

DefaultLarge.args = {

children: "Default",

size: "large",

};

 

export const DefaultMedium = ({ children, ...args }: IDefaultButtonProps) => (

<DefaultButton {...args}>{children}</DefaultButton>

);

 

DefaultMedium.args = {

children: "Default",

size: "middle",

};

1
Andrew Harvard
InVision ambassador Andrew Harvard , ambassador

Jon Wålstedt, does your approach enable the use of Storybook Controls?

0
Jon Wålstedt
InVision ambassador Jon Wålstedt , ambassador

Yes, the Storybook Controls is working using the syntax above

0
Andrew Harvard
InVision ambassador Andrew Harvard , ambassador

Nice! Thanks for the example. 

0
Andrew Harvard
InVision ambassador Andrew Harvard , ambassador
Thought I would share my working Storybook/HTML code. Uses args to generate Controls to avoid using Knobs.
 
 
const buttonStyleClassNames = ['button--primary', 'button--secondary'];

 

export default {
  title: 'Components/Button',
  parameters: {
    'in-dsm': {
      id: '<your-container-id>',
    },
  },
  argTypes: {
    buttonText: {
      name: 'Button Text',
      control: 'text',
    },
    buttonClass: {
      name: 'Button Class',
      control: {
        type: 'radio',
        options: buttonStyleClassNames,
      },
    },
  },
};

 

const ButtonMarkup = ({ buttonText, buttonClass, ...args }) => {
  return /*html*/ `
  <button class="button ${buttonClass}">
    ${buttonText}
  </button>`;
};

 

export const PrimaryButton = (args) => ButtonMarkup(args);
PrimaryButton.args = {
  buttonClass: buttonStyleClassNames[0],
  buttonText: 'Primary Button',
};

 

export const SecondaryButton = (args) => ButtonMarkup(args);
SecondaryButton.args = {
  buttonClass: buttonStyleClassNames[1],
  buttonText: 'Secondary Button',
};

 

0
Rob Wood
InVision ambassador Rob Wood , ambassador

Thanks for the responses. Does anyone knows of a Vue equivalent example? I've tried and I can get close but can't quite get it working. 

I want to use controls AND be able to publish this to DSM as a live component.

0
Andrew Harvard
InVision ambassador Andrew Harvard , ambassador
1
Rob Wood
InVision ambassador Rob Wood , ambassador

Thanks Andrew Harvard, I'll try asking on that thread.  

0

join the conversation

To comment, sign up or sign in.