Emotion: Safari will yell if using innerRef.

[rockmandash]

Please see this minimum example with safari.

Opening safari's devtool and there is one error message says

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)

I don't know how to fix this, please help, thank you!

[Andarist]

Does it happen in real app? This might be some issue with codesandbox - if you comment out console.log in componentDidMount and uncomment it again the warning will disappear (without changing the code).

[rockmandash]

@Andarist
It happens in my development, howerver, it only happens in development mode.
When I run build, the warning goes away.

[mitchellhamilton]

I did some debugging on this and it seems that safari accesses getters on nested objects passed to console.log.

Some code demonstrating this

// run this in the safari console
let inner = {
  get someProperty() {
    console.log('this will log even though this property is not accessed by the user')
  }
}

let outer = {
  inner
}

console.log(outer)

The reason this happens is that when you pass props to React.createElement it creates a props object and if you pass a ref to createElement in dev, it sets a getter on the props with that warning so that you see it if you try to access ref as a prop. React sets the props object onto the dom node for internal react stuff so if you log the dom node in safari, safari will access all the getters and therefore log the warning.

You might want to open an issue with react about this though it's more of an issue with safari but the react team might want to try and find a way around it.
I made a reproduction with only react here.

This isn't an issue with emotion so I'm going to close it.

[rockmandash]

@mitchellhamilton Wow, thank you for your fast reply.
Now I know the problem, thank you!

[rockmandash]

I've ref the issue
https://github.com/facebook/react/issues/13179

[burg]

Upstream fix in Webkit tracked here:

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