WebSocket `registerEvents` is undefined when running master #20567

grabbou · 2018-08-07T16:06:25Z

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.

The text was updated successfully, but these errors were encountered:

LinusU · 2018-08-08T10:01:16Z

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 · 2018-08-08T11:01:22Z

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

kelset · 2018-08-08T13:45:51Z

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 (facebook/metro@1ef4e4e)

cc @rafeca @CompuIves

rafeca · 2018-08-08T14:26:21Z

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 · 2018-08-08T16:05:14Z

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 · 2018-08-08T18:28:21Z

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 · 2018-08-09T13:41:03Z

Related: 7e61f43

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

hramos · 2018-08-09T21:24:17Z

@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 · 2018-08-12T11:53:39Z

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):

✅ RNTester runs on Android
✅ RNTester runs on iOS
❓ 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)
❗ 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 · 2018-08-13T13:15:56Z

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:

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

LinusU · 2018-08-13T14:26:30Z

Here is a PR for switching the preset 👉 #20653

@public

Summary: @public While debugging a RN 0.57 blocking issue, we found that the `--reset-cache` cli arg is not being passed to Metro (more info: #20567 (comment)). This diff fixes this issue Reviewed By: mjesun Differential Revision: D9295634 fbshipit-source-id: a53ec7abff2b7e684a1fd88c3b53ff0b54a1c3c4

@public

Summary: @public While debugging a RN 0.57 blocking issue, we found that the `--reset-cache` cli arg is not being passed to Metro (more info: #20567 (comment)). This diff fixes this issue Reviewed By: mjesun Differential Revision: D9295634 fbshipit-source-id: a53ec7abff2b7e684a1fd88c3b53ff0b54a1c3c4

Summary: Fixes #20567 Pull Request resolved: #20653 Differential Revision: D9296819 Pulled By: hramos fbshipit-source-id: 88953afb9778e3c8cde5576b068888fd882c2220

kelset · 2018-08-13T21:26:16Z

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 · 2018-08-14T08:39:05Z

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 · 2018-08-14T09:00:32Z

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.

@public

Summary: @public While debugging a RN 0.57 blocking issue, we found that the `--reset-cache` cli arg is not being passed to Metro (more info: facebook/react-native#20567 (comment)). This diff fixes this issue Reviewed By: mjesun Differential Revision: D9295634 fbshipit-source-id: a53ec7abff2b7e684a1fd88c3b53ff0b54a1c3c4

ghost · 2018-11-27T08:35:55Z

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

GramosBegolli · 2018-12-05T15:55:15Z

@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 · 2019-02-01T11:16:10Z

@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 · 2019-03-08T22:50:56Z

@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 ...

react-native-bot added the Core Team label Aug 8, 2018

kelset mentioned this issue Aug 8, 2018

0.57.0 Discussion react-native-community/releases#34

Closed

kelset added the Tech: Bundler 📦 This issue is related to the bundler (Metro, Haul, etc) used. label Aug 8, 2018

borisyankov mentioned this issue Aug 12, 2018

Chinese and Japanese input don't work on iOS (blocked on RN v0.57) zulip/zulip-mobile#2434

Closed

LinusU mentioned this issue Aug 13, 2018

Switch babel preset to metro-react-native-babel-preset #20653

Closed

facebook-github-bot closed this as completed in 35bd17f Aug 13, 2018

kelset reopened this Aug 13, 2018

kelset closed this as completed Aug 14, 2018

This comment has been minimized.

Sign in to view

hbicexp mentioned this issue Sep 18, 2018

[0.57] _this._registerEvents is not a function on a clean project #21094

Closed

3 tasks

facebook locked as resolved and limited conversation to collaborators Aug 14, 2019

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Aug 14, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WebSocket `registerEvents` is undefined when running master #20567

WebSocket `registerEvents` is undefined when running master #20567

grabbou commented Aug 7, 2018 •

edited

Loading

LinusU commented Aug 8, 2018

LinusU commented Aug 8, 2018

kelset commented Aug 8, 2018

rafeca commented Aug 8, 2018

grabbou commented Aug 8, 2018

grabbou commented Aug 8, 2018

kelset commented Aug 9, 2018 •

edited

Loading

hramos commented Aug 9, 2018

kelset commented Aug 12, 2018 •

edited

Loading

rafeca commented Aug 13, 2018

LinusU commented Aug 13, 2018

kelset commented Aug 13, 2018 •

edited

Loading

LinusU commented Aug 14, 2018

kelset commented Aug 14, 2018

This comment has been minimized.

ghost commented Nov 27, 2018

GramosBegolli commented Dec 5, 2018

zjkhiyori commented Feb 1, 2019

hamid commented Mar 8, 2019

WebSocket registerEvents is undefined when running master #20567

WebSocket registerEvents is undefined when running master #20567

Comments

grabbou commented Aug 7, 2018 • edited Loading

Environment

Description

Reproducible Demo

LinusU commented Aug 8, 2018

LinusU commented Aug 8, 2018

kelset commented Aug 8, 2018

rafeca commented Aug 8, 2018

grabbou commented Aug 8, 2018

grabbou commented Aug 8, 2018

kelset commented Aug 9, 2018 • edited Loading

hramos commented Aug 9, 2018

kelset commented Aug 12, 2018 • edited Loading

rafeca commented Aug 13, 2018

LinusU commented Aug 13, 2018

kelset commented Aug 13, 2018 • edited Loading

LinusU commented Aug 14, 2018

kelset commented Aug 14, 2018

This comment has been minimized.

ghost commented Nov 27, 2018

GramosBegolli commented Dec 5, 2018

zjkhiyori commented Feb 1, 2019

hamid commented Mar 8, 2019

WebSocket `registerEvents` is undefined when running master #20567

WebSocket `registerEvents` is undefined when running master #20567

grabbou commented Aug 7, 2018 •

edited

Loading

kelset commented Aug 9, 2018 •

edited

Loading

kelset commented Aug 12, 2018 •

edited

Loading

kelset commented Aug 13, 2018 •

edited

Loading