expo / browser-polyfill Goto Github PK
View Code? Open in Web Editor NEWBrowser polyfill for making React Native compatible with web libs like pixi.js, three.js, phaser.js
License: MIT License
Browser polyfill for making React Native compatible with web libs like pixi.js, three.js, phaser.js
License: MIT License
The change made here causes PIXI to determine that a GL view cannot be used in their util.isWebGLSupported function which breaks expo-pixi. The second argument in the function was ignored initially but is now assumed to be a context which in PIXI's case it is not. This issue makes expo-pixi unusable with this package past alpha.3. I have locked the resolution of this package at alpha.3 which seems to have fixed my issue but this is not a solution I would like to keep.
I would submit a PR to fix it myself but I don't feel like I have the experience with this package and the packages it supports to make sure a solution I come up with wouldn't break another project.
This happened some time ago:
expo/expo-three#53
#2
and comes back again! @EvanBacon
Basically, one need to:
@expo/browser-polyfill
somewhere deep in the jungle of packagesonSnapshot
, then unsubscribe (gracefully)This way is a 100% repro, but I have seen other random cases when that happened during Firebase sign in session.
Libraries
"@expo/browser-polyfill": "^0.1.0",
"expo": "~37.0.3",
"firebase": "7.9.0",
import '@expo/browser-polyfill';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
const validFirebaseConfig = {
/* ... */
};
export async function doFirebaseTest() {
// Initialize Firebase App
const instance = firebase.initializeApp(validFirebaseConfig);
// Do a simple log in
console.log('logging in...');
if (!instance.auth().currentUser) {
await instance.auth().signInWithEmailAndPassword('[email protected]', '123456');
}
const uid = instance.auth().currentUser?.uid;
// IMPORTANT: Add onSnapshot observer on any Firestore entity
// only with this it will break
console.log('subscribing to the user in Firestore...');
const unsub1 = instance.firestore().doc(`users/${uid}`).onSnapshot(snapshot => {
console.log('Got the User!!!', snapshot.data());
});
// just wait a bit to avoid race conditions
console.log('waiting for 2 seconds...');
setTimeout(async () => {
unsub1();
console.log('logging out...');
// HERE you will see crash on Android or error RedBox for iOS simulator / Android emulator
await instance.auth().signOut();
console.log('completed!!!');
}, 2000)
}
Device – nothing bad happens that a user can see
Simulator:
No suitable URL request handler found for (null)
-[ABI37_0_0RCTNetworking networkTaskWithRequest:completionBlock:]
ABI37_0_0RCTNetworking.mm:654
-[ABI37_0_0RCTImageLoader _loadURLRequest:progressBlock:completionBlock:]
__127-[ABI37_0_0RCTImageLoader _loadImageOrDataWithURLRequest:size:scale:resizeMode:progressBlock:partialLoadBlock:completionBlock:]_block_invoke.183
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_lane_serial_drain
_dispatch_lane_invoke
_dispatch_workloop_worker_thread
_pthread_wqthread
start_wqthread
Device – crash/reload
Virtual Device – app hangs with the error:
abi37_0_0.com.facebook.react.bridge.ReadableNativeMap cannot be cast to java.lang.String
I am currently working on a new cryptocurrency / chat mobile app using matrix sdk (https://github.com/matrix-org/matrix-js-sdk), and this fails for me on android, I receive the com.facebook.react.bridge.ReadableNativeMap cannot be cast to java.lang.String
error.
Right now I have a file called polyfill.js
and I import it only for android within App.js - contents of this file were taken from Node.js
file in this library, credit goes to @EvanBacon
import { EventEmitter } from 'fbemitter';
class Document {
constructor() {
this.emitter = new EventEmitter();
this.addEventListener = this.addEventListener.bind(this);
this.removeEventListener = this.removeEventListener.bind(this);
this._checkEmitter = this._checkEmitter.bind(this);
}
createElement(tagName) {
return {};
}
_checkEmitter() {
if (
!this.emitter ||
!(this.emitter.on || this.emitter.addEventListener || this.emitter.addListener)
) {
this.emitter = new EventEmitter();
}
}
addEventListener(eventName, listener) {
this._checkEmitter();
if (this.emitter.on) {
this.emitter.on(eventName, listener);
} else if (this.emitter.addEventListener) {
this.emitter.addEventListener(eventName, listener);
} else if (this.emitter.addListener) {
this.emitter.addListener(eventName, listener);
}
}
removeEventListener(eventName, listener) {
this._checkEmitter();
if (this.emitter.off) {
this.emitter.off(eventName, listener);
} else if (this.emitter.removeEventListener) {
this.emitter.removeEventListener(eventName, listener);
} else if (this.emitter.removeListener) {
this.emitter.removeListener(eventName, listener);
}
}
}
window.document = window.document || new Document();
Hi,
I got those 2 warnings when installing this package (through [email protected]):
warning expo-three > @expo/browser-polyfill > [email protected]: no longer maintained
warning expo-three > @expo/browser-polyfill > fbemitter > fbjs > [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
Is it possible to update the dependencies?
Repro:
npx create-expo-app MyApp
cd MyApp
npm i expo-three expo-gl three@"^0.145.0"
With Expo SDK46 being released, can we get a new version of browser-polyfill with the following package.json updates:
For my current project, this affects expo-three as a transitive dependency.
Thank you!
Hello! I'm having some issues adding this polyfill to my app. We have an ejected Expo app that is using unimodules.
Steps to Reproduce:
npm install @expo/browser-polyfill --save
In my file:
import '@expo/browser-polyfill';
error: bundling failed: Error: Unable to resolve module expo
from /Users/jwilliamson/Developer/QBMobile/node_modules/@expo/browser-polyfill/src/DOM/HTMLImageElement.js
: Module expo
does not exist in the Haste module map
This might be related to facebook/react-native#4968
To resolve try the following:
watchman watch-del-all
.node_modules
folder: rm -rf node_modules && npm install
.rm -rf /tmp/metro-bundler-cache-*
or npm start -- --reset-cache
.rm -rf /tmp/haste-map-react-native-packager-*
.
I meet the error:
`find ../ -name .babelrc -delete
FIND: Parameter format not correct
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @expo/[email protected] postinstall: find ../ -name .babelrc -delete
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @expo/[email protected] postinstall script.`
I install it on mac successfully.
Seems command 'find ../ -name .babelrc -delete' is broken.
It looks like the import import uuidv1 from 'uuid/v1';
in browser-polyfill/src/DOM/HTMLImageElement.js
at ln6 isn't valid or a dependency was left out of your package.json
.
I've been looking through the different uuid modules available on npm and none of them seem to fill this dependency. Could you provide a link to the correct module or update your package.json
?
Importing this package causes the Firebase JS library to not work. Currently diagnosing further.
When importing this package I get this error:
NotSupportedError: Cannot set "location".
I originally thought it was an issue with expo-three but narrowed it down to this package instead.
Expo managed project, SDK "~48.0.18", building for iOS.
for some reason
throw new DOMException("Cannot set "location".", "NotSupportedError");
in @expo/metro-runtime/build/location/Location.native.js
is being triggered just by importing this package?
It looks like the performance.js
polyfill has its functions called often, and adb can't handle all the console.warn()
statements.
Conditions:
JS Dev Mode
checkedinspect the adb logs via: adb logcat *:S ReactNative:V ReactNativeJS:V
A console.warn()
is issued for each call to window.mark
, .measure
, .clearMarks
, and .clearMeasures
once every 2ms.
Although disabling YellowBox messages does hide them, adb still gets choked up and the app soon crashes.
Full disclosure: I'm running from WSL2 with adb executing on the W side and rn-cli on the L side. (please don't judge)
Could you do something other than a console
?
thanks
C:\Users\user\Documents\PONS FILES\WORK\JONATHAN\UOB-SUMMIT\node_modules\@expo\browser-polyfill: Command failed.
Exit code: 2
Command: find ../ -name .babelrc -delete
Arguments:
Directory: C:\Users\user\Documents\PONS FILES\WORK\JONATHAN\UOB-SUMMIT\node_modules\@expo\browser-polyfill
im installing expo-pixi but imgetting thiis error
Environment
Similarly to nodeJS nodejs/node#26904 the JS module ecosystem is now starting to use the more performant encodeInto
which is not available in browser-polyfill
.
It would be great if this was supported until hermes
implements a native version facebook/hermes#1072 (comment)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.