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