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
Related
I am using material-ui in react with typescript template. All of my code is working fine but I am getting this error on multiple lines (not an error warning but with red line as my code renders)
Could not find a declaration file for module 'react/jsx-runtime'. 'C:/Users/dell/Desktop/Web current Projects/typescript/card/node_modules/react/jsx-runtime.js' implicitly has an 'any' type.
If the 'react' package actually exposes this module, consider sending a pull request to amend 'https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react`ts(7016)
As per #NearHuscarl's comment, a quick fix is to create your own declaration module for react/jsx-runtime. You can do this by opening the react-app-env.d.ts file (created by default when you use create-react-app), found in your project's root directory. Then add the following script to it:
declare module "react/jsx-runtime" {
export default any;
}
The create-react-app team don't believe this is an issue for create-react-app to solve, and suggest it's a problem with typescript version 4. So alternatively you can downgrade your typescript version until the typescript team provide a fix in a later version.
Try restarting vscode and see if it got fixed
When you have this error, it is usually because you installed a library and you didn't install the types of that library.
To fix this error, you need to install #types/library-name using your package manager (npm or yarn).
Came across this when trying to use create-react-app with typescript.
What solved it for me was changing the following file:
react-app-env.d.ts
/// <reference types="react-scripts" />
declare module 'react/jsx-runtime' {
const content: string;
export default content;
}
use yarn for manage package.
run this command
yarn install
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
What is the proper workflow to include the library to angular 4.0 and use it inside a component?
My steps:
yarn add mathjs
Then there should be a way to injects js libraries in one of the build lifecycles so the angular4 component can use it. JHipster utilizes Webpack and Yarn.
Then I tried to add to Component (docs):
import { mathjs } from "./mathjs";
and
var math = require('mathjs');
Those were not working. What am I missing?
UPDATE:
It seems like mathjs uses older approach suggesting var math = require('mathjs'). Maybe it is similar to JQuery question in some way...
UPDATE2
This is a great question and I'm glad you ask because I wish I had what I'm about to write the first time I encountered this little problem. This is a typescript/javascript and webpack issue before it is an angular issue. I definitely am planning a writeup on my blog soon as possible.
Your Scenario:
You run
npm install mathjs
Now you try to use math.js from a component:
Find math.js dist js file (node_modules/mathjs/dist/math.js) and reference like this
import {mathjs} from "../../node_modules/mathjs/dist/math";
But you get error message saying "set --allowJS". You do that like this:
Set --allowJS in config (tsconfig.json)
{ "compilerOptions": {
"allowJs": true, ...
Now you get:
ERROR in ../node_modules/mathjs/dist/math.js (12209,13): Unreachable
code detected.
Looking in the math.js source, you see that it is an old school module but there is no root wrapper function (one function to bring them all and in the darkness bind them..) (more on that later).
Solution: install a typings file for the target lib (#types/mathjs)
First, check to see if you can get #typings files for your module here
https://microsoft.github.io/TypeSearch/
Grab mathjs typings file from npm (https://www.npmjs.com/package/#types/mathjs) and Run npm install to add the typings .d.ts files to the target lib's node_modules directory
npm install --save #types/mathjs
Add your type ref correctly
import * as mjs from "mathjs"
Use it like this:
console.log("e was: " + mjs.e);
I have the complete solution for the math.js lib on my github here
https://github.com/res63661/importOldJSDemoWithTypings/
More:
For examples look no further than your own angular project. CLI creates node_modules folder each time you run npm install after creating a new project with ng new . Dig down into here and note the d.ts files for many of the .js files.
When messing with typings or defining your own (.d.ts files) be sure to restart your server between builds as the typings don't seem to update currently on the fly
Further reading:
http://www.typescriptlang.org/docs/handbook/declaration-files/consumption.html
https://angular.io/guide/typescript-configuration#typescript-typings
https://microsoft.github.io/TypeSearch/
Lastly:
If you are in a pinch and this is not working for you, I did have success creating a custom wrapper for a different (much smaller) module by wrapping it in a master export type
export var moduleNamer = (function(){
//module implementation
}());
then dumping the .js file local to my component and then referencing it as follows:
//reference like this from your component:
import {moduleNamer} from "./source"; //from source.js
--rich
I did this way and it worked for angular9.
First install npm package mathjs.
npm install mathjs
Then import in your component or directive.
import { round } from 'mathjs'
You may test with this.
console.log(round(math.pi, 3) )
Try to include the script into index.html:
<script src="./assets/math.js" type="text/javascript"></script>
Then add this into your component file:
declare const math;
You can then use math in your component:
ngOnInit(): void {
console.log(math.sqrt(-4););
}
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
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"