"ReferenceError: regeneratorRuntime is not defined" in v4

[TheDutchCoder]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Vue

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

  System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Memory: 22.42 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.0.0 - ~/.nvm/versions/node/v16.0.0/bin/node
    Yarn: 1.22.5 - /usr/local/bin/yarn
    npm: 7.19.0 - ~/.nvm/versions/node/v16.0.0/bin/npm
    Watchman: 2021.06.07.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 91.0.4472.114
    Edge: 91.0.864.59
    Firefox: 84.0.2
    Safari: 14.1.1
  npmPackages:
    @aws-amplify/datastore: ^3.1.1 => 3.1.2 (2.10.1)
    @creativelayer/chalk-icons: ^1.1.2 => 1.1.2
    @creativelayer/chalk-ui: ^1.32.0 => 1.32.0
    @types/jest: ^26.0.23 => 26.0.23
    @typescript-eslint/eslint-plugin: ^4.28.1 => 4.28.1
    @typescript-eslint/parser: ^4.28.1 => 4.28.1
    @vitejs/plugin-vue: ^1.2.4 => 1.2.4
    @vue/compiler-sfc: ^3.1.2 => 3.1.2
    @vue/eslint-config-standard: ^6.0.0 => 6.0.0
    @vue/eslint-config-typescript: ^7.0.0 => 7.0.0
    @vue/test-utils: ^2.0.0-rc.9 => 2.0.0-rc.9
    @xstate/vue: ^0.6.0 => 0.6.0 (0.5.0)
    autoprefixer: ^10.2.6 => 10.2.6
    aws-amplify: ^3.4.3 => 3.4.3
    buffer: ^6.0.3 => 6.0.3 (4.9.2)
    cypress: ^7.6.0 => 7.6.0
    dynamic-import-polyfill: ^0.1.1 => 0.1.1
    eslint: ^7.29.0 => 7.29.0
    eslint-plugin-cypress: ^2.11.2 => 2.11.3
    eslint-plugin-import: ^2.23.4 => 2.23.4
    eslint-plugin-jest: ^24.3.6 => 24.3.6
    eslint-plugin-vue: ^7.12.1 => 7.12.1
    jest: ^26.6.3 => 26.6.3
    mockdate: ^3.0.5 => 3.0.5
    postcss: ^8.3.5 => 8.3.5
    tailwindcss: ^2.2.4 => 2.2.4
    ts-jest: ^26.5.5 => 26.5.6
    typescript: ^4.3.4 => 4.3.4
    vite: 2.2.4 => 2.2.4
    vue: ^3.0.11 => 3.1.2
    vue-jest: ^5.0.0-alpha.10 => 5.0.0-alpha.10
    vue-loader: ^16.2.0 => 16.2.0
    vue-router: ^4.0.10 => 4.0.10
    vue-router-mock: 0.0.3 => 0.0.3
    xstate: ^4.20.1 => 4.20.1
  npmGlobalPackages:
    @aws-amplify/cli: 5.0.2
    np: 7.5.0
    npm: 7.19.0

Describe the bug

When using aws/amplify and import the Auth part, Auth.signOut() throws a "ReferenceError: regeneratorRuntime is not defined" error when using Vite as the builder.

Expected behavior

Not to throw an error

Reproduction steps

1. Use Vite (latest)
2. Use aws/amplify (latest)
3. Sign in with Auth
4. Call Auth.signOut()
5. Results in error

Code Snippet

// Put your code below this line.

Log output

// Put your logs below this line

aws-exports.js

/* eslint-disable */
// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "us-east-1",
    "aws_appsync_graphqlEndpoint": "https://hqptdavyajhyrjy5hsucf7s4aq.appsync-api.us-east-1.amazonaws.com/graphql",
    "aws_appsync_region": "us-east-1",
    "aws_appsync_authenticationType": "API_KEY",
    "aws_appsync_apiKey": "da2-dvzhiao7afalnd4ngy656gg57i",
    "aws_cloud_logic_custom": [
        {
            "name": "AdminQueries",
            "endpoint": "https://hl5y1tbtsc.execute-api.us-east-1.amazonaws.com/reinier",
            "region": "us-east-1"
        }
    ],
    "aws_cognito_identity_pool_id": "us-east-1:a5a66054-9e29-4237-bd34-92f3f757230c",
    "aws_cognito_region": "us-east-1",
    "aws_user_pools_id": "us-east-1_bPyCr6PJt",
    "aws_user_pools_web_client_id": "6pgdqdokmqvtnv7d732teu478f",
    "oauth": {},
    "aws_user_files_s3_bucket": "creativelayeromsf1e74c96893d4c5180677f6c846170d102506-reinier",
    "aws_user_files_s3_bucket_region": "us-east-1"
};


export default awsmobile;

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

The error doesn't occur with any v3 version. I'll see if any of the old v4 versions also work, but I have my doubts.

[TheDutchCoder]

The solution is to pass Auth.signOut({ global: true }) for some reason.
I don't know why, but that seems like a bug to me.

[chrisbonifacio]

Hey @TheDutchCoder do you happen to be using async/await in your code?

[TheDutchCoder]

Hey @TheDutchCoder do you happen to be using async/await in your code?

Yes all over the place, so that shouldn't be an issue (e.g. signIn also uses that).
It looks like Auth is hitting a retry function that uses a transpiled async/await in amplify, which is the point where it breaks down.

So my reasoning is that it actually fails to signout first and then hits that retry where the bug is.

The bigger problem is why it fails to sign me out in the first place and why 1 other colleague has the same problem and 1 other doesn't. We're all on the same versions of node, npm, amplify-cli, aws-amplify, etc.

For reference:

/**
 * Signs in a user given en email addres.
 * This will actually send an email with a verification code ('challenge') for
 * the user to submit.
 */
export const signIn = async (email: string): Promise<any> => await Auth.signIn(email)

/**
 * Signs out a user.
 */
export const signOut = async (): Promise<any> => await Auth.signOut()

Funnily enough it works with a global signout: export const signOut = async (): Promise<any> => await Auth.signOut({ global: true }) and I have no idea why. It seems to call a different method on the user (from what I can see in the source).

[TheDutchCoder]

I'm digging into this some more, and it seems to have happened somewhere between version 4.0.3 (works) and 4.1.0 (doesn't work).

Going through all the commits, I've found this piece that is actually throwing the error: fa5cdb8#diff-4bea2f0020039d5275abe5c4e4747c1c7c1457e59abb4101f26230011834925d

Also, the signout function changed here:fa5cdb8#diff-8645b6bfe673522e9f71ef69ab2dc9bc01f0e15c4fe41cb5766a3acef1749ca5

The new signOut changes look fishy, especially since it now can take a callback, but the TS definitions don't mention this at all (it still shows an option object).

Yeah you didn't generate the esm lib:

This is from aws-amplify 4.1.2, going into the esm lib the signout method looks like this:
AuthClass.prototype.signOut = function (opts) {

But in the actual dist folder it's:
_proto.signOut = function signOut(revokeTokenCallback) {

It looks like the ESM lib was not generated (along with the types).

Tangentially related: you guys don't provide a list of release notes? This is a breaking change and should at least be mentioned somewhere in a release note and/or (even better) should have gotten a major release.

cc: @chrisbonifacio

[chrisbonifacio]

Hi @TheDutchCoder, sorry for the delay. We do update the README with any breaking changes between versions. There are known issues with Vite which usually can be resolved through your project configuration but we are actively working towards making our libraries more compatible with Vite.

You can track and/or contribute to the work being done to remedy these issues in PRs like this pertaining to Vite #7970

We also opened our own issue in the aws-sdk-js repo to help push towards Vite compatibility aws/aws-sdk-js#3673

In the meantime, I was able to reproduce this issue pretty quickly and consistently with a fresh Vite + React app with Amplify so I labeled it a bug for the team and they are aware of the cause. This is a bandaid until we release the fix on our side but you can get past this issue currently by simply installing regenerator-runtime if you don't already have it in your dependencies and importing it so that regeneratorRuntime is defined globally.

import "regenerator-runtime";

[hkjpotato]

@TheDutchCoder Thank you for reporting this. Currently we are creating a quick fix, meanwhile you can follow the readme to import regenerator-runtime.
https://www.npmjs.com/package/regenerator-runtime

for reference: babel/babel#9849 (comment)

[TheDutchCoder]

Thanks for picking this up @chrisbonifacio and @hkjpotato !
I'll import the regenerator-runtime in the Auth file to circumvent it.

Could you maybe shed some light onto why the ESM build differs from the transpiled JS build?
Mainly the ESM build still has the signOut method with options, wheres the minified build has the signOut method with the revokeTokenCallback, or am I looking in the wrong place?

Just to clarify: I'm not building for older browsers, nor is Vite setup to do so. We also don't use babel, so I have a feeling that the particular part of code that depends on the regeneratorRuntime comes pre-transpiled? Is that correct?

Because async stuff shouldn't get transpiled by default, modern browsers support that natively so there's no need to transpile it (especially if I don't configure my bundler for it 😄 )

I guess what I'm asking is: is there a way force importing the ESM version of (aws internal) packages?
I see the linked PR is to rewrite async as Promise-based. While this will work, it seems to indicate a larger problem (where transpiled libraries are imported, instead of doing ESM imports, or is that waaaay out of scope (I imagine that's an architectural discussion with possibly far reaching implication?).

[hkjpotato]

@TheDutchCoder AuthClass.signOut = function (opts) and behind the scene CognitoUser.signOut = function (revokeCallback)

Normally, when we use a third party codebase, we seldomly use its "source code" or uncompiled code directly.

third party                             |              your app
src code->build->exposed code           |             e.g. find the code based on package.json `main` field 

I haven't used vite yet, but I assume it still follow the normal node module resolving path to load the JS code? This might be a good question for the Vite community though..

[github-actions]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.