React error #149 whenever using Animated (webpack production build only)

[udfalkso]

I'm upgrading to the latest react-native-web (0.1.9) and react 16 and I'm seeing this error in production (not in development):

Error: Minified React error #149;

Element ref was specified as a string (node) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

I've managed to reduce my app to a simple case that reproduces the issue. Using Animated.View causes this error. Using View doesn't.

BREAKS

import React from "react"
import { View, Animated } from "react-native"

export default class App extends React.Component {
  render() {
    return (
      <Animated.View style={{backgroundColor: 'red', width: 100, height: 100}} />
    )
  }
}

WORKS

import React from "react"
import { View, Animated } from "react-native"

export default class App extends React.Component {
  render() {
    return (
      <View style={{backgroundColor: 'red', width: 100, height: 100}} />
    )
  }
}

I've attached my package.json and webpack configs in a zip file.

Any ideas greatly appreciated! Thanks

configuration.zip

[necolas]

Hi. Please could you put your config in a gist so I don't have to download and extract a zip (security)?

[udfalkso]

package.json:
https://gist.github.com/udfalkso/a5157d096321a13c4b45d6186b1de768
shared.webpack.config.js:
https://gist.github.com/udfalkso/c7daaf3861bf861caf4ae28bf57593e3
vendor.webpack.config.js:
https://gist.github.com/udfalkso/3c0e9930f9333a8774515367c6c5f7d5
webpack.config.js:
https://gist.github.com/udfalkso/814580a01d25b90907271f2ae8846235

Thanks @necolas !

[necolas]

Closing as if there is an issue it should be resolved after #716 is complete

[necolas]

This seems to be caused by the use of a string ref in the upstream package's implementation of createAnimatedComponent. Changing it to a callback ref resolved the issue for me.