I did an Ionic App for Windows desktop 10 tablet. It consists two pages, main to read DB and click on the button to read NFC page.
When I build the app the got the error below.
After installing the plugin
ionic cordova plugin add phonegap-nfc
npm install --save #ionic-native/nfc
you need to add it to the providers array of you App's module (app.module.ts):
...
import { NFC } from '#ionic-native/nfc';
...
#NgModule({
...
providers: [
...
NFC, // <----- like this!
...
]
...
})
export class AppModule { }
Related
I try to get an image into my prjoject via Astro/Image. The "normal" works fine but not with the component of .
I did the import :
import { Image, Picture } from "#astrojs/image/components";
...
<Image src={import('../src/images/neu/about.jpg')} width={300} alt="test"/>
I did the astro.config.mjs:
import { defineConfig } from 'astro/config';
// https://astro.build/config
import image from "#astrojs/image";
// https://astro.build/config
export default defineConfig({
site: 'https://juni-test.de',
integrations: [image()]
});
and I get this Error while dev-server shuts down:
PS C:\Users\rober\Projekte\JuniKaefer> npm run dev
> #example/basics#0.0.1 dev
> astro dev
astro v1.9.2 started in 205ms
┃ Local http://localhost:3000/
┃ Network use --host to expose
node:internal/process/promises:288
triggerUncaughtException(err, true /* fromPromise */);
^
[UnhandledPromiseRejection: This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). The promise rejected with the reason "fetch failed".] {
code: 'ERR_UNHANDLED_REJECTION'
}
Node.js v18.13.0
So I think there is a problem to fetch the Image but the Image exists. No idea what to do.
Thanks for your help.
Astro 1.9.2 does not support Node 18, you either have to downgrade your Node version or upgrade Astro to the new 2.0 beta using the command npm i astro#beta (Astro 2.0 officially releases in 5 days on 01/24/23)
also I think the import path is invalid, assuming your on the index page src/pages/index.astro and your images are located in src/images, the import path should be
import('../images/neu/about.jpg')
I am building a Nuxt3 app and trying to integrate Cypress. As I'm aware Nuxt3 uses Vite instead and not babel, I was trying to instrument the project code using vite-plugin-istanbul npm package.
Here's my nuxt.config.ts after installing vite-plugin-istanbul package:
vite: {
vue: {
template: {
transformAssetUrls: true
}
},
plugins: [
istanbul({
exclude: ['node_modules', 'test/', 'coverage/'],
extension: [ '.js', '.ts', '.vue' ],
cypress: true
}),
]
},
When I'm trying to run the server using npm run dev and visit the localhost URL, the following error is thrown at terminal:
[nuxt] [request error] [unhandled] [500] window is not defined
at cov_1291n0zka8 (./.nuxt/dist/server/server.mjs:3623:191)
at $id_Sv05hbOoTf (./.nuxt/dist/server/server.mjs:3624:75)
at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:40418:3)
It seems the plugin is instrumenting the server-side rendered code and window object isn't defined there. I need to have SSR enabled in my app and I'm not sure of how to handle this error.
This issue has been resolved by the plugin authors.
TLDR version
Just update the vite-plugin-istanbul package to the latest version and the issue should get resolved.
Long version
There are two parts to this error:
The package was originally configured to transform all the files. The plugin authors have now added a condition that checks whether the SSR has been enabled or not. This is done via options.ssr property within the transform function. Please upgrade to the latest version of vite-plugin-istanbul. The plugin no longer instruments the SSR files, hence the window object error no longer exists in there. Follow this thread if you need more details.
After getting this error resolved, I was still facing another issue where the code instrumentation was impacting the proper app compilation and throwing a hydration mismatch error. The plugin authors came to the rescue again and fixed this error. Please upgrade to the latest version of vite-plugin-istanbul. Follow this GitHub thread if you need more details.
The package authors are really awesome and helpful. It's great to see such people in the open source community!
I'm trying to use the aws-amplify node package in my mini-programs project. However, when I try to run import Amplify, {API} from 'aws-amplify, I get the following error:
Can't reexport the named export 'package_name' from non EcmaScript module (only default export is available)
I have tried to depreciate the npm package aws-amplify to a older version as Mini-Programs run on the previous version of NodeJS.
After doing some research on the issue, I found a solution that recommended to add the '.mjs' extension to the webpack.js config file. However, being sub-app on the VodaPay environment - I don't have access to the webpack.js file.
resolve: {
extensions: ['.mjs', '.js', '.jsx', '.css', '.scss'],
modules: [
path.resolve(__dirname, 'src'),
'node_modules',
],
},
Some npm packages are not compatible with mini programs due to them not having access to the DOM.
The AWS amplify package isn't compatible because of this. It makes use of the fetch() JavaScript function which isn't supported in the mini programs.
By just importing the package into an empty mini program I get this error in the console:
TypeError: Cannot read property 'fetch' of undefined
I'm building an internal tool in Laravel and I need a datetime picker for part of the interface. My research has suggested that Tempus Dominus is the solution most people use to solve this.
I've installed Tempus Dominus and Moment (through Node) and added them both to my app.js file. However when I try to compile the JS I get the following warning:
WARNING in ./node_modules/moment/min/moment.min.js
Module not found: Error: Can't resolve './locale' in 'C:\inetpub\wwwroot\salesdb\node_modules\moment\min'
# ./node_modules/moment/min/moment.min.js
# ./resources/js/app.js
# multi ./resources/js/app.js ./resources/sass/app.scss
This is how I'm importing them in the app.js file:
require('moment/min/moment.min.js');
require( 'tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.js');
What am I missing?
The official Tempus Dominus Bootstrap plugin is unmaintained and is kinda buggy when it comes to ES6 and module bundlers.
I strongly advise you to install these two forks instead:
https://www.npmjs.com/package/tempusdominus
https://www.npmjs.com/package/tempusdominus-bootstrap
npm i tempusdominus tempusdominus-bootstrap
If you wanna make it work, you should inject/provide moment and jquery imports in the final build of your application (1st option), or make them globally available (2nd option).
1st option
What is your module bundler?
E.g., if you are using Rollup, you can configure the build like this using the Rollup's #rollup/plugin-inject plugin:
// Your imported plugins...
import inject from "#rollup/plugin-inject";
export default {
input: "src/index.js",
output: [
// You outputs...
],
plugins: [
inject({
$: "jquery",
jQuery: "jquery",
moment: "moment",
exclude: "src/**",
}),
// Your other Rollup plugins here...
],
};
For Webpack, you'd need to use the ProvidePlugin:
const webpack = require('webpack');
module.exports = {
entry: './index.js',
output: {
filename: '[name].js'
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
moment: 'moment'
})
]
};
2nd option
The other option would be to make moment and jQuery globally available in your app by adding the following lines to your index.js main entry point file:
import moment from "moment";
import $ from "jquery";
window.$ = window.jQuery = $;
window.moment = moment;
// Your other imports (tempusdominus-bootstrap as well) go here...
Though I didn't test, both options should work (let me know if not).
Of course, the preferred one would be to use a module bundler (1st option) and not to expose jQuery and/or moment to window.
And if you are using React, I advise you to use this library here instead (demo here). But that's another story.
How can I use the web3.js library (for Ethereum development) in NativeScript?
I tried:
install web3 via npm install web3#0.20.7 --save
install web3 through plugin manager in sidekick
even tried const Web3
=require('https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js');
also tried const Web3 = require("./web3.min.js"); with the web3.min.js file in the folder, but then console.log(Web3) just prints an empty array.
Also, I added the NativeScript plugin nativescript-nodeify
In the first three cases, I get an exception saying (amongst others) "Calling js method onCreate failed"
Note: I explicitly do not want to go via a back end to handle the interaction with Ethereum
I've been unable to make web3js work with NativeScript indeed. It looks like it is impossible, as web3 will use the browser to communicate with metamask for example.
Nervetheless, there may be a solution, using eth.js :
// in your root project directory
// NOT with nativescript sidekick !
npm install --save ethjs
tns plugin add nativescript-nodeify
// then, in your code
require("nativescript-nodeify");
const Eth = require('ethjs');
Then, you can interact with ethereum blockchain.
EDIT: The TNS plugin name is nativescript-nodeify