exception while importing module in ember js - javascript

I need to remove diacritics from string in emberjs app.
I found a plugin for this: fold-to-ascii
but I don't know how to use it in my app.
I added this plugin via npm and it is visible under node_modules folder in my app
In docs usage of this plugin is:
var foldToAscii = require("fold-to-ascii");
foldToAscii.fold("★Lorém ïpsum dölor.")
but i get an exception:
Uncaught Error: Could not find module fold-to-ascii
also tried importing it like #Kori John Roys suggested:
import foldToAscii from 'fold-to-ascii'
but it gives me only new exception:
Error while processing route: transports.index
Could not find module fold-to-ascii imported from test-ember/pods/transport/model
What am I doing wrong ?

Assuming you are using ember-cli:
npm install --save-dev ember-browserify
then you can import like this:
import foldToAscii from "npm:fold-to-ascii"

Related

Importing a JS npm library in Svelte

I don't understand how to import a random npm library in Svelte.
Take the scrapegoat library for example, a library to read CalDAV objects. I created a brand new Svelte project:
$ npx degit sveltejs/template my-svelte-project
$ cd my-svelte-project/
$ npm install
$ npm install -D scrapegoat
Not sure if it should be added to the devDependencies but it doesn't seem to make a lot of difference if it is not. Now, in the src/App.svelte I add this singe line in the existing <script> tag.
import scrapegoat from 'scrapegoat'
Running npm run dev throws the following error:
[!] Error: Unexpected token (Note that you need #rollup/plugin-json to import JSON files)
node_modules/scrapegoat/package.json (2:9)
1: {
2: "_from": "scrapegoat#^2.0.0",
^
3: "_id": "scrapegoat#2.0.0",
4: "_inBundle": false,
Error: Unexpected token (Note that you need #rollup/plugin-json to import JSON files)
at error (node_modules/rollup/dist/shared/rollup.js:158:30)
at Module.error (node_modules/rollup/dist/shared/rollup.js:12420:16)
at Module.tryParse (node_modules/rollup/dist/shared/rollup.js:12823:25)
at Module.setSource (node_modules/rollup/dist/shared/rollup.js:12726:24)
at ModuleLoader.addModuleSource (node_modules/rollup/dist/shared/rollup.js:22197:20)
This is what I understood from Rich Harris' reply but I am clearly missing something.
The package you’re importing imports its own package.json. Rollup won’t handle JSON imports by default, so you will need to install the json plugin and add it to your Rollup config.

How to use PDF.js (pdfjs-dist) with Svelte

I am working on a svelte application that is using TypeScript. I wanted to implement PDF viewer like pdf.js. I really like this project, so I found an NPM package for it here. I installed the package and tried to import 'pdfjs-dist', I got an error which says:
Could not find a declaration file for module 'pdfjs-dist'. './node_modules/pdfjs-dist/build/pdf.js' implicitly has an 'any' type.
Try npm install #types/pdfjs-dist if it exists or add a new declaration (.d.ts) file containing declare module 'pdfjs-dist';
I tried to install #types/pdfjs-dist, and went well but still facing that error. I don't know why. I also got this repo but wasn't helpful for what I was looking for.
My Imports
<script type = "ts" >
import pdfjs from 'pdfjs-dist';
import pdfjsWorkerEntry from "pdfjs-dist/build/pdf.worker.entry";
</script>
This is because https://github.com/mozilla/pdf.js/ isn't built in Typescript so there are no typings for it. This shouldn't be a problem if you allow it in your typescript project.
--allowJs works for me https://www.typescriptlang.org/tsconfig#allowJs

Angular (4.1.3) ng-select2 Error

I installed ng-select2 package. And I'm getting this error and code is not able to complie after 'ng serve'.
node version is 8.10.0
npm version 6.0.0
List item
OS Windows 7
ERROR in d:/PATH-TO-PROJECT-FOLDER/node_modules/#types/select2/index.d.ts (233,49): 'JQuery' only refers to a type, but is being used as a namespace here.
ERROR in D:/PATH-TO-PROJECT-FOLDER/node_modules/ng-select2/ng-select2/ng-select2.component.ts (188,18): Cannot find name 'Select2Options'.
ERROR in /src/app/pages/dashboard/dashboard.component.ts (91,19): Cannot find name 'Select2Options'.
// Dashboard component ts(91, 19) error + I've also added import to it:
public options: Select2Options;
Solutions I tried are:
As per documentation, added import and also imported in #NgModule to app.module.ts
I've jquery#3.2.1 and #types/jquery#2.0.41 installed as well.
npm cache verify, then npm cache clean --force and updated npm
deleted package-lock.json and then ran npm install
But this doesn't seem to work.
As stated in the github issue:
The interface Select2Options is removed/renamed to Options in the latest version 4.0.45
To resolve this issue, I simply downgrade the package to 4.0.44 by running
npm install # types/select2#4.0.44 --save and this worked for me.
https://github.com/NejcZdovc/ng2-select2/issues/124
I had a similar problem. I installed according to the selected2 documentation. Unfortunately, an error appeared
Error: src/app/app.module.ts:6:33 - error TS2307: Cannot find module './select2' or its corresponding type declarations.
6 import { NgSelect2Module } from './select2';
Although it was in the Initial Chunk Files
Initial Chunk Files | Names
select2.js | select2
I tried your solution but the compiler said it is not a module.
Error: src/app/app.module.ts:6:33 - error TS2306: File 'C:/Users/admin/Documents/WorkspaceAngular/medical-v0.9/node_modules/#types/select2/index.d.ts' is not a module.
6 import { NgSelect2Module } from '#types/select2',
So I installed componenet
npm i ng-select2-component --save
https://www.npmjs.com/package/ng-select2-component
It worked ;-)

Import module in React component for publish on NPM

It's my first React component for publication in NPM. I use react-webpack-component package from Yeoman to start my project. But when I install and import my component to React app, I catch error:
Failed to compile.
Error in ./~/kladrapi-react/index.js
Module not found: [CaseSensitivePathsPlugin] `/develop/myproject/node_modules/kladrapi-react/node_modules/React/react.js` does not match the corresponding path on disk `react`.
# ./~/kladrapi-react/index.js 1:82-98
I'm understand this error, but not understand how correctly import React modules to my component!
Actual version on GitHub
I think there are multiple issues in your code.
In index.html:
#line-- <script src="kladrapi-react.js"></script>
The file name is "kladrapi-react.jsx" not "kladrapi-react.js".
Second issue, here you are expecting "kladrapi-react.js(x)" to be on root level. Which is not the case. According to your folder structure "kladrapi-react.js(x)" file is at ./lib/kladrapi-react.jsx.
Apart from this, in your kladrapi-react.js(x) file you have mixed ES5 and ES6 syntax. You are accessing the variable KladrapiReact in index.html but you haven't exported it as 'KladrapiReact'. I would recommend you to put 'React.createClass....' code in a separate component.
For the error you are receiving you need to use 'case-sensitive-paths-webpack-plugin':
This Webpack plugin enforces the entire path of all required modules match the exact case of the actual path on disk.
npm install --save-dev case-sensitive-paths-webpack-plugin
Usage:
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var webpackConfig = {
plugins: [
new CaseSensitivePathsPlugin()
// other plugins ...
]
// other webpack config ...
}
For more info on this plugin read documentation here.
Module not found: [CaseSensitivePathsPlugin] /develop/myproject/node_modules/kladrapi-react/node_modules/React/react.js does not match the corresponding path on disk react.
# ./~/kladrapi-react/index.js

Using Parse as a module in Angular2

I am new to Angular2 and TypeScript and I am trying to import Parse into my application. So I have installed parse as a node module using npm install parse --save and I can see the parse folder inside the node_modules folder.
Now, in my app.ts file, I am trying the following code but I don't know why is this giving errors.
import {Parse} from 'parse';
It gives the error that it
cannot find the module 'parse'
.
I also tried the following code,
import {} from 'parse'
and it works without errors but I don't know how do I use the Parse object now.
Any help or suggestion is highly appreciated.
Thanks in advance.
I had the same problem (Here is it solved). I put the step by step how i solved it here.
Install Parse component to the project
npm install parse --save
Install Parse types
npm install #types/parse --save
import Parse module
const Parse: any = require('parse');
use Parse module
Parse.initialize("key");
...
Hope it helps;)
You need to declare the parse module so that is recognized by typescript.
You can declare the parsemodule yourself with something like this:
declare module 'parse' {
var parse: any;
export { parse };
export default parse;
}
Or you can use the typing definitions provided by Definitely Typed:
https://github.com/DefinitelyTyped/tsd

Categories

Resources