Expo start don't works after Upgrading Expo 26 to 32 - react-native

After upgrading expo from: SDK 26 to SDK 32, I have the following issue when I use expo run emulator or expo app:
/Users/name user/project name/node_modules/expo/AppEntry.js: Cannot read property ‘1’ of undefined
AppEntry.js:
import { KeepAwake, registerRootComponent } from 'expo';
import App from '../../App';
if (__DEV__) {
KeepAwake.activate();
}
registerRootComponent(App);
package.json:
{
“main”: “node_modules/expo/AppEntry.js”,
“private”: true,
“scripts”: {
“test”: “node ./node_modules/jest/bin/jest.js --watchAll”
},
“jest”: {
“preset”: “jest-expo”
},
“dependencies”: {
“#expo/samples”: “2.1.1”,
“babel-preset-expo”: “^5.1.1”,
“expo”: “^32.0.0”,
“npm”: “^4.6.1”,
“react”: “16.5.0”,
“react-native”: “https://github.com/expo/react-
native/archive/sdk- 32.0.0.tar.gz”,
“react-native-animatable”: “^1.2.4”,
“react-native-device-info”: “^0.21.5”,
“react-native-drawer”: “^2.5.0”,
“react-native-drawer-menu”: “^0.2.5”,
“react-native-elements”: “^0.19.1”,
“react-native-fetch-polyfill”: “^1.1.2”,
“react-native-geocoder”: “^0.5.0”,
“react-native-geocoding”: “^0.3.0”,
“react-native-google-maps-directions”: “^2.0.0”,
“react-native-keyboard-spacer”: “^0.4.1”,
“react-native-maps”: “^0.21.0”,
“react-native-masked-text”: “^1.6.5”,
“react-native-qrcode-svg”: “^5.1.1”,
“react-native-select-input-ios”: “^1.2.0”,
“react-native-swipeable”: “^0.6.0”,
“react-native-swiper”: “^1.5.13”,
“react-native-touch-id”: “^4.0.4”,
“react-native-vector-icons”: “^4.6.0”,
“react-navigation”: “^3.0.9”
},
“devDependencies”: {
“#babel/core”: “^7.4.3”,
“#babel/preset-env”: “^7.0.0-beta.47”,
“gulp-babel”: “^7.0.1”,
“jest-expo”: “^32.0.0”
}
}
EDIT:
After adjusting at the suggestion, I'm getting this error:
Users/user name/project name/App.js: Cannot read property 'filename' of undefined
Any ideas on potential solutions to try? Any help would be greatly appreciated!

Looking at the issue log for expo, I see someone else had a similar issue when updating from:
SDK version 30 to SDK version 31
and the issue was related to their babel configuration. Perhaps you're dealing with the same issue, maybe you could try the solution they suggested and see if that resolves your issue as well since you're updating from SDK version 26.
Here is what they suggested:
Install the latest version of babel-plugin-module-resolver:
npm i --save-dev babel-plugin-module-resolver#latest
alternatively:
yarn add babel-plugin-module-resolver#latest
Additionally, others had to change their .babelrc contents to use the "babel-preset-expo" preset:
.babelrc
{
"presets": ["babel-preset-expo"]
}
Hopefully that helps!

Related

Expo SDK38 upgrade - fontFamily "FontAwesome" is not a system font and has not been loaded through Font.loadAsync

Since I have upgraded to Expo SDK 38, I am getting this error when I start my app. I need to upgrade to SDK38 because Android will not let me publish at any less version.
This was working fine on SDK37, the only thing that I have changed is that I have upgraded all packages using expo upgrade, also there was an error error: unknown option --assetExts so I had to remove this from the app.json, which may be the cause. I changed assetExts to sourceExts which made it compile but maybe this is stopping the fonts working..
"packagerOpts": {
"assetExts": ["otf", "ttf"]
},
I am following the example here of preloading the font in my App.js which is what all other answers that I can find are suggesting to do, but still getting the error.
I have also tried deleting my node_modules, package.json.lock and .expo folders, all which have not helped.
https://docs.expo.io/guides/preloading-and-caching-assets/#pre-loading-and-caching-assets
import { FontAwesome } from "#expo/vector-icons";
function cacheFonts(fonts) {
return fonts.map((font) => Font.loadAsync(font));
}
const fontAssets = cacheFonts([FontAwesome.font]);
await Promise.all([...fontAssets]);
Turns out this was a cache issue, the code was absolutely fine. I thought I had cleared everything but obviously not.
Deleted node_modules, package.json.lock again and npm installed and worked fine.

Not able to work with peer dependency in react native

I have one react-native app in which I am using "json-schema-rules" library. Now I have also created one library which is getting used in my react-native app like this "file:../custom_library" in package.json.
Now to resolve the version conflict, I decided to use "json-schema-rules" as a peer dependency in my custom library. So, the package.json is like this
Package.json of my react-native app:
{
"dependencies": {
"json-rules-engine": "^2.3.0",
"custom_library": "file:../custom_library"
}
}
package.json of my custom_library:{
"peerDependencies": {
"json-schema-rules": "^2.3.0"
}
}
Now the problem is, whenever I am using metro bundler, I get an error
error: bundling failed: Error: Unable to resolve module json-rules-engine
json-rules-engine could not be found within the project.
This is the case when I am using it in peerDependencies, I do not get any error if I use this library in dependencies.
Please help.
You can try to add an alias for the module in your project's babel config.
This means that when your custom packages tries to import "json-rules-engine" it will get served the version from the main app.
First install 'babel-plugin-module-resolver' then configure the alias in "module-resolver"
babel.config.js
const config = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
[
"module-resolver",
{
root: ["./src"],
extensions: [".js", ".jsx", ".ios.js", ".android.js"],
alias: {
"json-rules-engine": require.resolve("json-rules-engine")
}
}
]
]
};
module.exports = config;

Unable to resolve "expo-av" from "screens/HomeScreen.js"

I have recently upgraded my expo-cli to version 2.21.2 and Expo SDK v33 to get support of Background Playback of Audio. However, I'm getting the error while running the code. consider the code snippet attached below,
import { Audio } from 'expo-av';
Audio.setAudioModeAsync({
staysActiveInBackground : true,
playsInSilentModeIOS: true,
interruptionModeIOS: INTERRUPTION_MODE_IOS_DUCK_OTHERS,
shouldDuckAndroid : true,
});
Project Configurations app.json just modified infoPlist in ios,
"infoPlist": {
"UIBackgroundModes": [
"audio"
]
}
Unable to figure out the issue in setup, or in the project?
You probably forgot to add expo-av in your dependencies in package.json :
npm install expo-av
# OR yarn add expo-av
Since SDK 33, expo has released package expo-codemod which intends to transform most of theses kind of changes when upgrading an app.
https://www.npmjs.com/package/expo-codemod
For example, after installation, you could execute something like this to automatically fix new imports and upgrade your package.json accordingly :
npx expo-codemod sdk33-imports ./src

How to disable autolinking on iOS?

I've installed react-native-localization in my react native project (v0.6). Library is not supporting autolinker yet so I need to disable it for iOS and Android in react-native.config.js.
I already tried to add dependencies in react-native.config.js. After that, I did react-native link react-native-localization command and build an app.
This is my react-native.config.js file:
'use strict';
const ios = require('#react-native-community/cli-platform-ios');
const android = require('#react-native-community/cli-platform-android');
module.exports = {
dependencies: {
'react-native-localization': {
platforms: {
android: null, // disable Android platform, other platforms will still autolink if provided
ios: null,
},
},
},
commands: [...ios.commands, ...android.commands],
platforms: {
ios: {
linkConfig: ios.linkConfig,
projectConfig: ios.projectConfig,
dependencyConfig: ios.dependencyConfig,
},
android: {
linkConfig: android.linkConfig,
projectConfig: android.projectConfig,
dependencyConfig: android.dependencyConfig,
},
},
/**
* Used when running RNTester (with React Native from source)
*/
reactNativePath: '.',
project: {
ios: {
project: './RNTester/RNTester.xcodeproj',
},
android: {
sourceDir: './RNTester',
},
},
};
Error in simulator says:
"Please check your configuration. Did you run 'react-native link'?
As now, react-native has added the support for CocoaPods inside of his projects. (https://github.com/facebook/react-native/releases)
Sadly, i don't know why, but the autolinking feature never works for me on iOS but always goes trough in Android. The only solution i found is to do a react-native link only for iOS (renaming the android folder to something else), then do cd ios and pod install. After that, in the majority of the cases, it would work out of the box, while other libs needs still to be updated to have a full integration with RN 0.60.
Hope all this will be fixed soon but until that we only have to wait and hope that the libs work without any other complications

error Failed to get dependency config. while installing fonts

I am trying to install fonts with
react-native link ./assets/fonts/ and with react-native link
both are giving the same error:
"error Failed to get dependency config."
I updated my package.json
"rnpm": {
"assets": [
"./assets/fonts/"
]
}
Please help
I have made sure the path to the font folder is correct and still same problem
re-install and re-link solves the problem in my case
What version of your react-native?
If it is> 0.60, it is recommended to create the react-native.config.js file with the configurations below:
module.exports = {
project: {
ios: {},
android: {}, // grouped into "project"
},
assets: [
'./assets/fonts/',
],
};
Link without specifying the package name and it should work
react-native link