No target element specified

[garren_micro]

Attempting to create a simple Proof of Concept using Blazor, keep getting - Uncaught (in promise) Error: No target element specified. Expected: ƒ(tweetId, target, [options]);

Any help is much appreciated

My Index loads this

<script>
    window.twttr = (function (d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0],
            t = window.twttr || {};
        if (d.getElementById(id)) return t;
        js = d.createElement(s);
        js.id = id;
        js.src = "https://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js, fjs);

        t._e = [];
        t.ready = function (f) {
            t._e.push(f);
        };

        return t;
    }(document, "script", "twitter-wjs"));</script>

My Razor page

<div class="tweet-container"></div>
<div class="tweet" id="599202861751410688"></div>
<div class="tweet" id="598859527291797504"></div>

@code {

[Inject]
public IJSRuntime JSRuntime { get; set; }

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeVoidAsync("TwitterJS", "Invoke Twitter Wrapper");
    }
}

}

and my js file

function TwitterJS() {

twttr.ready(

    function (twttr) {

        var container = $('.tweet-container');

        $.each($('.tweet'), function () {

            var id = $(this).attr('id');

            twttr.widgets.createTweet(id, container,
                {
                    conversation: 'none',    // or all
                    cards: 'hidden',  // or visible
                    linkColor: '#cc0000', // default is blue
                    theme: 'light'    // or dark
                });

        });

    });

}