Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Upgrade to react-native 0.16 error

Tags:

react-native

I upgraded my app from react-native 0.15 to 0.16 but after that I'm getting an error and I don't know how to solve it.

enter image description here

TypeError:undefined is not an object (evaluating 'GLOBAL.Text={
get defaultProps(){
throw getInvalidGlobalUseError('Text')}}')

In Chrome Debugger:

Uncaught Error: Uncaught TypeError: Cannot set property 'Text' of undefined

Thanks

OBS: I'm running on Android.

I notice that changing app name solves the problem, I'm using Evently as app name today. I tried to recreate my virtual machine but didn't solve it.

like image 766
Daniel Masarin Avatar asked Dec 05 '15 23:12

Daniel Masarin


1 Answers

In my case, I was able to narrow the cause down to one item in my .babelrc file:

{
    "presets": ["es2015"]
}

As soon as I removed that and restarted the packager (making sure to also use the --reset-cache flag), I stopped getting the error.


Update 2: It looks like React Native is making some changes to their .babelrc in version 0.20.0. So, if you are using that version or newer, you should follow the instructions at: https://github.com/facebook/react-native/tree/master/babel-preset in order to specify your .babelrc settings.

Update: I've narrowed this down further to transform-es2015-modules-commonjs, which React-Native sets some options on, specifically {"strict": false, "allowTopLevelThis": true}. The es2015 preset does not set this option, and it seems that the React-Native .babelrc does not override it. If you want to use es6 modules and transform them to commonjs, you'll need to put the following in your .babelrc:

{
    "plugins": [
        ["transform-es2015-modules-commonjs", {"strict": false, "allowTopLevelThis": true}]
    ]
}

Note, Babel 6, which I updated to along with react-native 0.16.0, no longer contains any transforms by default. What I didn't initially realize is that the React-Native packager provides most of the transforms you might ever need (listed in their docs at: https://facebook.github.io/react-native/docs/javascript-environment.html#javascript-syntax-transformers), and I'm thinking that the "es2015" plugin interferes with some of those transformers.

I also tried using "babel-preset-react" (http://babeljs.io/docs/plugins/preset-react/), and that plugin did not seem to cause any errors.

like image 167
IanVS Avatar answered Oct 20 '22 15:10

IanVS