Styleguidist not working correctly with ReactDOM.render()

Question

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:

Answer 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