Internet Explorer 11 - A valid react element must be returned

[scrambled2k3]

I am getting this error when loading the Joyride component using IE11. Everything works fine in Chrome, Safari and Edge though.

SCRIPT5022: Joyride.render(): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

Joyride: 1.10.1
React: 15.5.4

[jjordy]

@scrambled2k3 did you find a solution to this?? I just ran into the same issue.

[scrambled2k3]

unfortunately no

[jjordy]

@scrambled2k3 Ill let you know what I find.

[lukaszlipinski]

+1 works fine everywhere beside IE11

[ghost]

+1

[AndrewStobie]

Did anyone ever find a solution to this? I'm still having this same problem.

[AndrewStobie]

I had some success updating my babel-core and probably more specifically to react 15.5 and it seemed to work that way. If I figure out the exact fix I'll let you know.

[gilbarbara]

In production builds too or just in development?
The demo works for me in IE11. It does not work for you?

Can you please provide a demo?
Feel free to re-open when you do.

[mchlltt]

👋 In case anyone happens on this issue, I wanted to post the fix that I found. This issue in the React repo addresses the issue more generally: facebook/react#8379. The short version, as best I can explain it: React and ReactDOM were loading before babel-polyfill, which led to React's and/or ReactDOM's function for testing the validity of an element not being transpiled properly. Moving babel-polyfill to the first item in my webpack configuration ensured that React and ReactDOM were transpiled properly. The Joyride component is now correctly identified as a valid React element, and the tour is now behaving as expected in IE11, as well as Chrome, Firefox, and Safari.

(FYI, the issue was present in both dev and prod builds, and I am using React 15.6.2, Joyride 1.10.1, Webpack 3.5.6, babel-core & babel-polyfill 6.26.0)

[rafallyczkowski]

@mchlltt THANK YOU! You saved my production!