I encounter the error 'Cannot access __fbBatchedBridgeConfig on web' when trying to run expo web
The instructions I got according to https://github.com/expo/fyi/blob/main/fb-batched-bridge-config-web.md was to do the following
Remove internal imports
You can remove the import altogether, or you can move an internal import inside of a platform specific block:
import getDevServer from "react-native/Libraries/Core/Devtools/getDevServer";
or
let getDevServer = () => { /* no-op */ }
if (Platform.OS !== 'web') {
getDevServer = require("react-native/Libraries/Core/Devtools/getDevServer");
+ }
However, I'm not sure where to insert this code. I've tried inserting it on my home page, on app.js, and I still encounter this error.
Could anyone help me out on this?
(I'm using EXPO 4.13.0, SDK 43 and react-native 0.64.3)
This error shows when you try to use a nested library from react-native.
Search specifically for react-native/ with your IDE in your project to find where you are importing such nested library.
There you can replace the offending import like:
import example from "react-native/example";
to:
let example = () => { /* no-op */ }
if (Platform.OS !== 'web') {
example= require("react-native/example");
}
You also need to import Platform like:
import { Platform } from 'react-native';
But note other errors might arise if you DO need to use that library, so also edit where you are using it.
Related
I'm trying to load the default stories that come when you first install Storybook. Had some issues getting the server to start but I managed to fix it by adding port and host in the config. But even after getting it to run, clicking on any of the components doesn't update.
I'm expecting to see a Button.
And ideas? Here's the storybook index.js. I'm using Expo.
// if you use expo remove this line
// import { AppRegistry } from "react-native";
import {
getStorybookUI,
configure,
addDecorator,
} from "#storybook/react-native";
// import { withKnobs } from '#storybook/addon-knobs';
import "./rn-addons";
// enables knobs for all stories
// addDecorator(withKnobs);
// import stories
configure(() => {
require("./stories");
}, module);
const StorybookUIRoot = getStorybookUI({
host: "192.168.100.6", // replace this ip address with your local ip address
port: "7007",
asyncStorage: null,
});
// If you are using React Native vanilla and after installation you don't see your app name here, write it manually.
// If you use Expo you should remove this line.
// AppRegistry.registerComponent("%APP_NAME%", () => StorybookUIRoot);
export default StorybookUIRoot;
Also not sure if this is related but I've had to comment out addon-knobs in addons.js because it can't find it even though I have addon-knobs in my package.json:
import '#storybook/addon-actions/manager';
import '#storybook/addon-links/manager';
// import '#storybook/addon-knobs/manager';
I've tried replacing it with
register
like I've read on here but it still didn't work.
import '#storybook/addon-knobs/register';
I'm implementing In-App-Purchases in Expo, using RevenueCat.
Everything works fine in a build environment but in ExpoGo I get an exception if I import this library:
import Purchases, { PurchasesOffering } from 'react-native-purchases';
In my code I can detect when running in ExpoGo, so I would like to import this library only and if only running in NOT ExpoGo environment.
I tried this but is not working.
import { IsExpoGo, RevenueCatAPIKeys } from "./lib/constants";
if(!IsExpoGo){
import Purchases, { PurchasesOffering } from 'react-native-purchases';
}
Any clue?
can try something like this
const MODULE_NAME = !IsExpoGo ? require("react-native-purchases") : require("./lib/constants);
also take some help below link
https://reactnative.dev/docs/platform-specific-code#native-specific-extensions-ie-sharing-code-with-nodejs-and-web
I want to create a UI library and publish it to NPM. I don't like however the idea of bundling the code into single file and adding bundler code around my code, which is what all bundlers do by default (well, bundler must bundle I guess).
I'm using TypeScript and I build my non-ui packages with tsc. I want to keep that and let bundler or other tool just run through the result and change few things.
For example let's take this file:
import React from "react";
import styles from "./b.module.scss";
const B = () => {
return (
<div className={styles.index}>index</div>
);
};
export { B };
It's getting compiled into this ESM code:
import React from "react";
import styles from "./b.module.scss";
const B = () => {
return (React.createElement("div", { className: styles.index }, "index"));
};
export { B };
//# sourceMappingURL=b.js.map
Not much changes, but this is what I want at this step.
Now I want the tool to:
see the module.scss import
build b.css file, replacing class names with mangled ones
replace import styles from "./b.module.scss"; with import "./b.css";
replace { className: styles.index } with something like: { className: "b_index_f9cb22" } (that reflect new class name in b.css)
and that's basically all
I guess those are the steps normally taken by webpack plugins, but webpack does more than that, like I said - adding its own code, bundling things together, minimizing the code, etc. Some of these things I seem to be able to skip, but still the output is far from my original one.
Is there a tool that allows me to do what I want?
I am using the package react-native-coreml and running into this error at startup.
My intention is to use this package to use a CoreML package in my react native app. I am running this within EXPO if that makes any difference.
I can't even run the app. These two errors are together.
Unable to start your application. Please refer to https://expo.fyi/no-registered-application for more information.
and
TypeError: null is not an object (evaluating 'RNCoreML.mainBundlePath')
- node_modules/react-native/Libraries/LogBox/LogBox.js:148:8 in registerError
Obviously the first error isn't useful, just including for thoroughness.
My implementation is as follows:
import React, { useState } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import FaceScanner from './FaceScanner';
import { classifyImage } from "react-native-coreml";
const Onboarding = () => {
const [imageURL, setImageURL] = useState('');
const [tested, setTested] = useState(false);
console.log(imageURL)
if (imageURL !== '' && !tested) {
async () => {
// const { label, confidence } = await classifyImage(imageURL, './model.mlmodelc')
setTested(true);
console.log("The image is a " + label + ". I think. ")
}
}
...
edit I have ejected from expo as per a comment's suggestion. I am now encountering these errors.
BUNDLE ./index.js
ERROR TypeError: null is not an object (evaluating 'RNCoreML.mainBundlePath')
LOG Running "main" with {"rootTag":1,"initialProps":{}}
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called.
react-native-coreml is a library with native extensions that do not work in the expo managed workflow currently. you can read about the managed workflow limitations in the expo docs.
if you'd like to use it, run expo eject and build the project in xcode
Get warning "Not covered by Flow"(3 warnings on one line)
on line:
Use Flow.js v.0.48.0.
Code sample:
...
import { Font, AppLoading } from 'expo';
...
export default class App extends Component {
...
componentDidMount() {
this.loadFonts();
}
async loadFonts () {
await Font.loadAsync(fontsStore);
}
...
}
In this case, it looks like Flow is unable to find types for the expo module. It looks like they are not currently available on flow-typed, but you are welcome to submit them. You can also just create library definitions for your own use. Basically you will need to describe the external interface of the expo package. Flow will then use the types you provide to type check your code that uses the expo package.