Leaflet area select in Angular - javascript

I'm trying to use leaflet-area-select plugin in an Angular9 project, but I have a problem with it's usage.
Everytime I call this.map.selectArea VSCode tells me that property 'selectArea' does not exist on type 'Map'. How can I fix this?
I've installed leaflet-area-select with npm install --save leaflet-area-select and imported it in a component by using import { SelectArea } from 'leaflet-area-select';
Shall I do something else? The plugin documentation seems to be unclear about this.

I just ran into this issue and managed to fix it by changing the import reference from import { SelectArea } from 'leaflet-area-select'; to import 'leaflet-area-select';

Related

Could not find a declaration file for module 'react/jsx-runtime'

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

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 import external javascript file, getting no exported member and compile errors

I am writing an angular component and got a open source module working with npm install. Now I made some some changes and want to import the javascript file like so
import { ModuleName } from './../../ModuleFolder/ModuleName';
When I place the cursor above the ModuleName inside the bracket, I see the highlighted red error saying Module has not export member 'ModuleName';
In my ts code, I have referenced the Module like so
object: ModuleName; which is also complaining.
I google and the post says using npm install but I don't want to add this module to my node_module list. I am moving the folder out to make my customization.
I also tried the following but it is not working
import './../../ModuleName.bundle.min.js';
I am wondering does the name of the Module needs to be registered somewhere to be able to reference it in my component?
Thanks for any help.
Use 'declare' after the import statements
declare const _moduleName;
For example:
I am using Swiper.js library using cdn. In my angular component, I refer it using a declare keyword.
declare const Swiper;
var mySwiper = new Swiper('.swiper-container', { /* ... */ });
I got external libraries working in Angular by following the following links
https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

iView not defined error while trying to import it

I'm trying to import iView UI on my VueJS project with Webpack inside main.js.
import iView from 'iview'
Then:
Vue.use(iView)
And console shows up an error saying
Uncaught ReferenceError: iView is not defined
I added iview plugin by doing npm i iview -D on my project.
Why this isn't working? Any ideas? Maybe some package.json issues? whenever i run npm run dev it compiles everything fine, no errors, no warnings.
Okay, after some hours of attempts, I found out I had two ways of including this lib.
By either doing:
import iView from 'iview/dist/iview'
This one would throw a warning about types not defined for this, but if you do it like so:
const iView = require('iview')
It will work like a charm! Hope this helps to anyone who's under the same situation I was.

TypeScript import class from another project / module?

I am trying to alter the following build task written in Typescript in the following project:
https://github.com/Microsoft/app-store-vsts-extension/blob/master/Tasks/app-store-promote/app-store-promote.ts
I need an import like the one shown below (or something else that lets me uses the methods in the ios-signing-common module):
import sign = require('ios-signing-common/ios-signing-common');
That import is used in another file in another project:
https://github.com/Microsoft/vsts-tasks/blob/master/Tasks/XamariniOS/xamarinios.ts, however that project is also the same as the ios-signing-common exists in.
https://github.com/Microsoft/vsts-tasks/blob/master/Tasks/Common/ios-signing-common/ios-signing-common.ts
So is it possible to import the ios-signing-common module into the app-store-promote file?
I have tried adding the github path "Microsoft/vsts-tasks" as dependency in package.json, and it downloads it to node_modules, but I still can't resolve the ios-signing-common module.
I hope that any of you can lead me to a solution. :)
I guess I just needed to read up on how module resolving works.
I solved it by adding vsts-tasks as dependency in package.json:
"dependencies": {
"vsts-task-lib": "^0.9.7",
"vsts-tasks": "Microsoft/vsts-tasks"
},
Then I changed the require path to the following:
import sign = require('Agent.Tasks/Tasks/Common/ios-signing-common/ios-signing-common');
And it works!
EDIT - It could compile, but doesn't seem to work when I run it. It fails in the script because it can't find Agent.Tasks/Tasks/Common/ios-signing-common/ios-signing-common.

Categories

Resources