As soon as I add the QrScanner module to my Ionic App i just get a plain white screen.
I installed the Plugin by running the following two commands:
$ ionic cordova plugin add cordova-plugin-qrscanner
$ npm install --save #ionic-native/qr-scanner
After that i added it to my AppModule:
#NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
QRScanner
],
bootstrap: [AppComponent]
})
export class AppModule {}
As soon as i remove the QRScanner from my providers, the app shows the content it should display. I am using a blank ionic app with Ionic4.
I even tried a tutorial but i haven't been successful
https://medium.com/#piashsarker/native-qr-scanner-implementation-in-ionic-6e1ef01335ea
I tested it and on ionic3 with this tutorial it works.
So my answer: use ionic3
Related
See EDIT below for steps to reproduce.
I am trying to generate sourcemaps for a production build for the HelloWorld App for Vite+Vue. Unfortunately it does not show all the components (only shows the WelcomeItem component). See snaphot from chrome devtools below:
When you inspect the sourcemap files, you see that it does not add App.vue, Helloworld.vue and TheWelcome.vue to sources:
{
"version": 3,
"file": "index-ecfc4d4f.js",
"sources": [
"../../node_modules/#vue/shared/dist/shared.esm-bundler.js",
"../../node_modules/#vue/reactivity/dist/reactivity.esm-bundler.js",
"../../node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js",
"../../node_modules/#vue/runtime-dom/dist/runtime-dom.esm-bundler.js",
"../../src/assets/logo.svg",
"../../src/components/WelcomeItem.vue",
"../../src/components/icons/IconDocumentation.vue",
"../../src/components/icons/IconTooling.vue",
"../../src/components/icons/IconEcosystem.vue",
"../../src/components/icons/IconCommunity.vue",
"../../src/components/icons/IconSupport.vue",
"../../src/main.js"
],
"sourcesContent": [ ...
], ...
}
The dev mode is working OK, I can see my source code.
Here is my config. All I did was add build.sourcemap=true.
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'#': fileURLToPath(new URL('./src', import.meta.url))
}
},
build: {
sourcemap: true
}
})
EDIT: Steps to reproduce
npm init vue#latest
// pick No everywhere
cd vue-project
npm install
// add build.sourcemap = true in the vite.config.js file as shown above
npm run build
npm run preview
I have observed that if you add any code to the script tag in the component App.vue (other than components' imports), then it will appear in the sourcemaps.
App.vue file:
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
console.log("Test");
</script>
...
I hope it works for you too ^^
I have a nuxt 3 project that is working fine on localhost while developing. I use FormKit and vue-toastification and everything is fine on "npm run dev".
But once I run npm run build to build it for deployment. lots of stylings are missing. Mainly those two plugins. the error messages for the forms by FormKit aren't red and not styled. vue-toastifications display with full height and width of the screen as it has no styling.
would I do any extra steps before running npm run build? like building these plugins or something?
this is my nuxt.config.ts file if it might help!
// #ts-nocheck
import Icons from "unplugin-icons/vite"
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
css: ["~/assets/fonts/droidkufi/droidarabickufi.css", "#formkit/themes/genesis"],
modules: [
"#nuxtjs/tailwindcss",
[
"#pinia/nuxt",
{
autoImports: ["defineStore"],
},
],
"#formkit/nuxt",
],
plugins: ["~/plugins/flowbite.client.ts", "~/plugins/i18n.ts"],
vite: {
plugins: [
Icons({
autoInstall: true,
}),
],
},
runtimeConfig: {
// secret serverside variables
public: {
// baseURL: "http://127.0.0.1:8000/api/",
// apiBase: "http://127.0.0.1:8000/api/",
// homeBase: "http://127.0.0.1:8000",
baseURL: "https://sju.davidlouis.co/api/",
apiBase: "https://sju.davidlouis.co/api/",
homeBase: "https://sju.davidlouis.co",
},
},
vue: {
compilerOptions: {
isCustomElement: (tag) => ["datepicker-hijri"].includes(tag),
},
},
})
I tried to run npm run dev back to test if styles are working. and yes they are working fine. the problem starts when I run npm run build for production and deployment.
I had to manually upgrade from 3.2 to 4.2 and because I am developing a Angular library, I could not use the schematics to perform the update.
I have got it working on the development build. We are developing a feature library that targets the checkout (Payment Page and Order Confirmation Page) and it works fine.
With the production build (ng build --configuration production), the payment page works fine, but the Order Confirmation page is not working. it complains that orderCore feature is not configured properly.
Note: we are being redirected from an external site, back to the order confirmation page (after authorization). When the page loads, it shows the following error in the log and show a broken my account page.
core.js:6498 ERROR Error: Feature orderCore is not configured properly
at FacadeFactoryService.getResolver (spartacus-core.js:24825)
at FacadeFactoryService.create (spartacus-core.js:24867)
at facadeFactory (spartacus-core.js:24898)
at orderReturnRequestFacadeFactory (spartacus-order-root.js:13)
at Object.factory (spartacus-order-root.js:37)
at R3Injector.hydrate (core.js:11457)
at R3Injector.get (core.js:11276)
at NgModuleRef$1.get (core.js:25352)
at Object.get (core.js:25066)
at lookupTokenUsingModuleInjector (core.js:3354)
Anyone has an idea if we are missing some configuration in the feature modules?
import { NgModule } from '#angular/core';
import { checkoutTranslationChunksConfig, checkoutTranslations } from '#spartacus/checkout/assets';
import { CHECKOUT_FEATURE, CheckoutRootModule } from '#spartacus/checkout/root';
import { CmsConfig, I18nConfig, provideConfig } from '#spartacus/core';
#NgModule({
declarations: [],
imports: [
CheckoutRootModule,
],
providers: [provideConfig({
featureModules: {
[CHECKOUT_FEATURE]: {
module: () =>
import('#spartacus/checkout').then((m) => m.CheckoutModule),
}
},
} as CmsConfig),
provideConfig({
i18n: {
resources: checkoutTranslations,
chunks: checkoutTranslationChunksConfig,
},
} as I18nConfig)
]
})
export class CheckoutFeatureModule {
}
My colleague has provided a proposal:
If you want to use Spartacus Order library, you need to create "order-feature.module.ts" for it. And by default core is bundled together with components. So, in your configuration, you need have this set: "[ORDER_CORE_FEATURE]: ORDER_FEATURE". So, the config is something like this:
const config: CmsConfig = {
featureModules: {
[ORDER_FEATURE]: {
cmsComponents: [
....
],
},
// by default core is bundled together with components
[ORDER_CORE_FEATURE]: ORDER_FEATURE,
},
};
I'm integrating jqxWidgets(https://www.jqwidgets.com/vue/) into my nuxtjs app.
Here are the steps I did:
installed jqwidgest npm install --save jqwidgets-scripts
After I imported the jqxGrid on my page import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue"; I received an error for document is not defined.
I created a plugin jqwidgets.js and added the following code:
import Vue from 'vue'
import jqGridWidget from "jqwidgets-scripts";
Vue.use(jqGridWidget)
in nuxtconfig.js I added the following in plugins:
plugins: [{src: "~/plugins/jqwidgets.js", ssr: false}]
and in build I added:
build: {
extend(config, ctx) {
},
transpile: [/^jqwidgets-scripts($|\/)/],
}
I am still getting the document is not defined error in node_modules/jqwidgets-scripts/jqwidgets/jqxcore.js
Does anyone know how to fix this?
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.