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


InVision ambassador ambassador
John De La Torre
Answered

DSM Component Container ID's not found for Live Components.

I followed all the steps in the documentation to setup live components.  I am using react and storybook V5.  When I add a component container id to a component and run preview I get 'No stories with DSM component container IDs were found.'  

 

Anyone had any similar issues?

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

official comment

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

UPDATE

Our apologies for the trouble with Stories not uploading to DSM when importing Strorybook's modules with a wildcard. Our engineers released an update to the @invisionapp/dsm-storybook package to fix this issue. Our team tested here and everything's working correctly once more since version 0.0.96.

Please update to the latest package by running npm update @invisionapp/dsm-storybook and let us know if you're still having trouble. Otherwise, thanks for your patience while we worked to fix this issue.


John De La Torre
InVision ambassador John De La Torre , ambassador
Comment actions Permalink

Ok after a code change I am now getting this error.  Plugin/Preset files are not allowed to export objects, only functions.  I think this is babel related.

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi John,

I'm really sorry to hear you're experiencing these troubles setting up the DSM Storybook integration. To get a better idea why this is happening, could you provide the following information:  

  1. What browser and operating system are you using? You can get these details by going to http://www.whatsmybrowser.org/, clicking “Copy”, and pasting the link it gives you here.
  2. Can you also go to www.whatismyproxy.com and see if the service detects any proxy usage on your machine?
  3. What are your node and storybook version numbers? 
  4. Did you happen to see any errors in Terminal when running the publish command?

Once we have these details, we will be better suited to dive deeper into this investigation. If you have any questions, please don't hesitate to reach out, we're here to help any way we can. 

Look forward to hearing from you,

Shaina

0

Adrien Lo
InVision ambassador Adrien Lo , ambassador
Comment actions Permalink

I am also getting this error.

 

1. https://whatsmybrowser.org/b/KV4WDSA

2. No proxy

3.

$ node: v10.12.0

$ storybook: 5.1.9

4. 

npm run dsm-storybook:publish

DSM => Custom prettier configuration was not found for this project
DSM => Verifying dsm-storybook version (0.0.93) is valid...
DSM => Verifying <Company> subscription...
DSM => Analyzing file stories/Button/index.js
DSM => ✖ No stories with DSM component container IDs were found. For further assistance visit (https://support.invisionapp.com).

 

Button storybook snippet

storiesOf.add(
  'Standard',
  ()=>(
    <Button>Standard</Button>
  ),
  {
    'in-dsm':{
      id:'xxxxxxxxxxxxxxxxxxxxx', // valid component id
    },
  })
0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Thank you for providing those details, Adrien. Given the information you've provided, it appears as if this may be related to a known issue that our teams are investigating.

At this point, I would like for our Support team to take a closer look at this for you. I'll open a ticket on your behalf including all of the details that you have here. Please keep an eye out for an email from one of our Support agents soon.

I apologize for any disruption that this is causing in your workflow, and we hope to get you some answers soon.

Best,

Shaina

0

minshuo
InVision ambassador minshuo , ambassador
Comment actions Permalink

I had the silimilar issue as well. When I preview my stories, everything worked just fine. But when I tried to publish my story to DSM, I got the following message:

DSM =>   The following component container IDs are used in stories, but no matching IDs were found in DSM. DSM will not display stories with these IDs.

DSM =>   <5d4d103e84c33a7873cf3606>

 

Consequently, I can't view the live compoents in my DSM web view. Anyone can shed some light on this issue?

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Minshuo,

Sorry to hear that you're running into this issue. Can you also please provide the following information:  

  1. What browser and operating system are you using? You can get these details by going to http://www.whatsmybrowser.org/, clicking “Copy”, and pasting the link it gives you here.
  2. Can you also go to www.whatismyproxy.com and see if the service detects any proxy usage on your machine?
  3. What are your node and storybook version numbers? 
  4. Did you happen to see any errors in Terminal when running the publish command?
  5. A screencast or screenshot(s) displaying the issue that you're facing.

Look forward to hearing back soon,

Shaina

0

Nicole Colabella
InVision ambassador Nicole Colabella , ambassador
Comment actions Permalink

Hi Shaina,

I am also having this issue.  Here is the information requested:

  1. What browser and operating system are you using?  https://whatsmybrowser.org/b/39HZ4AA
  2. Can you also go to www.whatismyproxy.com and see if the service detects any proxy usage on your machine?  No proxies were detected.
  3. What are your node and storybook version numbers? Node v12.9.1  Storybook 5.1.11
  4. Did you happen to see any errors in Terminal when running the publish command?  See below:

    npm run dsm-storybook:publish

    > [email protected] dsm-storybook:publish /Users/<username>/taskbox

    > dsm-storybook publish

    DSM =>   Custom prettier configuration was not found for this project

    DSM =>   Verifying dsm-storybook version (0.0.97) is valid...

    (node:73002) Warning: Setting the NODE_TLS_REJECT_UNAUTHORIZED environment variable to '0' makes TLS connections and HTTPS requests insecure by disabling certificate verification.

    DSM =>   Verifying <company> subscription...

    DSM =>   Analyzing file src/stories/index.js

    DSM => No stories with DSM component container IDs were found. For further assistance visit (https://support.invisionapp.com).

    npm ERR! code ELIFECYCLE

    npm ERR! errno 1

    npm ERR! [email protected] dsm-storybook:publish: `dsm-storybook publish`

    npm ERR! Exit status 1

    npm ERR!

    npm ERR! Failed at the [email protected] dsm-storybook:publish script.

    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:

    npm ERR!     /Users/<user>/.npm/_logs/2019-09-03T16_30_35_594Z-debug.log

 

Here is my code snippet:

stories.add('Primary Button', () => (
  <button disabled={boolean('Disabled', false)} >
   {text('Button Text', 'Button')}
  </button>
 ),
 {
 'in-dsm': {
  id: 'xxxxxxxxxxxxxxxxxxxxxxxx' //Valid ID
 }
}
);

 

Please let me know if I can provide anything further to help.  Thank you! 

Nicole

1

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Thanks for providing those details, Nicole. I would like for our Support team to take a closer look at this for you, as they can test more on their end.

I will open a ticket on your behalf with our Support team including all of the helpful information that you have here. Please keep an eye out for an email from one of our Support agents soon.

Thanks for hanging in there,

Shaina

0

Roman Zanettin
InVision ambassador Roman Zanettin , ambassador Edited
Comment actions Permalink

Sorry to chime in here as well, but we have the same issues:

os: osx 10.14.6
node: 10.16.0
storybook: 5.2.1 (react version)
dsm-storybook: 0.0.99

story:
stories.add('default', () => <button>hi</button>, {

  'in-dsm': {
    id: 'xxxx',
  },
});

output:
DSM => Custom prettier configuration was found for this project
DSM => Verifying dsm-storybook version (0.0.99) is valid...
DSM => Verifying XYZ subscription...
DSM => Analyzing file XYZ
...
DSM => ✖ No stories with DSM component container IDs were found. For further assistance visit (https://support.invisionapp.com).
DSM => DSM storybook preview-data server is listening on port: 55718
0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Roman,

Thanks for providing those details. Our Support team will need to take a closer look at this for you in order to determine the cause.

Hang tight while I open a ticket on your behalf with the information that you've provided in your comment. Please keep an eye out for an email from one of our Support agents soon who will be following up with additional troubleshooting questions.

Thanks,

Shaina

0

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

If anyone else is experiencing this issue, please contact our Support team directly here with the following information:

  1. What browser and operating system are you using? You can get these details by going to http://www.whatsmybrowser.org/, clicking “Copy”, and pasting the link it gives you here.
  2. Go to www.whatismyproxy.com and see if the service detects any proxy usage on your machine.
  3. What are your node and storybook version numbers? 
  4. Did you happen to see any errors in Terminal when running the publish command?
  5. A screencast or screenshot(s) displaying the issue that you're facing.
0

join the conversation

to comment, sign up or sign in.