import js module in js file in vuejs2 - javascript

I've started a project with the new vue-cli 3.0 and I've added the qwery npm module in node package.json
npm i qwery
and in my-file.js which is at same level as main.js I import it the following way:
import {qwery as $q} from "qwery"
The build goes ok however in the browser $q is undefined and webpack has imported it as qwery__WEBPACK_IMPORTED_MODULE_8__.
Clearly I'm not doing it the right way can somebody give me a hint what I'm doing wrong?

You need to import it like this
import $q from 'qwery';

Related

How do I get my react js app to start watching my sass files?

How do I get my react js app to start watching my sass files?
I did npm i sass vs npm i node-sass because I learned that node-sass is depreciated, I'm not sure if that has anything to do with automatic sass watching? (also, I have the latest version of node installed)
I know when you're not using a framework you have to type into the terminal " sass --watch input.scss output.css.", do I have to do the same in react js?
Also in my components I have imported the main.scss sheet!
this is the error I get when I try to run my react js app:
Failed to compile
./src/components/Login.js
Module not found: Can't resolve './scss/main.scss' in '/Users/karinapichardo/Desktop/login-project/src/components'
what am I missing to do? any help would be greatly appreciated
You are trying to import the SCSS file from the directory where Login.js is.
You should modify your import path to be like this:
import "../scss/main.scss"; // 2 dots at start of path
instead of like this:
import "./scss/main.scss";
Which will essentially navigate to the src directory before accessing the rest of the path

How to integrate javascript libraries into react?

I have two javascript libraries that I need to integrate into my React app. First I tried this:
import d3 from "https://d3js.org/d3.v4.min.js"
import techan from "http://techanjs.org/techan.min.js"
That produced error:
./src/components/CandlestickChart/CandlestickChart.jsx Module not
found: Can't resolve 'http://techanjs.org/techan.min.js' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I went to http://teckanjs.org/techan.min.js, copied the code, ran it through a beautifier, and saved it to techan.js, located in the same folder as CandlestickChart.jsx. I changed import to
import techan from "./techan.js"
Then I got similar error:
./src/components/CandlestickChart/CandlestickChart.jsx Module not
found: Can't resolve 'http://techanjs.org/techan.min.js' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I did the same thing as with the other one and changed the import to:
import d3 from "./d3.v4.js"
Then I got error:
./src/components/CandlestickChart/d3.v4.js Module not found: Can't
resolve './requirejs' in
'C:\Users\Greg\Projects\react-demos\my-react-splitter-layout\src\components\CandlestickChart'
So I found requirejs online and did the same thing as the others and added an import to d3.v4.js like this:
import requirejs from "./requirejs";
But still getting the same error. What's the trick to this?
Install it as a local package. Run the following:
npm install d3
Then you'll be able to import it in your JavaScript:
import * as d3 from "d3";
Note the "d3", not the "./d3" - the lack of the ./ indicates that you want to install from a module package, not from a file in the same directory.

Injecting a module into angular as module not found

I can't seem to inject a module into my angular app.
I am trying to import the following module which is installed through bower using:
bower install angular-pagedown --save
This seems to load fine within the bower-components folder which is in the following folder structure:
clinet
------app
---------bower-components
-------------------angular-pagedown
-------------------pagedown
When I try inject the module as it says in the instructions using 'ui.pagedown' which is indeed the name of the module, I use the following code in app.js:
import _Auth from '../components/auth/auth.module';
import account from './account';
import admin from './admin';
import navbar from '../components/navbar/navbar.component';
import footer from '../components/footer/footer.component';
import main from './main/main.component';
import questionsCreate from
'./questionsCreate/questionsCreate.component';
import questionsShow from './questionsShow/questionsShow.component';
import constants from './app.constants';
import util from '../components/util/util.module';
import socket from '../components/socket/socket.service';
import './app.scss';
angular.module('filQuestionsApp', [ngCookies, ngResource, ngSanitize,
'btford.socket-io', uiRouter,
uiBootstrap, _Auth, account, admin, 'validation.match', navbar,
footer, main, questionsCreate,
questionsShow, constants, socket, util, 'ui.pagedown'
])
I seem to get the following error when trying to use the module:
Module 'ui.pagedown' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
I seem to be doing something really wrong with bower and angular together, I'm also getting 400 errors in terms of formatting and I'm not sure on the injection process.
How angular-pagedown work:
bower install angular-pagedown --save
This will also install pagedown dependencies.
Import these files in your HTML:
pagedown/Markdown.Converter.js
pagedown/Markdown.Sanitizer.js
pagedown/Markdown.Extra.js
pagedown/Markdown.Editor.js
angular-pagedown/angular-pagedown.js
angular-pagedown/angular-pagedown.css
If you're using a build tool like grunt/gulp's main-bower-files, you don't need to import the files manually.
But add this in your bower.json
"overrides": {
"pagedown": {
"main": [
"Markdown.Converter.js",
"Markdown.Sanitizer.js",
"Markdown.Extra.js",
"Markdown.Editor.js",
"wmd-buttons.png"
]
}
}
Include dependency in your app angular.module("yourApp", ["ui.pagedown"]);

How to import node module with SystemJs?

I started to use SystemJs. I don't find exact example about how to import a node module? How could I configure SystemJs and how to import this. Because after npm install import 'package-name' from 'package-name'; it could not find the module.
It would be great if somebody would write an example.
Thank you
Try something like:
import nodeModule from '#node/node-module-name' [1]
[1]

How to import Tesseract into Angular2 (TypeScript)

I'm trying to import Tesseract into Angular2 (TypeScript). I can see it saved into the node_modules folder but when using
import { Tesseract } from '#types/tesseract.js';
it says:
[ts] Module '"c:/Users/black/Projects/projectCLI/tess/node_modules/#types/tesseract.js/index"' has no exported member 'Tesseract'.
In the index.d.ts file there is a namespace called Tesseract.
Is there some other way to import this or are we looking at this the wrong way?
I used npm install --save-dev #types/tesseract.js to install typescript Tesseract.
If there are any demo tutorials using tesseract can you please link them here?
thanks, in advance, for your help.
You need to install the actual javascript module:
npm install tesseract.js --save
Also install #types declarations:
npm install #types/tesseract.js --save-dev
Finally do the folowing to import:
import * as Tesseract from 'tesseract.js'
To use the library check here
The #types command saves this type declaration file.
This is a namespace and all the contents of the actual module are declared within.When you do import * as aliasname from tessreact.js, you can use all the functions within the namespace as aliasname.functionname. Example is the test file for the same type declaration file.

Categories