WebView JS Error: undefined is not an object (evaluating '_this.props')

[johnryan]

Issue Description

I'm using QR code library that internally renders in a WebView (https://github.com/cssivision/react-native-qrcode/issues). When the webview renders it throws the error but does actually render the WebView behind the red box:

This issue began in 0.32.0 it seems with this change:

_onLoadingStart: function(event: Event) { ...

To:

_onLoadingError = (event: Event) => { ...

Steps to Reproduce / Code Snippets

Just rendering the QR Code view with this snippet (that is being presented with Navigator)

          <View>
                <WebView
                    automaticallyAdjustContentInsets={false}
                    contentInset={{top: 0, right: 0, bottom: 0, left: 0}}
                    source={{html: "TEST HTML"}}
                    opaque={false}
                    underlayColor={'transparent'}
                    javaScriptEnabled={true}
                    scrollEnabled={false}
                />
            </View>

Expected Results

There should be no error displayed

Additional Information

• React Native version: 0.34.0-rc0 (but also every version back to 0.32.0)
• Platform(s) (iOS, Android, or both?): Both
• Operating System (macOS, Linux, or Windows?): macOS

Other notes: This seems to be happening in several other places

• Navigator.NavigationBar - cannot set property '_key' of undefined #9610
• I'm also seeing this error in ViewPagerAndroid.android.js:86 _childrenWithOverridenStyle

[leeight]

It works fine on the master

[johnryan]

I'll try to make a sample project that specifically reproduces the issue. Thanks for taking a look.

[johnryan]

After a lot of digging there was a .babelrc and .eslintrc file that were in the directory (from some template project when i started). It seems that it was disabling es6 features in non-jsx files. After removing that the issue was resolved.

[proProbe]

Hello! Im receiving the same error and Im wondering if you could elaborate a bit more about the fix. Our .babelrc is currently

{
  "passPerPreset": true,
  "presets": [
    "./scripts/babelRelayPlugin",
    "react-native",
    "stage-3"
],
  "plugins" : [
      "babel-remove-process-env-assignment",
      "transform-inline-environment-variables"
  ]
}

is it perhaps the stage-3 that is too strict?

[johnryan]

@proProbe do you have a .eslintrc file? My hunch was that it was:

 "ecmaFeatures": {
    "jsx": true
  },

that was not allowing the es6 functions in the react-native .js files (NOTE: this could be entirely wrong). I just deleted both the eslintrc and the .babelrc and it worked after that.

[proProbe]

@johnryan unfortunately we dont have an .eslintrc. Deleting the .babelrc doesnt seem to work either.

[johnryan]

@proProbe do you have any sample code that reproduces the issue?

[proProbe]

@johnryan

import React, { Component } from "react";
import {
    View,
    Text,
    WebView,
} from "react-native";



class ExternalUrlViewer extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <View>
                <Text>
                    Should show webviewer
                </Text>
                <WebView
                    source={{uri: 'https://github.com/facebook/react-native'}}
                    style={{marginTop: 20}}
                />
            </View>
        )
    }
}
export default ExternalUrlViewer;

does not seem to work for me
sitting on:
"react-native": "^0.33.0",
linux, android

[proProbe]

here is a screenshot of the errormsgs

[johnryan]

@proProbe when i run it with:

  "react": "15.3.2",
   "react-native": "0.33.0"

in a fresh project (i.e. react-native init issue9966) and:

class issue9966 extends Component {
  constructor(props) {
       super(props);
   }

   render() {
       return (
           <View style={{"flex": 1}}>
               <Text>
                   Should show webviewer
               </Text>
               <WebView
                   source={{uri: 'https://github.com/facebook/react-native'}}
                   style={{"flex": 1,marginTop: 20}}
               />
           </View>
       )
   }
}

It renders as expected. I'd suggest trying to figure out what's different between your project and the fresh one created by react-native-init

[kamek-pf]

Any progress here ? I'm seeing the same thing. Happens on both iOS and Android. I don't think eslint has anything to do with it though. Also, new projects created with react-native init have no .babelrc. I can't remove mine because of Relay, but maybe we're missing some parameters.

[kamek-pf]

Found the issue.
See #9151, @orlando's post.

{
  "passPerPreset": true,
  "presets": [
    "react-native"
  ],
  "plugins": [
    "transform-class-properties"
  ]
}

You need to explicitely specify transform-class-properties even though it's already included in the react-native preset. Looks like a Babel bug, we should probably do something about it.

[chirag04]

@kamek-pf you should remove "passPerPreset" if you set it only for babel-relay-plugin. Class properties should just work with "react-native" preset.

[kamek-pf]

@chirag04 good to know, thanks !