Styleguidist not working correctly with ReactDOM.render()

I am working on a website and I am considering using styleguidist as the solution for our documentation.

However, if I try to make documentation for components rendered with ReactDOM.render(), styleguidist ends up with "Compiled successfully!" but fails on page render. I even know why this is probably happening, but I can’t figure out any workaround, other than excluding those files. Any ideas?

note: We are using rendered components, because we need to render them into php templates.

example:

import React from 'react';
import ReactDOM from 'react-dom';
import Component from "./Component.jsx";

ReactDOM.render(<Component />, document.getElementById('component'));

result:

enter image description here

1 thought on “Styleguidist not working correctly with ReactDOM.render()”

  1. Ok, I figured it out. You can wrap your <Component /> with #component in your Component.md file, so that the #component into which Component renders is present on the website.

    Example:

        ```jsx
        <div id="component">
          <Component />
        </div>
        ```'
    

    (Note: The ‘ in the example above is only present to force-show backticks.)

    Another approach might work for components that always render into elements with the same id by altering styleguidist wrapper’s id in styleguide.config.js: https://react-styleguidist.js.org/docs/configuration/#mountpointid

    Reply

Leave a Comment