Patternfly-react: Empty State Spinner Example not working with pf4

[Rudi3]

When using the official Spinner Example with the latest pf4 (I've tried a few versions back with the same results). This Error is shown:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)

Removing the <Title> fixes this problem. I don't know why the Title is a problem here, all the other examples I've tired worked (even with a Title).

Repro: See this Codesandbox: https://x6ifk.csb.app/

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around?
Bug - Workaround: not having a title?

What is your product and what release version are you targeting?
4.12.2 and many earlier versions (I haven't tried them all)

[boaz0]

@Rudi3 it's really hard to reproduce it on my environment.
Can you send me the codesandbox with the code?
Thanks.

[Rudi3]

@boaz0 oh sorry - I didn't include it because of the open sandbox button on the bottom right. Perhaps it only shows up for me as I forked it? Here is the link: https://codesandbox.io/s/x6ifk

[boaz0]

I don't know why it does not work on your environment (trust me I tried many things).

However, when I opened a new sandbox and play with it, it worked:
https://codesandbox.io/s/immutable-bash-w3bxt?file=/src/App.js

I have a feeling this is a problem with codesandbox but I am not sure :\

Edit

It seems like version 3.x.x is working but in version 4.x.x this problem appears.
Unfortunately, I do not have access to the node_module and so I cannot debug it on that environment.
Therefore, I think there are two possibilities why it happens:

• The examples are out of date and we need to update what you see in here or at least tell what version of pf4
• A bug on codesandbox side... I assume

Edit 2

OK - I think it's because the documentation that you were reading is for pf4 version 3.x.x
If you copy paste the example from pf4 react docs on surge.sh it will work (for the latest version).

https://codesandbox.io/s/laughing-breeze-fwm07?file=/src/App.js

I hope that will work for you.

@redallen I think we can close this now.

@Rudi3 feel free to reopen if this problem comes again.

Thanks :smile:

[Rudi3]

@boaz0 thank you for testing - I see, but the new example doesn't work with the newest versions either. The Sandbox you linked is still using 3.x.x. If you set both pf dependencies to 4.x.x on the left, you get the same error: https://codesandbox.io/s/gallant-ganguly-9ts70?file=/src/App.js

And if you simply remove the title, it works again...

Edit: and it's not only happening in the sandbox, it also happens with my test application.

[boaz0]

Maybe I forgot to save it, is this working for you?

If not try and copy paste this code and tell me if it works:

  const Spinner = () => (
    <span className="pf-c-spinner" role="progressbar" aria-valuetext="Loading...">
      <span className="pf-c-spinner__clipper" />
      <span className="pf-c-spinner__lead-ball" />
      <span className="pf-c-spinner__tail-ball" />
    </span>
  )
  return (
    <EmptyState>
      <EmptyStateIcon variant="container" component={Spinner} />
      <Title size="lg" headingLevel="h4">
        Loading
      </Title>
    </EmptyState>
  );

[Rudi3]

@boaz0 that is working now! Thanks a lot! Looks like headingLevel="h4" for the title fixes it.

[redallen]

Yes, headingLevel is now a required prop for title. Thanks for the assist @boaz0 !