Is not a constructor

Help
1

I am getting “is not a constructor” when trying to implement auth0 within pwa (following this documentation Vue.js Kanban Board: The Development Process)

I have the kanban example and copying approach from the GitHub - auth0-blog/vue-auth0-aside: Aside: Vue with Auth0 and an authenticated Node API. (merging the two samples)

I get this error within router/index.js. Any ideas?

index.js?61a1:14 Uncaught TypeError: WEBPACK_IMPORTED_MODULE_6__auth_Auth.a is not a constructor
at eval (index.js?61a1:14)
at Object…/src/router/index.js (app.js:1849)
at webpack_require (app.js:679)
at fn (app.js:89)
at eval (Auth.js:8)
at Object…/src/auth/Auth.js (app.js:1753)
at webpack_require (app.js:679)
at fn (app.js:89)
at eval (selector.js?type=script&index=0!./src/App.vue:3)
at Object…/node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue (app.js:758)

My package.json is as follows
{
“name”: “auth0-kanban”,
“version”: “1.0.0”,
“description”: “A Vue.js project”,
“author”: “Steve Hobbs elkdanger@gmail.com”,
“private”: true,
“scripts”: {
“dev”: “webpack-dev-server --inline --progress --config build/webpack.dev.conf.js”,
“start”: “http-server dist/ -a 0.0.0.0 -p 8080”,
“lint”: “eslint --ext .js,.vue src”,
“build”: “node build/build.js”
},
“dependencies”: {
“auth0-js”: “^9.12.1”,
“axios”: “^0.19.0”,
“http-server”: “^0.11.1”,
“vue”: “^2.5.2”,
“vue-router”: “^3.0.1”
},
“devDependencies”: {
“autoprefixer”: “^7.1.2”,
“babel-core”: “^6.22.1”,
“babel-eslint”: “^7.1.1”,
“babel-loader”: “^7.1.1”,
“babel-plugin-transform-runtime”: “^6.22.0”,
“babel-preset-env”: “^1.3.2”,
“babel-preset-stage-2”: “^6.22.0”,
“chalk”: “^2.0.1”,
“copy-webpack-plugin”: “^4.0.1”,
“css-loader”: “^0.28.0”,
“eslint”: “^3.19.0”,
“eslint-config-airbnb-base”: “11.3.0”,
“eslint-friendly-formatter”: “^3.0.0”,
“eslint-import-resolver-webpack”: “0.8.3”,
“eslint-loader”: “^1.7.1”,
“eslint-plugin-html”: “^3.0.0”,
“eslint-plugin-import”: “2.7.0”,
“eventsource-polyfill”: “^0.9.6”,
“extract-text-webpack-plugin”: “^3.0.0”,
“friendly-errors-webpack-plugin”: “^1.6.1”,
“html-webpack-plugin”: “^2.30.1”,
“node-notifier”: “^5.1.2”,
“optimize-css-assets-webpack-plugin”: “^3.2.0”,
“ora”: “^1.2.0”,
“portfinder”: “^1.0.13”,
“postcss-import”: “^11.0.0”,
“postcss-loader”: “^2.0.8”,
“rimraf”: “^2.6.0”,
“semver”: “^5.3.0”,
“serviceworker-webpack-plugin”: “^0.2.3”,
“shelljs”: “^0.7.6”,
“uglifyjs-webpack-plugin”: “^1.1.1”,
“url-loader”: “^1.1.1”,
“vue-loader”: “^13.3.0”,
“vue-style-loader”: “^3.0.1”,
“vue-template-compiler”: “^2.5.2”,
“vuedraggable”: “^2.16.0”,
“vuex”: “^3.0.1”,
“webpack”: “^3.6.0”,
“webpack-bundle-analyzer”: “^2.9.0”,
“webpack-dev-server”: “^2.9.1”,
“webpack-merge”: “^4.1.0”
},
“engines”: {
“node”: “>= 4.0.0”,
“npm”: “>= 3.0.0”
},
“browserslist”: [
“> 1%”,
“last 2 versions”,
“not ie <= 8”
]
}

2

Hi there @dyardy, can you share more about what you are using .a for or passing to it? Any additional details can be helpful on this front. Is this a public or private repo? Thanks in advance!

4

Thanks for quick response. I believe my issues all are around implementing a ‘guard’ within the kanban github sample router using the provided Auth.js from the aside sample github code.

  1. When I updated the kanban sample (router/index.js) with the code from vue-auth0-aside-master (router/index.js) I get this error above that ‘is not a constructor’ error.

This is not custom code, just merely trying to implement vue-auth0-aside-master\router\index.js code within the kanban github code.

thx-dave

5

@steve.hobbs do you have any insight on this front?

6

@dyardy I think in this case it would be really helpful if you could share your app repo you’re working with that demonstrates the error. I know you’re combining two approaches but to see the actual code you’re looking at would help us to debug this more effectively.

1 Like
7

I made some progress by adding a function within router/index.js (this may be working) however I get the same not a constructor error within the Callback.vue page

Callback.vue?cfbb:10 Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0__auth_Auth.a is not a constructor
at eval (Callback.vue?cfbb:10)
at Object…/node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/Callback.vue (app.js:774)
at webpack_require (app.js:679)
at fn (app.js:89)
at eval (Callback.vue?4826:1)
at Object…/src/components/Callback.vue (app.js:1770)
at webpack_require (app.js:679)
at fn (app.js:89)
at eval (index.js?61a1:1)
at Object…/src/router/index.js (app.js:1850)

The callback is called after authentication which seems all good but it fails on const auth = new Auth()
I am doing something not right here and would appreciate you looking.

public github here
https://github.com/dyardyGIT/kanban-board-pwa-master

8

Thanks for posting the repo.

It’s a bit of a weird one. In Callback.vue, if I move the const auth = new Auth() line inside the mounted() function then it works.

An alternative pattern here (which I’ve also tested, and works) is to export an instance of WebAuth from Auth.js instead of the constructor and just get everything to use the same instance.

e.g. inside Auth.js:

class Auth {
 // ...
}

export default new Auth();

Then when you want to use it, simply:

import auth from './auth/Auth';

auth.parseHash(() => {});  // example of usage

Make sense? I’ve tested this in your app and there’s a couple of places to refactor to do this, but once I had I was able to log in just fine.

Let me know if that helps.

1 Like
9

Thank you!

It must be somewhat related to the order of loading, it is odd that no one else has noticed/seen this issue. It would appear pretty common problem. Odd

I did like you try both approaches, and I was able to get it going which is great. I did like the ‘alternative’ approach as it made less coding and easier to understand. Thanks!

10

No problem! Feel free to come back with any further questions you might have.

1 Like
11

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.