React: Safari will yell if using createRef + createElement + console.log(ref.current)

[rockmandash]

Do you want to request a feature or report a bug?

It's a safari strange behavior.

What is the current behavior?

Please see this minimum example using safari.

import { render } from 'react-dom';
import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);
    this.ref = React.createRef();
  }
  componentDidMount() {
    console.log(this.ref.current);
  }
  render() {
    return <div ref={this.ref} />;
  }
}

render(<App />, document.getElementById('root'));

Safari will yell me this

Warning: div: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://fb.me/react-special-props)

react 16.4.1
react-dom 16.4.1
react-scripts 1.1.4

[aweary]

That's strange 🤔 what version of Safari are you using @rockmandash? ~I can't repro on v11.0.3 so it might be a browser bug.~ looks like it was just a weird CodeSandbox issue

[aweary]

Looks like someone found the root issue in https://github.com/emotion-js/emotion/issues/757. If this is something the Safari team can fix (or has already fixed) we probably wont attempt to workaround it.

[gaearon]

Maybe we can fix this by making this getter non-enumerable?

[aweary]

@gaearon behavior is the same for non-enumerable properties

[aweary]

One hacky workaround would be to create an error and check the call stack for the internal methods Safari's console uses (_isPreviewableObjectInternal) 😓

I opened a bug report for this in WebKit's issue tracker.

[rockmandash]

@aweary I'm using Safari version 11.1.1（13605.2.8）

[gaearon]

I don't think there is a good way to fix it on our side unless we give up on putting warning getters at all.
I'd say this is a Safari issue so it's on them to fix.

[burg]

Tracking the fix in WebKit here:

https://bugs.webkit.org/show_bug.cgi?id=187542

[gaearon]

@burg Appreciate the follow-up. Indeed, it's the deep traversal that is the problem — because it would trigger any warnings we define on getters that are reachable for one reason or another.

[JosephPecoraro]

Tracking the fix in WebKit here:
https://bugs.webkit.org/show_bug.cgi?id=187542

This has been addressed and should show up in a Safari Technology Preview soon (it is not in one yet). If you continue to see issues please don't hesitate send me a message or file another WebKit bug with details!

[gaearon]

@JosephPecoraro Thank you so much! ❤️ ❤️ ❤️