search

auth0 / auth0-spa-js

Auth0 authentication for Single Page Applications (SPA) with PKCE
MIT License
917 stars 361 forks source link

ERROR TypeError: auth0_spa_js_1.default is not a function #45

Closed eusthace811 closed 5 years ago

eusthace811 commented 5 years ago

Hi Guys,

Using this new library I am getting this error all the time, not sure why:

core.js:15724 ERROR TypeError: auth0_spa_js_1.default is not a function
    at auth0.service.ts:32
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:498)
    at ZoneTask.invoke (zone.js:487)
    at timer (zone.js:2281)

And here is my code:

private auth0Client: Auth0Client;

  // Auth0 application configuration responseType: 'token id_token',
  config: Auth0ClientOptions = {
    domain: 'my.custom.domain',
    client_id: 'MY_CLIENT_ID',
    redirect_uri: `${ window.location.origin }/callback`,
    scope: 'openid profile email',
    audience: 'https://myapi.auth0.com/api/v2/',
    display: 'popup',
    prompt: 'login'
  };

  constructor() {
    setTimeout( () => {
      from(createAuth0Client(this.config)).subscribe( (client: Auth0Client) => {
        this.auth0Client = client;
        console.log(`createAuth0Client: ${ JSON.stringify(client) }`);
        this.authClientSubject.next(this.auth0Client);
      });
    }, 1000);
  }

I've tried using setTimeout and without, always the same, createAuth0Client is undefined :(

Any idea?

Thanks.

eusthace811 commented 5 years ago

Any help? I really need to fix this issue.

@luisrudge

luisrudge commented 5 years ago

@jlsuarezs sorry! I missed this issue. Looks like the library is not being imported correctly. I'm really not sure why. Did you follow our angular Quick Start? How are you importing the library? Our authentication service looks a bit different than yours, so maybe try with our code first? https://auth0.com/docs/quickstart/spa/angular2/01-login#add-an-authentication-service

stevehobbsdev commented 5 years ago

@jlsuarezs Do you have a more complete sample/repo we can have a look at? I've tried recreating what you have into https://github.com/auth0-samples/auth0-angular-samples but unable to get the error you're seeing.

Do you have Ivy enabled in your app?

eusthace811 commented 5 years ago

@luisrudge No worries, thanks for your help. Yes, looks like is not imported, but I've installed using: npm install @auth0/auth0-spa-js. I've followed the Quick Start guide, but from the first try createAuth0Client was already undefined, so I've been trying different possibilities.

@stevehobbsdev The thing is that I was using the old auth0-js + auth0-lock in my project and I've removed to try this new lib. If I follow the Quick Start in a new fresh project is working properly. :(

It must be something in my current project because of the old lib? Not sure.

No, I am not using Ivy, it's an angular 7 project. Here you are my package.json:

{
  "name": "my_project",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.2.7",
    "@angular/cdk": "^7.3.3",
    "@angular/common": "^7.2.7",
    "@angular/compiler": "^7.2.7",
    "@angular/core": "^7.2.7",
    "@angular/forms": "^7.2.7",
    "@angular/http": "^7.2.7",
    "@angular/platform-browser": "^7.2.7",
    "@angular/platform-browser-dynamic": "^7.2.7",
    "@angular/platform-server": "^7.2.7",
    "@angular/router": "^7.2.7",
    "@auth0/auth0-spa-js": "^1.0.1",
    "@ng-bootstrap/ng-bootstrap": "^4.0.4",
    "@ngx-loading-bar/core": "^3.0.0",
    "@ngx-translate/core": "^11.0.1",
    "@types/lodash": "^4.14.122",
    "chart.js": "^2.7.3",
    "chartist": "^0.11.0",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.6.5",
    "hammerjs": "^2.0.8",
    "highlight.js": "^9.15.6",
    "lodash": "^4.17.11",
    "material-design-icons": "^3.0.1",
    "moment": "^2.23.0",
    "ng-inline-svg": "^8.3.0",
    "ngx-clipboard": "^11.1.9",
    "ngx-daterangepicker-material": "^1.2.7",
    "ngx-highlightjs": "^3.0.3",
    "ngx-page-scroll-core": "^6.0.2",
    "ngx-perfect-scrollbar": "^7.2.1",
    "object-path": "^0.11.4",
    "rxjs": "^6.3.3",
    "tslib": "^1.9.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.4",
    "@angular/cli": "^7.3.4",
    "@angular/compiler-cli": "^7.2.7",
    "@angular/language-service": "^7.2.7",
    "@angular/material": "^7.3.3",
    "@angular/material-moment-adapter": "^7.3.3",
    "@types/chartist": "^0.9.43",
    "@types/highlight.js": "^9.12.3",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "@types/object-path": "^0.9.29",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.0.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}
eusthace811 commented 5 years ago

Ok, finally I could get the lib to work.

I've changed my tsconfig.json from:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
   "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

to:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false, 
   "moduleResolution": "node",
    "emitDecoratorMetadata": true,
   "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
     // "allowSyntheticDefaultImports": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

I've just copied the settings from a fresh new project, not sure which option is the one that was causing the issue, but it's working.

Thank you Guys!

stevehobbsdev commented 5 years ago

Glad to hear it @jlsuarezs, thanks!