TypeError: Class constructor LocalScheme cannot be invoked without 'new' / Babel loose

[andrevandal]

Version

module: 5.0.0-1622018627.48534b6 nuxt: 2.15.6

Nuxt configuration

• [x] universal

Nuxt configuration

  // https://auth.nuxtjs.org/guide
  auth: {
    // Options
    strategies: {
      // https://auth.nuxtjs.org/guide/scheme#creating-your-own-scheme
      strapi: {
        scheme: '~/schemes/strapi',
      },
    },
  },

Reproduction

https://github.com/derevandal/nuxt-strapi-auth-next

What is expected?

The Custom Schema should work properly.

What is actually happening?

The Custom Schema doesn't work and an error is shown in the browser's console.

client.js?06a0:102 TypeError: Class constructor LocalScheme cannot be invoked without 'new'
    at new StrapiScheme (strapi.js?6967:5)
    at eval (auth.js?e25e:44)
    at _callee2$ (index.js?f26e:59)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
    at _next (asyncToGenerator.js?1da1:25)

Steps to reproduce

1. install lastest nuxt w/ strapi and auth-next
2. for this example, I've added tailwindcss too
3. create a custom schema for strapi integration

// https://auth.nuxtjs.org/guide/scheme#creating-your-own-scheme

import { LocalScheme } from '~auth/runtime'

export default class StrapiScheme extends LocalScheme {
  async login(data, { reset = true } = {}) {
    // Ditch any leftover local tokens before attempting to log in
    if (reset) {
      this.$auth.reset({ resetInterceptor: false })
    }
    const { $strapi } = this.$auth.ctx

    // Make login request
    const response = await $strapi.login(data)

    // update token
    this.updateTokens({
      data: {
        token: response.jwt,
      },
    })

    // Initialize request interceptor if not initialized
    if (!this.requestHandler.interceptor) {
      this.initializeRequestInterceptor()
    }

    // Fetch user if `autoFetch` is enabled
    if (this.options.user.autoFetch) {
      this.$auth.setUser(response.user)
    }

    return response
  }

  fetchUser(_endpoint) {
    // remove this feature b/c strapi already do it itselft
    // https://strapi.nuxtjs.org/strapi#fetchuser
    return Promise.resolve()
  }

  async logout(_endpoint) {
    // Only connect to logout endpoint if it's configured
    await this.$auth.ctx.$strapi.logout()

    // But reset regardless
    return this.$auth.reset()
  }
}

4. add custom babel config

// nuxt.config.js
// Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    babel: {
      // https://github.com/nuxt/nuxt.js/tree/dev/packages/babel-preset-app#example-2-use-core-js3
      presets({ envName }) {
        const envTargets = {
          client: { browsers: ['last 2 versions'], ie: 11 },
          modern: {
            browsers: ['>0.25%', 'not ie 11', 'not op_mini all'],
            ie: false,
          },
          server: { node: '14' },
        }
        return [
          [
            '@nuxt/babel-preset-app',
            {
              corejs: { version: 3 },
              targets: envTargets[envName],
              loose: true,
            },
          ],
        ]
      },
    },
  },

5. open the index page

Additional information

Checklist

• [x] I have tested with the latest Nuxt version and the issue still occurs
• [x] I have tested with the latest module version and the issue still occurs
• [x] I have searched the issue tracker and this issue hasn't been reported yet

[bmulholland]

There have been some typescript updates, is this still happening?

[RyanMulready]

Can confirm this is still an issue.