Mobile version
Fehler:
Code: Select all
PluginError: Package "@react-native-firebase/app" does not contain a valid config plugin.
Learn more: https://docs.expo.dev/guides/config-plugins/#creating-a-plugin
Unexpected token 'typeof'
SyntaxError: Unexpected token 'typeof'
at compileSourceTextModule (node:internal/modules/esm/utils:318:16)
at ModuleLoader.importSyncForRequire (node:internal/modules/esm/loader:380:18)
at loadESMFromCJS (node:internal/modules/cjs/loader:1578:24)
at Module._compile (node:internal/modules/cjs/loader:1743:5)
at Object..js (node:internal/modules/cjs/loader:1893:10)
at Module.load (node:internal/modules/cjs/loader:1481:32)
at Module._load (node:internal/modules/cjs/loader:1300:12)
at TracingChannel.traceSync (node:diagnostics_channel:328:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:245:24)
at Module.require (node:internal/modules/cjs/loader:1504:12)
Unten sind die package.json und app.config.js aufgeführt, die zur Proof of Concept App gehören...
package.json-Inhalte
Code: Select all
{
"name": "demo",
"version": "1.0.0",
"main": "index.ts",
"scripts": {
"dev-android": "cross-env NODE_ENV=development npx expo run:android --port 8082",
"dev-ios": "cross-env NODE_ENV=development npx expo run:ios --port 8082",
"prod-android": "cross-env NODE_ENV=production npx expo run:android --port 8082",
"prod-ios": "cross-env NODE_ENV=production npx expo run:ios --port 8082",
"ts-check": "tsc",
"android": "expo run:android",
"ios": "expo run:ios"
},
"dependencies": {
"@react-native-firebase/app": "^23.7.0",
"@react-native-firebase/auth": "^23.7.0",
"@react-native-firebase/crashlytics": "^23.7.0",
"expo": "~53.0.24",
"expo-asset": "~11.1.7",
"expo-build-properties": "~0.14.8",
"expo-camera": "~16.1.11",
"expo-system-ui": "~5.0.11",
"expo-status-bar": "~2.2.3",
"react": "19.0.0",
"react-native": "0.79.6"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/node": "^24.10.2",
"@types/react": "~19.0.10",
"cross-env": "^10.1.0",
"react-native-dotenv": "^3.4.11",
"typescript": "~5.8.3"
},
"private": true
}
Code: Select all
module.exports = {
name: 'demo',
slug: 'demo',
version: '1.0.0',
orientation: 'portrait',
icon: './assets/icon.png',
userInterfaceStyle: 'light',
newArchEnabled: true,
splash: {
image: './assets/splash-icon.png',
resizeMode: 'contain',
backgroundColor: '#ffffff'
},
ios: {
supportsTablet: true
},
android: {
adaptiveIcon: {
foregroundImage: './assets/adaptive-icon.png',
backgroundColor: '#ffffff'
},
package: 'com.anonymous.demo',
edgeToEdgeEnabled: true
},
web: {
favicon: './assets/favicon.png'
},
plugins: [
['@react-native-firebase/app'],
['@react-native-firebase/auth'],
['@react-native-firebase/crashlytics'],
[
'expo-camera',
{
cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera',
microphonePermission: 'Allow $(PRODUCT_NAME) to access your microphone',
recordAudioAndroid: true
}
],
[
'expo-build-properties',
{
android: {
minSdkVersion: 26,
compileSdkVersion: 35,
targetSdkVersion: 35
},
ios: {
useFrameworks: 'static'
}
}
]
]
};
Ich sollte erwähnen, dass ich bei der Einrichtung vor zwei Jahren deren Dokumentation hier gefolgt bin: rnfirebase.io/#configure-react-native-firebase-modules .
Das Einzige, was ich tun musste, war, die drei Plugin-Strings in ein eigenes Array zu packen, und der Build und die Bereitstellung waren erfolgreich. Wir verwenden auch die Dateien google-services.json und GoogleService-Info.plist (heruntergeladen von unserem Firebase-Projekt) in unserer app.config.js.
Als Google uns zu einem Upgrade auf expo sdk53 zwang, hat es das von uns verwendete Scandit-Plugin kaputt gemacht. Scandit würde nur in Dev-Builds erfolgreich laufen, würde die App jedoch auf Android- und iOS-Builds zum Absturz bringen. Wir haben uns entschieden, stattdessen die Expo-Kamera zum Scannen auszuprobieren, da die Expo neben ihren SDK-Updates auch Aktualisierungen verwalten sollte. In diesem Fall schlägt die Erstellung der App fehl. Aber es wird ohne Firebase erfolgreich erstellt/ausgeführt.
Ich konnte expo-camera in einer Proof-of-Concept-App selbst erfolgreich zum Laufen bringen, aber als ich es zu unserer riesigen App hinzufügte, bemerkte ich, dass es einen Konflikt mit den Firebase-Plugins gab.
Unten sind die package.json und die app.config.js aufgeführt, die zu unserer vollständigen App gehören...
package.json
Code: Select all
{
"name": "full-app",
"version": "1.0.0",
"main": "index.ts",
"scripts": {
"dev-android": "cross-env NODE_ENV=development npx expo run:android --port 8082",
"dev-ios": "cross-env NODE_ENV=development npx expo run:ios --port 8082",
"prod-android": "cross-env NODE_ENV=production npx expo run:android --port 8082",
"prod-ios": "cross-env NODE_ENV=production npx expo run:ios --port 8082",
"ts-check": "tsc",
"android": "expo run:android",
"ios": "expo run:ios"
},
"dependencies": {
"@expo/vector-icons": "^14.1.0",
"@react-native-async-storage/async-storage": "~2.1.2",
"@react-native-community/hooks": "^100.1.0",
"@react-native-community/netinfo": "^11.4.1",
"@react-navigation/native": "^7.1.22",
"@react-navigation/stack": "^7.6.9",
"@shopify/react-native-skia": "v2.0.0-next.4",
"@tanstack/react-query": "^5.90.11",
"axios": "^1.13.2",
"core-js": "^3.47.0",
"expo": "~53.0.24",
"expo-asset": "~11.1.7",
"expo-auth-session": "~6.2.1",
"expo-build-properties": "~0.14.8",
"expo-camera": "~16.1.11",
"expo-constants": "~17.1.7",
"expo-crypto": "~14.1.5",
"expo-file-system": "~18.1.11",
"expo-font": "~13.3.2",
"expo-image-manipulator": "~13.1.7",
"expo-image-picker": "~16.1.4",
"expo-location": "~18.1.6",
"expo-secure-store": "~14.2.4",
"expo-splash-screen": "~0.30.10",
"expo-status-bar": "~2.2.3",
"expo-system-ui": "~5.0.11",
"expo-web-browser": "~14.2.0",
"formik": "^2.4.9",
"jwt-decode": "^4.0.0",
"lodash": "^4.17.21",
"react": "19.0.0",
"react-native": "0.79.6",
"react-native-device-info": "^15.0.1",
"react-native-element-dropdown": "^2.12.4",
"react-native-gesture-handler": "~2.24.0",
"react-native-get-random-values": "^1.11.0",
"react-native-keyboard-controller": "^1.20.2",
"react-native-reanimated": "~3.17.4",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.11.1",
"react-native-shadow-2": "^7.1.2",
"react-native-signature-canvas": "^5.0.1",
"react-native-svg": "~15.11.2",
"react-native-switch": "^1.5.1",
"react-native-toast-message": "^2.3.3",
"react-native-webview": "~13.13.5",
"uri-scheme": "^2.0.10",
"uuid": "^13.0.0",
"yup": "^1.7.1",
"zustand": "^5.0.9"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/lodash": "^4.17.21",
"@types/node": "^24.10.2",
"@types/react": "~19.0.10",
"@types/uuid": "^10.0.0",
"cross-env": "^10.1.0",
"react-native-dotenv": "^3.4.11",
"typescript": "~5.8.3"
},
"private": true
}
Code: Select all
module.exports = {
name: process.env.EXPO_PUBLIC_APP_NAME,
slug: process.env.EXPO_PUBLIC_APP_SLUG,
version: process.env.EXPO_PUBLIC_APP_VERSION,
scheme: 'msauth',
orientation: 'portrait',
icon: `./assets/images/${process.env.EXPO_PUBLIC_APP_IOS_ICON}`,
userInterfaceStyle: 'light',
newArchEnabled: true,
backgroundColor: process.env.EXPO_PUBLIC_APP_DEFAULT_BACKGROUNDCOLOR,
assetBundlePatterns: ['**/*'],
ios: {
icon: {
backgroundColor: process.env.EXPO_PUBLIC_APP_IOS_ICON_BACKGROUNDCOLOR
},
infoPlist: {
NSCameraUsageDescription: `Your camera will be used to scan barcodes or take pictures for ${process.env.EXPO_PUBLIC_APP_NAME}.`,
NSLocationWhenInUseUsageDescription: 'Your locations information will be used whenever you access the inventory.'
},
supportsTablet: true,
googleServicesFile: './GoogleService-Info.plist',
bundleIdentifier: process.env.EXPO_PUBLIC_APP_BUNDLE_IDENTIFIER,
buildNumber: process.env.EXPO_PUBLIC_APP_IOS_BUILD_NUMBER
},
android: {
adaptiveIcon: {
foregroundImage: `./assets/images/${process.env.EXPO_PUBLIC_APP_ANDROID_ICON}`,
backgroundColor: process.env.EXPO_PUBLIC_APP_ANDROID_ICON_BACKGROUNDCOLOR
},
permissions: ['android.permission.CAMERA', 'android.permission.RECORD_AUDIO'],
googleServicesFile: './google-services.json',
edgeToEdgeEnabled: true,
package: process.env.EXPO_PUBLIC_APP_BUNDLE_IDENTIFIER,
versionCode: Number(process.env.EXPO_PUBLIC_APP_ANDROID_VERSION_CODE)
},
web: {
favicon: './assets/images/favicon.png'
},
plugins: [
['./plugins/withNinjaLongPaths'],
['@react-native-firebase/app'],
['@react-native-firebase/auth'],
['@react-native-firebase/crashlytics'],
[
'expo-camera',
{
cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera',
microphonePermission: 'Allow $(PRODUCT_NAME) to access your microphone',
recordAudioAndroid: true
}
],
[
'expo-build-properties',
{
android: {
minSdkVersion: 26,
compileSdkVersion: 35,
targetSdkVersion: 35
},
ios: {
useFrameworks: 'static'
}
}
],
[
'expo-image-picker',
{
photosPermission: 'Allow $(PRODUCT_NAME) to access your photos',
cameraPermissions: 'Allow $(PRODUCT_NAME) to access your camera'
}
],
[
'expo-location',
{
locationAlwaysAndWhenInUsePermission: 'Allow $(PRODUCT_NAME) to use your location.'
}
],
[
'expo-splash-screen',
{
ios: {
backgroundColor: process.env.EXPO_PUBLIC_APP_IOS_SPLASH_BACKGROUNDCOLOR,
image: `./assets/images/${process.env.EXPO_PUBLIC_APP_SPLASH_IMAGE}`,
imageWidth: Number(process.env.EXPO_PUBLIC_APP_IOS_SPLASH_IMAGE_WIDTH)
},
android: {
backgroundColor: process.env.EXPO_PUBLIC_APP_ANDROID_SPLASH_BACKGROUNDCOLOR,
image: `./assets/images/${process.env.EXPO_PUBLIC_APP_SPLASH_IMAGE}`,
imageWidth: Number(process.env.EXPO_PUBLIC_APP_ANDROID_SPLASH_IMAGE_WIDTH)
}
}
]
],
experiments: {
typedRoutes: true
}
};
