Amplify[ADD_OAUTH_LISTENER] is not a function in the Browser

[lloydwatkin]

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

Not applicable

Amplify APIs

Not applicable

Amplify Version

v6

Amplify Categories

auth

Backend

Amplify Gen 2

Environment information

lloyd@macmini appsync-event % npx envinfo --system --binaries --browsers --npmPackages --duplicates --npmGlobalPackages
Need to install the following packages:
envinfo@7.14.0
Ok to proceed? (y) y

  System:
    OS: macOS 14.6.1
    CPU: (10) arm64 Apple M2 Pro
    Memory: 592.34 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.19.1/bin/yarn
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
    Watchman: 2024.11.11.00 - /opt/homebrew/bin/watchman
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 17.6
  npmPackages:
    @pulumi/aws: 6.13.3 => v6.13.3 
    @pulumi/pulumi: * => 3.140.0 
    aws-amplify: ^6.9.0 => 6.9.0 
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    buffer: ^6.0.3 => 6.0.3 (4.9.2)
    parcel: ^2.13.1 => 2.13.1 
    process: ^0.11.10 => 0.11.10 
  npmGlobalPackages:
    corepack: 0.22.0
    detox: 20.25.5
    http-server: 14.1.1
    jest: 29.7.0
    npm: 10.2.4
    pulumi: 0.0.1
    react-native-cli: 2.0.1
    swagger-merger: 1.5.4
    yarn: 1.22.22

Describe the bug

Instantiating Amplify in the browser (latest Chrome) leads to error:

Uncaught TypeError: e[U] is not a function
    at enableOAuthListener.ts:11:17
(anonymous) @ enableOAuthListener.ts:11Understand this errorAI

This is my entire code base:

import { Amplify } from 'https://cdn.jsdelivr.net/npm/aws-amplify@6.9.0/+esm'
import { events } from 'https://cdn.jsdelivr.net/npm/aws-amplify@6.9.0/data/+esm'

 // Initialize AWS Amplify
 const initializeAmplify = (apiKey) => {
          
    Amplify.configure({
        "API": {
            "Events": {
            "endpoint": "https://REDACTED.appsync-api.eu-west-1.amazonaws.com/event",
            "region": "eu-west-1",
            "defaultAuthMode": "lambda",
            "apiKey": "12345"
            }
        }
    })
}

Expected behavior

Loads ok.

I'm trying to use the Events API

Reproduction steps

Included above

Code Snippet

import { Amplify } from 'https://cdn.jsdelivr.net/npm/aws-amplify@6.9.0/+esm'
import { events } from 'https://cdn.jsdelivr.net/npm/aws-amplify@6.9.0/data/+esm'

 // Initialize AWS Amplify
 const initializeAmplify = (apiKey) => {
          
    Amplify.configure({
        "API": {
            "Events": {
            "endpoint": "https://REDACTED.appsync-api.eu-west-1.amazonaws.com/event",
            "region": "eu-west-1",
            "defaultAuthMode": "lambda",
            "apiKey": "12345"
            }
        }
    })
}

Log output

// Put your logs below this line

aws-exports.js

No response

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

No response

[HuiSF]

Hi @lloydwatkin thanks for opening this issue. Could you explain what are these import paths?

import { Amplify } from 'https://cdn.jsdelivr.net/npm/aws-amplify@6.9.0/+esm'
import { events } from 'https://cdn.jsdelivr.net/npm/aws-amplify@6.9.0/data/+esm'

As far as I know, Amplify JS v6 doesn't support use as CDN hosted JS bundles.

[lloydwatkin]

@HuiSF linked from https://www.jsdelivr.com/package/npm/aws-amplify

It seems to mostly work fine up until the above error. The files are compiled from parcel for the browser which is able to pull down the libraries and build.

[HuiSF]

Hi @lloydwatkin thanks for the explanation. We've not tested Amplify JS library with CDN hosted bundles. We recommend you to use a npm package manager to install the Amplify dependencies into your project.

[lloydwatkin]

@HuiSF thanks, I've switched to compiling the Javascript and have hit another issue. I'll raise a new bug that.