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 John De La Torre

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?

1

comments

sort by


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, InVision Employee , 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, InVision Employee , 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 Tang
InVision ambassador Minshuo Tang , 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, InVision Employee , 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, InVision Employee , 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

join the conversation

to comment, sign up or sign in.