Does anyone know what is the fix for the decricated import of ionic Plugins?
I'm following a tutorial and I cant proceed until I fix it..
i used plugin
npm install capacitor-face-id
Enter link description here
import { Plugins, PluginResultError } from '#capacitor/core';
const { FaceId } = Plugins;
Many thanks
I assume you are using Capacitor 3.
This plugin seems to be compatible only with Capacitor 2 (see issue #181).
In Capacitor 2 this import type is used.
Related
I wrote a small PoC for JOSE which works on Expo web but fails on iOS because it's looking for crypto and it's showing can't find variable: crypto
A few other packages need to be installed
npx expo install expo-random text-encoding buffer expo-standard-web-crypto
Then add file that would initialize the polyfills that are needed.
// initializePolyfills.ts
global.Buffer = require("buffer").Buffer;
import { polyfillWebCrypto } from "expo-standard-web-crypto";
polyfillWebCrypto();
const TextEncodingPolyfill = require("text-encoding");
Object.assign(global, {
TextEncoder: TextEncodingPolyfill.TextEncoder,
TextDecoder: TextEncodingPolyfill.TextDecoder,
});
In app.tsx, import the file as the first line
import './importPolyfills'
...
I am getting below warning
AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '#react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage
How can I suppress it?
I have tried the below method(placed below lines in app.js) but none are working.
import { LogBox } from 'react-native'
LogBox.ignoreLogs(['Warning: AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from `#react-native-async-storage/async-storage` instead of `react-native`. See https://github.com/react-native-async-storage/async-storage'])
import { LogBox } from 'react-native'
LogBox.ignoreLogs(["Warning: AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '#react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage"])
Can anyone help me to suppress it?
import { LogBox } from 'react-native';
LogBox.ignoreLogs(['Asyncstorage: ...']); // Ignore log notification by message
LogBox.ignoreAllLogs(); //Ignore all log notifications
Its a warning. Do not suppress it. I guess you are using Async storage from 'react-native' package. Instead install #react-native-async-storage/async-storage and use it from here.
I'm new to Ionic 4 and am trying to get SQLite working. I have added the cordova plugin and the ionic native sqlite but when I try and set it up in the app module I get the above error. Here is my app,module.ts
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { IonicStorageModule } from '#ionic/storage';
import { SQLite } from '#ionic-native/sqlite';
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), IonicStorageModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
SQLite,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
Can anyone help?
You have to import from '#ionic-native/sqlite/ngx'
https://ionicframework.com/docs/native
It looks like this has to do with the recent release of Ionic 4. I ran into this issue with #ionic-native/file within my app. If you installed after the release without specifying the version you wanted, you probably got the latest or beta version.
I was able to fix it by rolling back to an earlier version by modifying my package.json to reflect the version required -- I had 5.0.0 installed and rolled back to 4.20.0. If you have VersionLens for VSCode it will show you the minimum and the latest versions.
Then, clear your node modules, and reinstall:
rm -rf node_modules/
npm install
There is another post open this, available here:
Type HTTPOriginal is not assignable to type Provider, ionic error after plugin installation
It happens because of the new update of ionic 4.
You have to add /ngx to your plugin's import. Like this:
import { PluginName} from '#ionic-native/pluginName/ngx';
Otherwise fallback to ionic v4.
More info here
Everywhere where native plugins are imported, you need to add /ngx/.
Moreover, this must be done throughout the project, otherwise the error will still appear.
Error example:
import {Market} from '#ionic-native/market';
True example:
import {Market} from '#ionic-native/market/ngx';
Import:
import { SQLitePorter } from '#ionic-native/sqlite-porter/ngx';
import { SQLite } from '#ionic-native/sqlite/ngx';
And add into provider:
providers: [
SQLite,
SQLitePorter
]
This usually happens if you import them from different path.
You have to import '#ionic-native/sqlite/ngx' at both app.module.ts and the page you want to use it.
I have created an project in vuejs using vue-cli3. It working fine on chrome browser but in IE-11 version blank screen is shown with the following error in console as mentioned in this link: https://drive.google.com/file/d/1QaNwK1ekI2BwFsFyjvgbSsvwHBCmlcAD/view?usp=drivesdk
On clicking console error that I have pointed in above screenshot, it opens a screen as display in given link https://drive.google.com/file/d/1_QXVjcw3cmqeC70LfNyLcr__rnXVIZIh/view?usp=drivesdk with the error in mini-toastr package:
Here is my babel.config.js file code:
module.exports = {
presets: [
['#vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
}
and .browserslistrc file code :
> 1%
last 2 versions
not ie <= 8
I am not getting where I am doing a mistake. Is anything I am missing? If anyone need some more info please let me know. Thanks!
I finally ended up with the solution of above issue. To run project on IE-11 version just follow the 2 steps:
Install babel-polyfill using command "npm install --save babel-polyfill".
Import babel-polyfill in your main.js or index.js file at the top of above all imported packages. For e.g Here is your main.js file.
Note: If you import babel-polyfill at the end it does't work.
import 'babel-polyfill'
import Vue from 'vue'
import Vuetify from 'vuetify'
import router from './router'
// include script file
import './lib/DemoScript'
// include all css files
import './lib/DemoCss'
Vue.use(Vuetify)
new Vue({
store,
router,
render: h => h(App),
components: { App }
}).$mount('#app')
Another solution: use the power of vue-cli-3 to leverage browser support: https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode
Just one option when building and you're done once you've chosen browserslist to support :-)
This should work well for building an app.
I own a FontAwesome Pro License and I use the Vue-FontAwesome Component.
When I try to import all icons from both the free and Pro repo I get an "Duplicate declaration error ..." and if I change the declaration name it can't be found anymore.
import { library } from '#fortawesome/fontawesome-svg-core'
import { fab } from '#fortawesome/free-brands-svg-icons'
import { fas } from '#fortawesome/pro-solid-svg-icons'
import { far } from '#fortawesome/pro-regular-svg-icons'
import { fal } from '#fortawesome/pro-light-svg-icons'
import { fas } from '#fortawesome/free-solid-svg-icons'
import { far } from '#fortawesome/free-regular-svg-icons'
library.add(fab)
library.add(fas)
library.add(far)
library.add(fal)
How do I import all icons from Free and Pro?
I tried to add Fontawesome pro icons to Vuetify(1.5.x). I found a solition. I share this solution with you.
First of all, in your project directory, create a file called .npmrc and add this to it:
#fortawesome:registry=https://npm.fontawesome.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX,
install fontawesome-pro package with npm or yarn
npm install --save-dev #fortawesome/fontawesome-pro
or
yarn add --dev #fortawesome/fontawesome-pro
Add this line in app.js or main.js
import '#fortawesome/fontawesome-pro/css/all.css'
Install pro icon packages
npm i --save #fortawesome/pro-solid-svg-icons
npm i --save #fortawesome/pro-regular-svg-icons
npm i --save #fortawesome/pro-light-svg-icons
You can use with pro icons with prefix (fas solid, far regular fal light. That's all you can use pro icons. I hope work with your project. Good Luck.
You're in effect importing multiple icon packs into to the same var for both far and fas, hence the error "Duplicate declaration".
As stated in comments, if you have FontAwesome Pro, that includes everything in FontAwesome Free. Import the pro-packages you need, and forget about the free edition.
That being said, importing the entire thing isn't ideal. If you're using a bundle manager with tree shaking (i.e webpack), it will save your application's weight impact tenfold. You rarely need all of the 5k icons.
Continuing down that road, that is; not importing the entire package: You can import different icon versions by importing and casting them. Like so:
import { library } from '#fortawesome/fontawesome-svg-core'
import { faCoffee as fasCoffee } from '#fortawesome/pro-solid-svg-icons'
import { faCoffee as farCoffee } from '#fortawesome/pro-regular-svg-icons'
import { faCoffee as falCoffee } from '#fortawesome/pro-light-svg-icons'
library.add(fasCoffee, farCoffee, falCoffee)
More on all of this in the official docs for FA-Pro.