openid / AppAuth-JS

JavaScript client SDK for communicating with OAuth 2.0 and OpenID Connect providers.
Apache License 2.0
985 stars 161 forks source link

Reference error: $ is not defined when running npm start without compiling from TypeScript #62

Closed chingologram closed 6 years ago

chingologram commented 6 years ago

Expected Behavior

On a project not using TypeScript to compile dependencies, the following line should successfully import into AuthorizationServiceConfiguration: const { AuthorizationServiceConfiguration } = require("@openid/appauth/built/authorization_service_configuration");

Actual behavior

Running npm start throws an error if the mentioned line is present.

Uncaught Exception:
ReferenceError: $ is not defined
    at JQueryRequestor.xhr (.../node_modules/@openid/appauth/built/xhr.js:47:19)

Note that I required the npm package by doing: npm install --save @openid/AppAuth-JS, not by cloning the repo, as I wanted to add the package to an existing application.

My knowledge of TypeScript is practically null, but I would expect that on a JS only electron project, the JS dependency could be imported by using require. It seems that the libraries under the built/ folder still reference the $ symbol on @types/jquery which are expected to be available globally, but only become so after compiling via tsc first.

tikurahul commented 6 years ago

So, there are 2 places where AppAuth uses jquery. The first place are the types in Requestor (if you want to bring your own), and the second is the actual implementation of the requestor (JQueryRequestor) which uses $.xhr. So if you want to use that you need to include jquery on the page.

Also given that jQuerys TypeScript types are markedglobal we don’t typically bundle that as part of AppAuth. The page using AppAuth brings its own.

I know this is a little confusing especially if you are not using TypeScript, but it makes it really easy to separate explicit (global) and implicit (module) dependencies.

coyksdev commented 4 years ago

mine it throws (node:66711) UnhandledPromiseRejectionWarning: ReferenceError: $ is not defined. it says 'Cannot find name '$'. Do you need to install type definitions for jQuery? Try npm i @types/jquery' but when I installed it same error occured. it also say Cannot find name 'JQueryAjaxSettings'. My code below.

const response = await AuthorizationServiceConfiguration.fetchFromIssuer(openIdConnectUrl) console.log('Fetched service configuration', response);