Importing Granim into Vue - vue.js

Following https://www.npmjs.com/package/granim will not be enough to use Granim with Vue-CLI.
Possible errors:
ReferenceError: Granim is not defined
Module not found: Error: [CaseSensitivePathsPlugin] '\node_modules\Granim\index.js' does not match the corresponding path on disk granim
Have answered below

Usually, as in the case with particles.js you would need to import 'particles.js'.
However in this case you need to import granim from 'granim' and use var granimInstance = new granim instead of var granimInstance = new Granim as per npm snippet.

Related

way to use 'lowdb' in 'express'

Recently, I am trying to make a web page using express, and I am trying to manage login session information and bulletin board data through lowdb.
But when I try to generate and run the code that requires lowdb and controls lowdb,
There is a error with the require syntax with the err_code 'ERR_REQUIRE_ESM'.
When I googled it, it said that it was a syntax compatibility problem between commonjs and ESM, so do I have to convert all other codes to ESM because of one lowdb?
The code below is the code I made to control lowdb.
var low = require('lowdb');
var FileSync = require('lowdb/adapters/FileSync');
var adapter = new FileSync('db.json');
var db = low(adapter);
db.defaults({users:[], topics:[]}).write();
module.exports = db;
I don't want to convert the whole code to ESM because of lowdb, I want to use lowdb through commonjs. Or is there any other good way to handle local db via json file like lowdb?
Use lowdb#1.0.0 and it will work.
npm i lowdb#1.0.0

FullCalendar Angular 13 error when importing npm library

I have an npm library which imports Angular FullCalendar v5 and everything works fine there. When i try to import my project library to another project and try access the full calendar frontend I got a warning and a message error in my browser console:
- Warning: main.js:7358 Unknown option 'default'
- Error: core.mjs:6476 ERROR TypeError: Language ID should be string or object.
at new DateTimeFormat (<anonymous>)
at buildNativeFormattingFunc (main.js:1218)
at NativeFormatter.buildFormattingFunc (main.js:1211)
at NativeFormatter.buildFormattingFunc (main.js:1009)
at NativeFormatter.format (main.js:1154)
at NativeFormatter.formatRange (main.js:1169)
at DateEnv.formatRange (main.js:3984)
at CalendarDataManager.buildTitle (main.js:6909)
at CalendarDataManager.buildTitle (main.js:1009)
at CalendarDataManager.updateData (main.js:7113)
I can't figure it out why but i know it's in this line of code at main.js (#fullcalendar/common/main.js)
Line 1218 -> var normalFormat = new Intl.DateTimeFormat(context.locale.codes, standardDateProps); The error is that the variable context.locale.codes is undefined.
Can anyone help?
I've just had the same error. Not that I was importing a project library of my own but I was importing the Fullcalendar library (from node_modules). I had enabled localization using the locale property of the calendar options but I always got this error Language ID should be string or object.
Two things was wrong:
I was importing the locale code incorrectly which resulted in this error. The current version of Fullcalendar (6.0.0) has all its locale code under #fullcalendar/core/locales.
I was using dynamic import like this: import("#fullcalendar/core/locales/da") and it worked fine but I had to access the default property of the exported object. Using async/await syntax it becomes:
const localeModule = await import("#fullcalendar/core/locales/da");
const calendar = new Calendar(someElement, {
(...),
locale: localeModule.default
});
Not directly answering your question but it sounds like you're using locale, too, and your other project is importing your project library in a way that makes the default property of the module containing the locale code undefined.

cybersource-rest-client These dependencies were not found (Vue.js)

I am trying to create a new app in vue.js. Basically just wanting the same output from cybersource microform node.
https://github.com/CyberSource/cybersource-flex-samples-node
In my vue project main.js
import cybersourceRestApi from '../node_modules/cybersource-rest-client';
var instance = new cybersourceRestApi.KeyGenerationApi(configObj);
I am encountering an error with its dependencies. There's a lot missing but here's first 3 examples
ApiClient in ./node_modules/cybersource-rest-client/src/index.js
api/CaptureApi in ./node_modules/cybersource-rest-client/src/index.js
api/ConversionDetailsApi in ./node_modules/cybersource-rest-client/src/index.js
Error

How to import ErrorUtils in React Native

RN version: 0.50
Testing on Android, haven't tested on iOS
I am trying to use ErrorUtils.setGlobalHandler as described in this github issue: https://github.com/facebook/react-native/issues/1194
However, what is not clear from the issue is how to import ErrorUtils. It's not in the react documentation: https://facebook.github.io/react-native/docs/0.50/getting-started.html
Previously, in RN 0.41, I was able to import ErrorUtils with import ErrorUtils from "ErrorUtils"; However, in 0.50 I am getting a red react popup with the following message when I try to import ErrorUtils like this:
com.facebook.react.common.JavascriptException: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'http://localhost:8081/index.bundle?platform=android&dev=true&minify=false' failed to load.
I've also tried import { ErrorUtils } from 'react-native'; but it doesn't seem to exist there. The error is:
Cannot read property 'setGlobalHandler' of undefined
How do I properly import ErrorUtils in RN 0.50?
ErrorUtils is a global variable, therfore it doesn't need to be imported. You can verify this with console.log(global.ErrorUtils)
However it is exported as module anyways (here). The comment there also has more information why it is done this way.
You can import the module like this:
import ErrorUtils from 'ErrorUtils';
For anyone on RN61+, you should no longer import the module as you will experience the following error in the running metro bundler:
Error: Unable to resolve module `ErrorUtils`
Instead, just use the module without importing as this is a global variable, as stated by leo
I did created a global.d.ts to define a global variable,
interface Global {
ErrorUtils: {
setGlobalHandler: any
reportFatalError: any
getGlobalHandler: any
}
}
declare var global: Global
then, at where you are trying to use it, simply
global.ErrorUtils.setGlobalHandler(xxxx)

import JS (websql) library in Vue

I'm used to use this WebSQL wrapper: https://github.com/psayre23/WebSQL
I want to use this in my Vue project, but I can't get it working. I did the following:
import * as WebSQL from './WebSQL';
var db = WebSQL('test');
Object.defineProperty(Vue.prototype, '$db', { value: db });
also tried:
require('./WebSQL');
var db = WebSQL('test');
Object.defineProperty(Vue.prototype, '$db', { value: db });
But I keep getting:
Can't find variable: WebSQL (WebSQL.js:429)
The repo you have provided is out-of-date. Last update was 5 years ago.
The library is not compatible with webpack.
E.g. this will not work
import * as WebSQL from './WebSQL';
It relies on global availability of WebSQL which is deprecated. As #Ohgodwhy noticed, use IndexedDB instead. If you'd prefer a simple API, try libraries such as localForage, dexie.js, ZangoDB and JsStore that make IndexedDB more programmer-friendly.