Ionic react component is not getting imported - ionic-framework

I am trying to import IonAccordion and IonAccordionGroup, but I'm facing error like
"Line 38:16: 'IonAccordionGroup' is not defined react/jsx-no-undef".
And I'm using library type as react for ionic app development. And latest version of ionic and react.
Here I've attached the picture
Thank You

This should be as simple as including the following lines at the top of your Menu.tsx file:
import React from 'react';
import { IonAccordionGroup } from '#ionic/react';
Note that IonAccordion is a new component for Ionic React 6 and you will need to upgrade to version 6 if you are using an older version of Ionic React.

Related

Popper styled_default is not a function Mui 5.6.0 [material-ui]

After upgrading from #mui/material 5.5.0 to 5.6.4 my vite react-ts app doesn't run, throwing an error: styled_default is not a function by Popper.js, the popper component is being used by an autocomplete component
The theme provider is wrapping entire app
Autocomplete is hitting an api to populate options, but a fresh vite project with mui doesn't seem to have this issue?
Any help / pointers in the right direction would be appreciated
running react 17.0.2
vite 2.8.0
mui/material 5.6.4
For me worked by change the ThemeProvider export path
after
import { ThemeProvider } from '#mui/material/styles';
previously
import { ThemeProvider } from '#mui/material';
This issue has been closed. https://github.com/mui/material-ui/issues/32727
Yet it is an ongoing issue.
Try reinstalling your node_modules. Worked for me.

What is the import statement for cordova-plugin-sqlite-2 in Ionic framework?

I am trying to use cordova-plugin-sqlite-2 plugin in my Ionic app, but I'm not sure how to use its features for opening or creating a database .
What import () statement should I give to use this plugin ?
I have referred this Question in which 'import { SQLite } from 'ionic-native';
is used , but it is showing error when used.
I'm not sure if you're trying to use sqlite only or some other DB, but I have recently used PouchDB inside my Ionic5+ReactJs+Typescript app, and here is what I did:
Install the necessary packages
npm install pouchdb pouchdb-adapter-cordova-sqlite cordova-plugin-sqlite-2
#types/pouchdb #ionic-native/sqlite
Please note that #types packages are for typescript support.
Create a sample database
import PouchDB from "pouchdb";
import "cordova-plugin-sqlite-2/dist/sqlite-plugin";
import cordovaSqlitePlugin from "pouchdb-adapter-cordova-sqlite";
PouchDB.plugin(cordovaSqlitePlugin);
let sampleDB = new PouchDB("sampleDatabase", {
adapter: "cordova-sqlite",
});
After that you can use the database object directly
sampleDB.post({name: "my first object"});

ionic 4 importing IonInfiniteScroll throws error at compile time as no exported members

I am trying to implement infinite scroll and the import statement like below
import { IonInfiniteScroll } from '#ionic/angular';
shows me a error in the editor that ../#ionic/angular/dist/index has no exported members.
my package.json has
"#ionic/angular": "4.0.0-beta.16",
i realized that this a 11 months old version. updated to 4.11.x and did a clean build and it worked fine

Getting error while adding plugin in app.module.ts

Whenever I am trying to add PhotoLibrary plugin in ionic, I am not able to add it in app.module.ts . I am getting the following error
Type 'PhotoLibraryOriginal' is not assignable to type 'Provider'.
Type 'PhotoLibraryOriginal' is missing the following properties from type 'FactoryProvider': provide, useFactory [2322]
(alias) const PhotoLibrary: PhotoLibraryOriginal
import PhotoLibrary
Please check the below image for full error.
import from /ngx for all latest ionic native plugins used with ionic-angular apps...
import { PhotoLibrary } from '#ionic-native/photo-library/ngx';
Else fallback to version 4.* of plugins

Import Leaflet.awesome-marker in angular/cli component

I want to use the Leaflet.awesome-marker plugin in my angular project.
I installed the package throught yarn and imported in my component using
import * as awesome from 'leaflet.awesome-marker';
But I receive the following error:
Cannot find module 'leaflet.awesome-marker'
Doing the same thing with the geojson module works fine, why not with this one?
Try importing leaflet.awesome-markers, not leaflet.awesome-marker