![](/img/trans.png)
[英]Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default.a.createContext is not a function
[英]Uncaught TypeError: _firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.registerVersion is not a function in IONIC v4
問題
在控制台中運行/部署應用程序(離子服務)時看到此錯誤
Uncaught TypeError: _firebase_app__WEBPACK_IMPORTED_MODULE_0___default.a.registerVersion is not a function
at auth.esm.js:372
at auth.esm.js:372
at Module.<anonymous> (auth.esm.js:372)
at Module../node_modules/@firebase/auth/dist/auth.esm.js (auth.esm.js:374)
at __webpack_require__ (bootstrap:83)
at Module../node_modules/firebase/auth/dist/index.esm.js (index.esm.js:1)
at __webpack_require__ (bootstrap:83)
at Module../node_modules/@angular/fire/auth/auth.module.js (auth.module.js:1)
at __webpack_require__ (bootstrap:83)
at Module../node_modules/@angular/fire/auth/public_api.js (public_api.js:1)
auth.esm.js 文件在文件末尾顯示這行帶有錯誤下標的代碼
;firebase.registerVersion("@firebase/auth","0.13.3");firebase.INTERNAL.extendNamespace({User:Q})}else throw Error("Cannot find the firebase namespace; be sure to include firebase-app.js before this library.");})();}).apply(typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : typeof window !== 'undefined' ? window : {});
環境
Ionic:
Ionic CLI : 5.4.13 (C:\xxxx\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.11.7
@angular-devkit/build-angular : 0.12.4
@angular-devkit/schematics : 7.2.4
@angular/cli : 7.2.4
@ionic/angular-toolkit : 1.2.3
Cordova:
Cordova CLI : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 8.1.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 2.5.3, (and 11 other plugins)
Utility:
cordova-res : 0.8.1
native-run : 0.3.0
System:
Android SDK Tools : 26.1.1 (E:\ANDROID_SDK)
NodeJS : v12.14.0 (C:\Program Files\nodejs\node.exe)
npm : 6.13.4
OS
: Windows 10
更新了webpack.config.js。
const path = require('path');
const webpack = require('webpack');
module.exports = {
plugins: [
new webpack.ProvidePlugin({
'window.SQL': 'sql.js/js/sql.js'
}),
new webpack.NormalModuleReplacementPlugin(/typeorm$/, function (result) {
result.request = result.request.replace(/typeorm/, "typeorm/browser");
}),
new webpack.ContextReplacementPlugin(
/\/package-name\//,
(data) => {
delete data.dependencies[0].critical;
return data;
},
),
// new webpack.ContextReplacementPlugin(/\@angular(\\|\/)core(\\|\/)esm5/, path.join(__dirname, './client'))
],
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
},
optimization: {
minimize: false
},
externals: {
'react-native-sqlite-storage': 'react-native-sqlite-storage'
}
};
包.json
{
"name": "xxx.xxxxx",
"version": "1.0.0",
"author": "xxxx",
"homepage": "https://xxxx.com.ar/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^7.2.2",
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/fire": "^5.3.0",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/material": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@firebase/app": "^0.4.25",
"@firebase/polyfill": "^0.3.29",
"@ionic-native/app-version": "5.17.0",
"@ionic-native/camera": "^5.17.0",
"@ionic-native/core": "^5.17.0",
"@ionic-native/device": "^5.17.0",
"@ionic-native/fcm": "^5.19.0",
"@ionic-native/file": "^5.17.0",
"@ionic-native/geolocation": "^5.17.0",
"@ionic-native/google-plus": "^5.17.0",
"@ionic-native/image-resizer": "4.17.0",
"@ionic-native/native-audio": "^5.17.0",
"@ionic-native/splash-screen": "^5.17.0",
"@ionic-native/status-bar": "^5.17.0",
"@ionic-native/unique-device-id": "^5.17.0",
"@ionic/angular": "^4.11.7",
"@ionic/storage": "2.1.3",
"@types/googlemaps": "^3.25.36",
"angular2-uuid": "^1.1.1",
"bluebird": "^3.5.1",
"cordova": "^8.1.2",
"cordova-android": "^8.1.0",
"cordova-ios": "4.5.5",
"cordova-plugin-app-version": "^0.1.9",
"cordova-plugin-browsertab": "^0.2.0",
"cordova-plugin-buildinfo": "^2.0.3",
"cordova-plugin-camera": "^4.1.0",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-device": "^2.0.3",
"cordova-plugin-fcm-with-dependecy-updated": "^4.1.1",
"cordova-plugin-file": "^6.0.2",
"cordova-plugin-geolocation": "^2.4.3",
"cordova-plugin-googleplayservices": "^19.0.3",
"cordova-plugin-googleplus": "^5.3.2",
"cordova-plugin-ionic-keyboard": "^2.2.0",
"cordova-plugin-ionic-webview": "^2.5.3",
"cordova-plugin-nativeaudio": "^3.0.9",
"cordova-plugin-nativestorage": "^2.3.2",
"cordova-plugin-splashscreen": "^5.0.3",
"cordova-plugin-statusbar": "^2.4.3",
"cordova-plugin-uniquedeviceid": "^1.3.2",
"cordova-plugin-whitelist": "^1.3.4",
"cordova-sqlite-storage": "^3.4.1",
"core-js": "^2.5.4",
"firebase": "^7.5.0",
"imagemin": "^5.3.1",
"info.protonet.imageresizer": "^0.1.1",
"ionic-angular": "^3.9.9",
"ionicons": "3.0.0",
"local-storage": "^1.4.2",
"moment": "^1.7.2",
"ng-lottie": "^0.3.2",
"ng2-reactive-forms-validators": "^1.1.0",
"ng2-translate": "^5.0.0",
"ngx-mask": "^8.1.6",
"ngx-mask-ionic": "^1.1.2",
"q": "^1.5.1",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.5.3",
"sql.js": "^0.5.0",
"sqlite3": "^4.0.8",
"sw-toolbox": "3.6.0",
"tslib": "^1.10.0",
"typeorm": "^0.2.20",
"zone.js": "~0.8.29"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^7.2.0",
"@angular-builders/dev-server": "^7.2.1",
"@angular-devkit/architect": "~0.12.3",
"@angular-devkit/build-angular": "^0.12.4",
"@angular-devkit/core": "~7.2.3",
"@angular-devkit/schematics": "~7.2.3",
"@angular/cli": "~7.2.3",
"@angular/compiler": "~7.2.2",
"@angular/compiler-cli": "~7.2.2",
"@angular/language-service": "~7.2.2",
"@ionic/angular-toolkit": "~1.2.0",
"@types/file-saver": "^2.0.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^10.12.19",
"codelyzer": "~4.5.0",
"file-saver": "^2.0.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.13.0",
"protractor": "~5.4.0",
"ts-node": "~8.0.0",
"tslint": "~5.12.0",
"typescript": "~3.1.6",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
},
"description": " ",
"cordova": {
"plugins": {
"cordova-plugin-uniquedeviceid": {},
"cordova-plugin-app-version": {},
"cordova-sqlite-storage": {},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {
"ANDROID_SUPPORT_ANNOTATIONS_VERSION": "27.+"
},
"cordova-plugin-ionic-keyboard": {},
"cordova-plugin-googleplus": {
"REVERSED_CLIENT_ID": "com.googleusercontent.apps.xxxxx-xxxxxxx",
"WEB_APPLICATION_CLIENT_ID": "xxxxx-XXXX.apps.googleusercontent.com"
},
"cordova-plugin-geolocation": {},
"cordova-plugin-fcm-with-dependecy-updated": {
"FCM_CORE_VERSION": "16.0.9",
"FCM_VERSION": "18.0.0",
"GRADLE_TOOLS_VERSION": "3.5.0",
"GOOGLE_SERVICES_VERSION": "4.2.0"
}
},
"platforms": [
"android"
]
}
}
信息
我唯一看到的是包中 @firebase/app 的版本是 ^0.4.25 。 在 auth 中,版本是 0.13.3
我已經做過的
您還可以使用以下步驟在 ionic 中配置 firebase,
npm install @angular/fire firebase --save
一旦安裝了 AngularFire(我們將使用該插件將 Ionic 應用程序與 Firebase 進行通信),我們需要在 Firebase 中創建一個新項目。 要創建項目,請轉到firebase 控制台,您將在其中看到創建項目的選項:
之后
我們將指定這些憑據來告訴我們的 Ionic 應用程序與我們的 Firebase 應用程序進行通信。
下一步是將我們的 Firebase 憑據添加到我們的 Ionic 應用程序中。 為此,我們將轉到我們在上一步中創建的 Ionic 項目,並在位於src/environments/
的 environment.ts 文件中添加以下代碼:
export const environment = {
production: false,
firebase: {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
databaseURL: "YOUR_DATABASE_URL",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_SENDER_ID"
}
};
請記住,您必須用自己的值替換常量。 在您的app.module.ts
添加此代碼
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';
@NgModule({
declarations: [
...
],
imports: [
...,
AngularFireModule.initializeApp(environment.firebase), //add this code
AngularFireDatabaseModule //add this code
],
providers: [],
bootstrap: [AppComponent]
})
通過這個,您可以使用 firebase 配置您的 ionic 應用程序。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.