How do I debug stories missing from the sidebar?

[ramonsnir]

I am trying to add Prism to some of my components. Any component that includes a call to Prism.highlightElement(...) disappears from the Storybook sidebar. Commenting out the call fixes the issue.

I see no errors or warnings in the Storybook server logs or in the browser. How would I go about debugging this phenomenon?

Edit: I think I did something right :) I am now getting a warning in console: Unexpected error while loading ./XYZ.stories.tsx: ReferenceError: Prism is not defined. I'm still not sure how to proceed, unfortunately.

[shilman]

Are you importing Prism in your code?

[ramonsnir]

Yes. It's in package.json, babelrc, and the files in question have `import Prism from 'prismjs'.

I'll also note that when running the app in its entirety (not looking at individual components with Storybook), Prism works just fine.

@shilman

[ramonsnir]

@shilman Any idea how I should proceed?

[michaelaflores]

@ramonsnir I'm a little new to debugging this sort of error myself, but I've noticed that "Unexpected error while loading" category of error tends to be something that wouldn't be much further debuggable since it's a runtime evaluation happening when trying to parse your story (the loader in question would be dictated by your main.js I believe).

The fact that running your app normally does not produce this issue but running storybook does makes me think the issue may lie in the difference between how your app is built when you run the app and how it is built when you are running storybook. It might be helpful to look at .storybook/main.js.

In addition, you could look at what imports from prismjs are available from storybook's perspective when loading that component. i.e. change to import * as test from 'primjs' and log test to see whether that import is resolving correctly.