auth0/auth0-vue

CommonJS file is bundled by default using vue-cli

aKzenT opened this issue · 5 comments

aKzenT commented

Describe the problem

When using vue-cli to build a project using auth0-vue, the common JS file is used instead of the ESM file. This causes problems as the CommonJS file does not include things like the authGuard function.

Without changing anything else, using version 2.0.1 and 2.0.2 cause the CJS version to be bundled, while version 2.0.0. Interestingly enough this only happens when doing a production build. "vue-cli serve" works as expected.

I believe the change is due to this PR #201 that was merged with verison 2.0.1. This would also explain why the @auth0-spa library is loaded correctly:
image

What was the expected behavior?

ESM file is included.

Environment

  • Version of auth0-vue used: 2.0.2
  • Version of vue used: 3
  • Which browsers have you tested in?
  • Other modules/plugins/libraries that might be involved: vue-cli
frederikprijck commented

Thanks for reporting. I was unable to reproduce this.

What I tried was the following:

  • npm install -g @vue/cli
  • vue create my-project
  • cd my-project
  • npm install @auth0/auth0-vue

Then, I ensured our SDK is imported and used, including the authGuard.

Both vue-cli-service build and vue-cli-service serve works.

Could you provide something for us to reproduce this so we can see how we can solve this?

aKzenT commented

Hm. I did the same as you using the latest @vue/cli (5.0.8). I use the default settings for vue3.

Then I changed main.js to:

import { createApp } from 'vue'
import App from './App.vue'
import { authGuard } from "@auth0/auth0-vue";

console.log(authGuard);
createApp(App).mount('#app')

No other changes.

Then I run npm run serve -- --mode test (mode is important) and watch the sources panel in chrome:

image

Also the console.log displays "undefined".

frederikprijck commented

Thanks, can you elaborate why you want to run the app in a mode that's for running tests ?

With NODE_ENV set to "test" for example, Vue CLI creates a webpack config that is intended to be used and optimized for unit tests. It doesn't process images and other assets that are unnecessary for unit tests.

It works when mode is either development or production, but I dont think you are intended to serve using test mode.

aKzenT commented

This is probably an error on our side. The developer wanted to ensure a NODE_ENV of "test" for a staging environment, not realizing that this actually targets unit tests. Thanks for pointing that out. We will fix that on our side.

That being said, I still think there is a problem, isn't there? Why is the CJS build picked in "test" mode while @auth0-spa-js and other dependencies correctly load as ESM? And why is the authGuard not defined in the CJS build?

frederikprijck commented

Why is the CJS build picked in "test" mode while @auth0-spa-js and other dependencies correctly load as ESM? And why is the authGuard not defined in the CJS build?

Thanks, will look into why that's happening!