Component gets unmounted = ref is null while I interact with a component

[albinotonnina]

Hello Michele!

I was playing with this example in Styleguidist cookbook: how-to-use-refs-in-examples

Took me quite a while to understand why the example would not work on my almost clean version of styleguidist + snapguidist.

When I click the button in the even more simplified example below I get an error because snapguidist basically unmount the component so ref gets called with null (is that correct?)facebook/react#9328 (comment)

Could this lead to issues? I'm interacting with a component that is unmounted?

Example to try on a clean installation of styleguidist+snapguidist

let myEl;
<div>
  <button onClick={() => myEl.value = 'Pizza'}>Insert</button>
  <input ref={ref => myEl = ref} />
</div>

[MicheleBertoli]

Good catch, thanks @albinotonnina.
I'll look into it ASAP.

[MicheleBertoli]

I started looking into this, and it's a quite interesting issue.
Thank you very much for providing a non-working example.
I'll keep you posted.

[albinotonnina]

My pleasure! I love snapguidist, makes my life easier :) I would look at it myself, at least to help, but it's beyond me at the minent :) keep up the great work Michele!

[MicheleBertoli]

The problem is related to the react-test-renderer (we are using it in an unconventional way).
We faced a similar issue a few months ago, it seems React 16 is going to solve the problem.
In the meanwhile, I'll keep on investigating.

[MicheleBertoli]

Relevant issue: styleguidist/react-styleguidist#614

[MicheleBertoli]

This package has been updated to the latest version of Styleguidist (6.2.2) and React (16.2.0).
The issue is not solved yet (unfortunately), but there's a workaround:

<input ref={ref => ref && (myEl = ref)} />

[albinotonnina]

Thanks Michele! I would close this. Unless you wanna leave it open in case of a fix! Ciao!

[MicheleBertoli]

Although there's no easy way to fix this properly, I'd leave it open so that it can be useful for other people.
Thank you very much, @albinotonnina.

[goransm]

I'm not sure if this is in any way related, but I'm having a problem related to react-intl

I created a Wrapper component that works with react-styleguidist, it wraps all components with the required <IntlProvider />

But I get errors from snapguidist : Uncaught Error: [React Intl] Could not find required intl object. needs to exist in the component ancestry.

It seems like the snapshots are rendered without the styleguidist Wrapper. I don't know if I am doing something wrong, as I can't seem to find others with the same problem. I'd create an issue if I was sure this is really an issue, and not just me messing up the configuration. Any ideas would be appreciated!

[MicheleBertoli]

Hello @goransm, this seems a different problem.
Would you mind opening a new issue and provide a non-working example?
Thank you very much!