TypeScript | Jquery cant be imported

Question

so im new on TypeScript and i need your guys help. im trying to build a module with typescript that does api calls that im later adding to my main project. so i was doing first with get requests with ajax. But i got this:

(node:1588) UnhandledPromiseRejectionWarning: TypeError: $.ajax is not a function

This is my Typescript File:

import * as $ from 'jquery'

class RedditJuice {

    afterbeforeStorage:Array<string>;
    totalPage:number
    currentPage:number


    constructor() {
        this.afterbeforeStorage = []
        this.totalPage = 0
        this.currentPage = 0


    }
    fetchRedditFeed = async (afterTag:string, beforeTag:string) => {
        return new Promise<JSON>((resolve, reject) => {
            console.log("yey")
            if(afterTag == null || undefined || "" && beforeTag == null || undefined || ""){
                var url:string = "https://reddit.com/.json"
            }
            else if(beforeTag != null|| undefined || ""){
                var url:string = "https://reddit.com/.json?after=" + afterTag
            }
            else {
                var url:string = "https://reddit.com/.json?after=" + afterTag + "?before=" + beforeTag
            }
            $.ajax({
                url: url,
                type: "GET",
                success: function(getData){
                    console.log(getData.data)
                    resolve(getData.data) 
                },
                error: function(err){
                    reject(err)
                }
            })
        })
    }


    fetchPostComments = async (permalink:string) => {
        return new Promise<JSON>((resolve, reject) => {
            var comment_fetch_url = "https://reddit.com" + permalink + '.json?limit=10'
            $.ajax({
                type: "GET",
                url: comment_fetch_url,
                success: function(data) {
                    resolve(data[1].data)
                },
                error: function(err){
                    reject(err)
                }  
            })
        })
    }
}

const rApi = new RedditJuice() 

console.log(rApi.fetchRedditFeed("", ""))

On the buttom of the file im trying to use the class but then i get the mentioned error... And yes im running the .js file that is compiled by tsc. I also ofc installed jQuery with npm (@types/jquery)

Thanks for your support ^____^

Deadron · Accepted Answer · 2021-09-16 17:11:33Z

1

Are you executing this in a browser or in the nodejs vm either as a test or directly? jquery uses the XMLHttpRequest supplied by the browser environment to implement its ajax functionality and when it is unavailable it won't work.

answered Sep 16, 2021 at 17:11

Deadron

5,2891 gold badge18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CruZer0 Over a year ago

yeah im running it on a local node js instance outside a browser. hmm i nowhere saw this issue. a little sus. k so im probably gonna use axios. thanks btw :)

Deadron Over a year ago

One of the tricky parts of working with nodejs is many existing dependencies have implicit dependencies on either nodejs apis or browser supplied apis and as the caller only experience can tell you which one may or may not work. In the older days babel would provide pollyfills for some of these but this has fallen out of favor as it created a mess of uncertainty. jQuery is a library that was implemented to only be executed in a browser environment and was only put into npm as a convenience to integrate with npm usage.

Deadron Over a year ago

See stackoverflow.com/questions/27184300/…

Collectives™ on Stack Overflow

TypeScript | Jquery cant be imported

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related