react-native: WebSocket `registerEvents` is undefined when running master
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.
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 19 (9 by maintainers)
Commits related to this issue
- Fix passing the --reset-cache CLI argument to Metro 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: http... — committed to facebook/react-native by rafeca 6 years ago
- Fix passing the --reset-cache CLI argument to Metro 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: http... — committed to facebook/react-native by rafeca 6 years ago
- Switch babel preset to metro-react-native-babel-preset (#20653) Summary: Fixes #20567 Pull Request resolved: https://github.com/facebook/react-native/pull/20653 Differential Revision: D9296819 Pull... — committed to facebook/react-native by LinusU 6 years ago
- Fix passing the --reset-cache CLI argument to Metro 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: http... — committed to react-native-community/cli by rafeca 6 years ago
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.
@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.
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
.babelrcfile.I think that @kelset was not able to find it because
npm run start --reset-cachedoes not seem to work properly and still uses the cached transformed files (that’s a separate issue).So there are two potential solutions here:
.babelrcfile from the template (so Metro will pick its own one)..babelrcfile from the template to have themodule:metro-react-native-babel-presetpreset.Here is a PR for switching the preset 👉 #20653
Just tried again with using latest
master, and this is what happens after Igit cloneand run./scripts/test-manual-e2e.shlocally (with simulators):✅
RNTesterruns on Android ✅RNTesterruns on iOS ❓RNTestProjectbuilds 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) ❗RNTestProjectbuilds but then I hit this issueIt’s surely related to babel, and the config. If I
cd /private/tmp/RNTestProjectand 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",, thenyarnandnpm start --reset-cachebut it’s still failing with the same error for this.babelrcconfiguration:that was suggested here.
Even if I completely remove the
.babelrcfile and entry in thepackage.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:
metro-react-native-babel-presetnot getting picked up during bundlingmetro-react-native-babel-presetbeing missconfigured, maybe missing some transformer or something..babelrcVSbabel.config.js- this would explain whyRNTesterruns 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.47tobeta.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 😇
This can be related to
react-native initaddingbabel-preset-react-nativeas a dependency.Instead of that, it should add the
metro-react-native-babel-presetpackage (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
.babelrctemplate file should be also updated to point to themetro-react-native-babel-presetpackage.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
RNTesterworks without issues whilereact-native initapp breaks, but there has to be something different.I’m concerned this is potentially related to the
react-native initcommand 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.jsonisbeta.54(https://github.com/facebook/metro/commit/1ef4e4e92b77ee6718f09cfa718afef8711fad59)cc @rafeca @CompuIves
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?
If this solves it, we could just bump Babel in Metro, bump Metro, and then bump Metro here in React Native 😄