React-native: WebSocket `registerEvents` is undefined when running master

[grabbou]

Environment

 React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
      Memory: 2.07 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.7.0 - /usr/local/bin/node
      Yarn: 1.3.2 - /usr/local/bin/yarn
      npm: 5.4.2 - /usr/local/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
    IDEs:
      Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.4.1 => 16.4.1
      react-native: /Users/grabbou/Repositories/react-native/react-native-1000.0.0.tgz => 1000.0.0
    npmGlobalPackages:
      create-react-native-app: 1.0.0
      react-native-cli: 2.0.1
      react-native-create-library: 3.1.2
      react-native-fbads: 4.2.0
      react-native-git-upgrade: 0.2.7

Description

The following error is produced as soon as you run the app:

The following line https://github.com/facebook/react-native/blob/master/Libraries/WebSocket/WebSocket.js#L147 produces an error - for some reason _registerEvents() is not available on this, even though you can see it defined as a class method. Is this something related to Babel transpilation?

Reproducible Demo

Running freshly created app with 0.57-stable (react-native init). Interestingly, RNTester (that runs on the same React Native version) works just fine. I'll keep debugging babel differences in setups to see why it could be occuring. Help appreciated.

[LinusU]

I've seen this as well when experimenting with different versions of Babel but still using version 0.56 of React (by overriding the dependency resolution).

Could be that a simple bump of Babel could fix this, could you try adding the following to your package.json to force a newer babel?

  "resolutions": {
    "**/@babel/code-frame": "7.0.0-beta.56",
    "**/@babel/core": "7.0.0-beta.56",
    "**/@babel/generator": "7.0.0-beta.56",
    "**/@babel/helper-annotate-as-pure": "7.0.0-beta.56",
    "**/@babel/helper-builder-binary-assignment-operator-visitor": "7.0.0-beta.56",
    "**/@babel/helper-builder-react-jsx": "7.0.0-beta.56",
    "**/@babel/helper-call-delegate": "7.0.0-beta.56",
    "**/@babel/helper-define-map": "7.0.0-beta.56",
    "**/@babel/helper-explode-assignable-expression": "7.0.0-beta.56",
    "**/@babel/helper-function-name": "7.0.0-beta.56",
    "**/@babel/helper-get-function-arity": "7.0.0-beta.56",
    "**/@babel/helper-hoist-variables": "7.0.0-beta.56",
    "**/@babel/helper-member-expression-to-functions": "7.0.0-beta.56",
    "**/@babel/helper-module-imports": "7.0.0-beta.56",
    "**/@babel/helper-module-transforms": "7.0.0-beta.56",
    "**/@babel/helper-optimise-call-expression": "7.0.0-beta.56",
    "**/@babel/helper-plugin-utils": "7.0.0-beta.56",
    "**/@babel/helper-regex": "7.0.0-beta.56",
    "**/@babel/helper-remap-async-to-generator": "7.0.0-beta.56",
    "**/@babel/helper-replace-supers": "7.0.0-beta.56",
    "**/@babel/helper-simple-access": "7.0.0-beta.56",
    "**/@babel/helper-split-export-declaration": "7.0.0-beta.56",
    "**/@babel/helper-wrap-function": "7.0.0-beta.56",
    "**/@babel/helpers": "7.0.0-beta.56",
    "**/@babel/highlight": "7.0.0-beta.56",
    "**/@babel/plugin-external-helpers": "7.0.0-beta.56",
    "**/@babel/plugin-proposal-class-properties": "7.0.0-beta.56",
    "**/@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.56",
    "**/@babel/plugin-proposal-optional-chaining": "7.0.0-beta.56",
    "**/@babel/plugin-syntax-class-properties": "7.0.0-beta.56",
    "**/@babel/plugin-syntax-dynamic-import": "7.0.0-beta.56",
    "**/@babel/plugin-syntax-flow": "7.0.0-beta.56",
    "**/@babel/plugin-syntax-jsx": "7.0.0-beta.56",
    "**/@babel/plugin-syntax-nullish-coalescing-operator": "7.0.0-beta.56",
    "**/@babel/plugin-syntax-object-rest-spread": "7.0.0-beta.56",
    "**/@babel/plugin-syntax-optional-chaining": "7.0.0-beta.56",
    "**/@babel/plugin-transform-arrow-functions": "7.0.0-beta.56",
    "**/@babel/plugin-transform-async-to-generator": "7.0.0-beta.56",
    "**/@babel/plugin-transform-block-scoping": "7.0.0-beta.56",
    "**/@babel/plugin-transform-classes": "7.0.0-beta.56",
    "**/@babel/plugin-transform-computed-properties": "7.0.0-beta.56",
    "**/@babel/plugin-transform-destructuring": "7.0.0-beta.56",
    "**/@babel/plugin-transform-exponentiation-operator": "7.0.0-beta.56",
    "**/@babel/plugin-transform-flow-strip-types": "7.0.0-beta.56",
    "**/@babel/plugin-transform-for-of": "7.0.0-beta.56",
    "**/@babel/plugin-transform-function-name": "7.0.0-beta.56",
    "**/@babel/plugin-transform-literals": "7.0.0-beta.56",
    "**/@babel/plugin-transform-modules-commonjs": "7.0.0-beta.56",
    "**/@babel/plugin-transform-object-assign": "7.0.0-beta.56",
    "**/@babel/plugin-transform-parameters": "7.0.0-beta.56",
    "**/@babel/plugin-transform-react-display-name": "7.0.0-beta.56",
    "**/@babel/plugin-transform-react-jsx": "7.0.0-beta.56",
    "**/@babel/plugin-transform-react-jsx-source": "7.0.0-beta.56",
    "**/@babel/plugin-transform-regenerator": "7.0.0-beta.56",
    "**/@babel/plugin-transform-shorthand-properties": "7.0.0-beta.56",
    "**/@babel/plugin-transform-spread": "7.0.0-beta.56",
    "**/@babel/plugin-transform-sticky-regex": "7.0.0-beta.56",
    "**/@babel/plugin-transform-template-literals": "7.0.0-beta.56",
    "**/@babel/plugin-transform-unicode-regex": "7.0.0-beta.56",
    "**/@babel/register": "7.0.0-beta.56",
    "**/@babel/template": "7.0.0-beta.56",
    "**/@babel/traverse": "7.0.0-beta.56",
    "**/@babel/types": "7.0.0-beta.56"
  },

If this solves it, we could just bump Babel in Metro, bump Metro, and then bump Metro here in React Native 😄

[LinusU]

Here is a pull request to Babel, that was also needed for an unrelated bug with exporting interfaces from a TypeScript file: https://github.com/facebook/metro/pull/216

[kelset]

I'm concerned this is potentially related to the react-native init command not creating a "properly" setup project, like maybe the babel version is wrong or is not using the right babel-preset... something like that.

@grabbou can you upload the RN init'd project that the command generated?

BTW the correct version of babel to set the package.json is beta.54 (https://github.com/facebook/metro/commit/1ef4e4e92b77ee6718f09cfa718afef8711fad59)

cc @rafeca @CompuIves

[rafeca]

This can be related to react-native init adding babel-preset-react-native as a dependency.

Instead of that, it should add the metro-react-native-babel-preset package (and it should be locked to the same version as the Metro version used by React Native).

Another thing that I've just realized is that the .babelrc template file should be also updated to point to the metro-react-native-babel-preset package.

[grabbou]

Unfortunately, the error still happens after performing the suggested changes. I am going to put them all into a PR anyway so that master can be up to date.

[grabbou]

CC: @hramos and @axemclion - you might be able to make this issue more visible - it's currently blocking the release. I don't know the React Native RNTester works without issues while react-native init app breaks, but there has to be something different.

[kelset]

Related: https://github.com/facebook/react-native/commit/7e61f433ef3919ac828aff3c22a7bf82acf80a08

which we should, once we fixed, cherrypick back to master.

[hramos]

@grabbou let me know how I can help move this issue forward. I see @rafeca is already involved, did you have anyone else in mind who should take a look?

[kelset]

Just tried again with using latest master, and this is what happens after I git clone and run ./scripts/test-manual-e2e.sh locally (with simulators):

:white_check_mark: RNTester runs on Android
:white_check_mark: RNTester runs on iOS
:question: RNTestProject builds correctly on Android (but goes to white screen - I guess it’s the same issue faced by Mike a while back, so can't really understand what's going on)
:exclamation: RNTestProject builds but then I hit this issue

It's surely related to babel, and the config.
If I cd /private/tmp/RNTestProject and tweak manually the config, then kill packager, run yarn and re-run the packager, it should lead me somewhere.

I've tried changing the babel-preset dept from "babel-preset-react-native": "^5", to "metro-react-native-babel-preset": "0.43.5",, then yarn and npm start --reset-cache but it's still failing with the same error for this .babelrc configuration:

{
  "presets": ["module:metro-react-native-babel-preset"]
}

that was suggested here.

Even if I completely remove the .babelrc file and entry in the package.json, which I seem to recall @rafeca saying that is a viable solution that will "force" metro to use its internal dep, I still get the issue.

Just to make sure that it is in fact a babel related issue I double checked where the error was coming from (here) and if I "bruteforcefully" comment out that section, the error actually changes to TypeError: instance.render is not a function.

I have spent a couple hrs now on it and I'm quite confident that it's either:

• babel being missconfigured, and the metro-react-native-babel-preset not getting picked up during bundling
• metro-react-native-babel-preset being missconfigured, maybe missing some transformer or something.
• it's something related to the scope of each package and how babel uses .babelrc VS babel.config.js - this would explain why RNTester runs just fine.

Either case, I think @hramos that the metro team should take a closer look at it, it is also probably related to the many breaking changes Babel7 has undergone from beta.47 to beta.56 (which is the one RN is currently using).

Or maybe I'm missing something simpler and @hzoo has a 1-line solution to all our issues 😇

[rafeca]

Thanks for the detailed investigation @kelset!

Thanks to this I've been able to debug the issue and found that the root cause is the Babel preset that's on the template's .babelrc file.

I think that @kelset was not able to find it because npm run start --reset-cache does not seem to work properly and still uses the cached transformed files (that's a separate issue).

So there are two potential solutions here:

1. Remove completely the .babelrc file from the template (so Metro will pick its own one).
2. Modify the .babelrc file from the template to have the module:metro-react-native-babel-preset preset.

[LinusU]

Here is a PR for switching the preset 👉 #20653

[kelset]

I've updated the 0.57 branch to be in sync with master and tested the changes, and I don't know why but I still, following the list of steps I listed above, get the RNTestProject initialized with the old babel-preset. I feel it's a local caching issue, so it would be great if someone could test if now master or the branch creates the new project correctly.

I'll keep this open until we are sure it's fixed.

BTW, if not I apply manually the changes to package.json and .babelrc it works fine! So yeah we are getting close 💪

[LinusU]

Hmm, running npm pack locally, and then generating a new project locally using the following commands produces the correct .babelrc for me.

react-native init Foobar --version /Users/linus/coding/react-native/react-native-1000.0.0.tgz

This should be how the RNTestProject is generated 🤔

[kelset]

Yes I can confirm now that it was a caching issue on the machine, I've just tested with another laptop and the project gets generated correctly 🎉

I'll close this and try to have the first RC0 release for 0.57 out asap.

[bhatti-waqas]

I am also getting this error. I upgraded RN from 0.54 to 0.56 after fixing alot of babel issues now getting this one.

please let me know what is proper solution

[NeliHarbuzava]

@kelset how do you resolve caching issue? Please, tell

[GramosBegolli]

@NelGarbuzova I just restarted the machine, It looks like the error is different now I get an error on StackNavigator (undefined is not a function) with which I assume it has reseted the cache.

[zjkhiyori]

@NelGarbuzova I just restarted the machine, It looks like the error is different now I get an error on StackNavigator (undefined is not a function) with which I assume it has reseted the cache.

Restart the machine
It works for me

[hamid]

@NelGarbuzova I just restarted the machine, It looks like the error is different now I get an error on StackNavigator (undefined is not a function) with which I assume it has reseted the cache.

It works for me...
Restart the machine ! ... (why ?! :|) any way thank you ...