Importing an ES6 module using jspm & using in Aurelia - aurelia

I'm trying to use the querystring package in an Aurelia application but getting Cannot read property 'stringify' of undefined error in the browser console.
These are the steps I took:
Install using jspm install querystring
Add import {querystring} from 'querystring' into the Aurelia model
Use in my model like so:
import {querystring} from 'querystring';
export class App {
criteria_words;
criteria_location;
constructor() {
}
submit() {
console.log(querystring.stringify(this));
}
}
What step am I missing?

First, jspm install querystring will not install the library that you have mentioned. The command that you should run is this:
jspm install npm:qs
Then, you can import and use it like this:
import querystring from 'qs';
// call querystring.stringify(someObject);
Or
import {stringify} from 'qs';
// call stringify(someObject);

Related

How does one import an npm module into a Vue.js application?

I would like to import pdf-lib into my vue.js application.
Installed using npm
npm install --save pdf-lib
Imported into my component like this,
import _ from "#pdf-lib";
export default {
data() {
I get the following error message,
Module not found: Error: Can't resolve 'pdf-lib' in

Can't import #fullcalendar in vue.js

import FullCalendar from '#fullcalendar/vue'
throws
../../ullcalendar/vue in ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}],["babel-plugin-root-import",{"rootPathPrefix":"#","rootPathSuffix":"./resources/assets/js"}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/views/main/Dashboard.vue
Try '#/fullcalendar/vue' you need the have slash / after the # you can even do ../fullcalendar/vue or ./fullcalendar/vue depends on where your file is located. If that doesn't solve the problem check your package json if you have downloaded the fullcalendar and put the FullCalender into the components. But first look if you have installed the fullcalendar if not the a npm install once again.
export default {
components: {
FullCalendar
}
}

Validation in vue js using vee-validate having error

I want give the validation in vuejs for that i am using vee-validate
My vue js version is 2.6.10
And install run -npm install vee-validate
I declare in main.ts:
import VeeValidate from "vee-validate";
Vue.use(VeeValidate);
But having error:
"export 'default' (imported as 'VeeValidate') was not found in 'vee-validate'
And also on console:
Cannot read property 'install' of undefined
at Function.Vue.use
import * as VeeValidate from 'vee-validate';
that resolve the problem
this seems to happen in any version after 3.0. I installed vee-validate#2.2.15 and it worked.
Since the newsest release, it's name had changed, now if you want to call it, and you register it :
import { ValidationProvider } from 'vee-validate';
// Register it globally
// main.js or any entry file.
Vue.component('ValidationProvider', ValidationProvider);
Of course, you can check the Npm package documentation on : https://www.npmjs.com/package/vee-validate
To install it, Run
npm i vee-validate --save

Import a node module in Vue.js CLI instance

I've created a new vue app using vue init webpack sample-app .
I'm trying to import this module (https://docs.botui.org/install.html) into my app.vue and make it show on.
What's the correct way to import this module into a Vue.JS app?
Open the terminal in your project root folder, then install the package:
npm install botui --save
Then open src/main.js in your text editor and add this:
import Vue from 'vue'
import BotUI from 'botui'
const botui = BotUI('my-botui-app', {
vue: Vue // pass the dependency.
})
This will create a botui instance. But that instance won't have any messages in it. You can check that it's working by adding a message:
botui.message.bot('Hello, how can I help?')

ExpressJS in a TypeScript class

All ExpressJS and TypeScript examples I could find use
import * as express from "express";
let app = express();
app.use("/", express.static("/"));
However, I want to use the class approach:
import * as express from "express";
export class ServerApp {
private app: express.Express = express();
public configure {
this.app.use('/', express.static("/");
}
}
Trying to access the use method on the private variable gives an argument type warning.
I want to use strong typing so private app: any will not work. How can I solve this problem, or is there a better approach?
According to the latest express typings, the type for app is called Application, not Express. The following file test.ts compiles just fine
import * as express from "express";
export class ServerApp {
private app: express.Application = express();
public configure() {
this.app.use('/', express.static("/"));
}
}
if you put it in an empty directory and do
npm install typescript
npm install typings
./node_modules/.bin/typings install -G dt~node
./node_modules/.bin/typings install express
./node_modules/.bin/tsc test.ts typings/index.d.ts
it will work.
However, there is more than one way to install typings for express. If you don't need compatiblity with typescript < 2.0 (2.0 was released a few days ago), you can just
npm install typescript
npm install #types/express
./node_modules/.bin/tsc test.ts
and again it will work. If you look at installed types-metadata.json for express-serve-static-core, you notice that it uses types-2.0 branch of DefinitelyTyped:
"sourceRepoURL": "https://www.github.com/DefinitelyTyped/DefinitelyTyped",
"sourceBranch": "types-2.0",
The third way to install is
../node_modules/.bin/typings install -G dt~express
this will take it from the main branch of DefinitelyTyped, which, as #Aphelion discovered, contains problematic commit that removes a number of use overloads, causing the error in question.