✅ - Amplify Appsync Events - "Error: Amplify configuration is missing."

[leaden obsidian]

Has anyone gotten the Appsync Events implementation in Amplify to work?

I tried following the docs here in my current project: https://docs.amplify.aws/react/build-a-backend/data/connect-event-api/

Here's what I ended updoing: (omitted extraneous code)

main.tsx

import outputs from "../amplify_outputs.json";
import { Amplify } from "aws-amplify";
import { Authenticator } from "@aws-amplify/ui-react";

const queryClient = new QueryClient();

Amplify.configure({
    ...outputs,
    API: {
        Events: {
            endpoint:
                "https://xxx.appsync-api.us-east-1.amazonaws.com/event",
            region: "us-east-1",
            defaultAuthMode: "apiKey",
            apiKey: "da2-xxx",
        },
    },
});

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
    <React.StrictMode>
                    <Authenticator.Provider>
                        <App />
                    </Authenticator.Provider>
    </React.StrictMode>
);

SomeComponent.tsx that eventually get rendered in <App>

import type { EventsChannel } from "aws-amplify/data";
import { events } from "aws-amplify/data";

const SomeComponent: React.FC = () => {
    useEffect(() => {
        let channel: EventsChannel;

        const connectAndSubscribe = async () => {
            channel = await events.connect("default/*");

            channel.subscribe({
                next: (data) => {
                    console.log("received", data);
                },
                error: (err) => console.error("error", err),
            });
        };

        connectAndSubscribe();

        return () => channel && channel.close();
    }, []);

    return ( <> Hullo, look at the console. </> )

And I keep getting this error in the console once opening that page

Uncaught (in promise) Error: Amplify configuration is missing. Have you called Amplify.configure()?
    at configure (utils.ts:17:15)
    at Object.connect (index.ts:28:29)
    at connectAndSubscribe (SomeComponent.tsx:131:36)
    at SomeComponent.tsx:141:9

My packages appears to be up to date, so I'm not sure whats going on

    "@aws-amplify/ui-react": "^6.7.1",
    "aws-amplify": "^6.10.2",
    "@aws-amplify/backend": "^1.8.0",
    "@aws-amplify/backend-cli": "^1.4.2",

[leaden obsidian]

Okay I guess I didn't read enough of the docs:
https://docs.amplify.aws/react/reference/amplify_outputs/
"Overriding Amplify-managed configurations on amplify_outputs.json is not supported."

The way to extend the existing configuration is to pass the existing amplify_outputs.json to Amplify.configure() first then retrieve the configuration and extend it...

import { Amplify } from "aws-amplify";
import outputs from "@/amplify_outputs.json";

Amplify.configure(outputs);
const currentConfig = Amplify.getConfig(); 
Amplify.configure({
  ...currentConfig,
    API: {
        Events: {
            endpoint:
                "https://xxx.appsync-api.us-east-1.amazonaws.com/event",
            region: "us-east-1",
            defaultAuthMode: "apiKey",
            apiKey: "xxx,
        },
    },
});

[steady sphinx]

✅ - Amplify Appsync Events - "Error: Amplify configuration is missing."