[SOLVED] Why am I seeing 'AdyenCheckout is not defined' error in .netcore integration?

I've been trying to get Adyen going in its most basic form for a week. Current error is:

adyenImplementation.…mOm9cwOlKaPJu2J8:18 ReferenceError: AdyenCheckout is not defined at createAdyenCheckout (adyenImplementation.…m9cwOlKaPJu2J8:42:5) at startCheckout (adyenImplementation.…9cwOlKaPJu2J8:15:32) startCheckout @ adyenImplementation.…mOm9cwOlKaPJu2J8:18 await in startCheckout
(anonymous) @ adyenImplementation.…Om9cwOlKaPJu2J8:112

I'm trying to use the Example on https://github.com/adyen-examples/adyen-dotnet-online-payments/tree/main/checkout-example
I've changed very little if anything;

The error happens on line

 return new AdyenCheckout({

adyenImplementation.js

const clientKey = document.getElementById("clientKey").innerHTML;

// Used to finalize a checkout call in case of redirect
const urlParams = new URLSearchParams(window.location.search);
const sessionId = urlParams.get('sessionId'); // Unique identifier for the payment session
const redirectResult = urlParams.get('redirectResult');

// Typical checkout experience
async function startCheckout() {
    // Used in the demo to know which type of checkout was chosen
    const type = document.getElementById("type").innerHTML;

    try {
        const checkoutSessionResponse = await sendPostRequest("/api/sessions");
        const checkout = await createAdyenCheckout(checkoutSessionResponse);
        checkout.create(type).mount(document.getElementById("payment"));
    } catch (error) {
        console.error(error);
        alert("Error occurred. Look at console for details");
    }
}

// Some payment methods use redirects. This is where we finalize the operation
async function finalizeCheckout() {
    try {
        const checkout = await createAdyenCheckout({
            id: sessionId
        });
        checkout.submitDetails({
            details: {
                redirectResult
            }
        });
    } catch (error) {
        console.error(error);
        alert("Error occurred. Look at console for details");
    }
}

// Create Adyen Checkout configuration
async function createAdyenCheckout(session) {
    return new AdyenCheckout({
        clientKey,
        locale: "en_US",
        environment: "test",
        session: session,
        showPayButton: true,
        paymentMethodsConfiguration: {
            ideal: {
                showImage: true,
            },
            card: {
                hasHolderName: true,
                holderNameRequired: true,
                name: "Credit or debit card",
            },
            paypal: {
                amount: {
                    value: 10000,
                    currency: "USD",
                },
                environment: "test", // Change this to "live" when you're ready to accept live PayPal payments
                countryCode: "GB", // Only needed for test. This will be automatically retrieved when you are in production.
            }
        },
        onPaymentCompleted: (result, component) => {
            console.info("onPaymentCompleted");
            console.info(result, component);
            handleServerResponse(result, component);
        },
        onError: (error, component) => {
            console.error("onError");
            console.error(error.name, error.message, error.stack, component);
            handleServerResponse(error, component);
        },
    });
}

// Sends POST request
async function sendPostRequest(url, data) {
    const res = await fetch(url, {
        method: "POST",
        body: data ? JSON.stringify(data) : "",
        headers: {
            "Content-Type": "application/json",
        },
    });

    return await res.json();
}

// Handle server response
function handleServerResponse(res, _component) {
    switch (res.resultCode) {
        case "Authorised":
            window.location.href = "/result/success";
            break;
        case "Pending":
        case "Received":
            window.location.href = "/result/pending";
            break;
        case "Refused":
            window.location.href = "/result/failed";
            break;
        default:
            window.location.href = "/result/error";
            break;
    }
}

if (!sessionId) {
    startCheckout()
} else {
    finalizeCheckout();
}

Index.cshtml

@page
@model AdyenTest.Pages.IndexModel
@{
}
@inject IHttpContextAccessor httpcontextAccessor;
@* Hidden divs with data passed from the server *@
<div id="clientKey" class="hidden">@Model.ClientKey</div>
<div id="type" class="hidden">dropin</div>

<div id="payment-page">
    <div class="container">
        @* The Checkout integration type will be conditionally rendered below. *@
        @* Drop-in includes styling out-of-the-box, so no additional CSS classes are needed. *@
        <div class="payment-container">
            <div id="payment" class="payment"></div>
        </div>
    </div>
</div>

@* Adyen Component client code *@
<script src="~/js/adyenImplementation.js" asp-append-version="true"></script>

Index.cshtml.cs

using Adyen.Model;
using Adyen;
using Adyen.Model.Checkout;
using Adyen.Service.Checkout;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.Extensions.Options;
using AdyenTest.Options;

namespace AdyenTest.Pages
{
    public class IndexModel : PageModel
    {

        //private readonly IAdyenService _adyenService;
        private readonly AdyenOptions _adyenOptions;

        //public object SessioData;
        public string ClientKey;

        public IndexModel(IAdyenService adyenService, IOptions<AdyenOptions> options)
        {
            //_adyenService = adyenService;
            _adyenOptions = options.Value;
            ClientKey = _adyenOptions.ADYEN_CLIENT_KEY;
        }
      
        }

}

I've also tried the Dropin help here however its no better and the same error.