Error running tfjs BlazePose pose detection on single HTMLImageElement

I'm trying to get 3d pose detection working in the browser using tfjs. I've followed the instructions at https://github.com/tensorflow/tfjs-models/tree/master/pose-detection/src/blazepose_mediapipe

However the code fails with error. What am I doing wrong?

Here's my code

main.js

var img = new Image();
img.onload = async () => {
    const model = poseDetection.SupportedModels.BlazePose;
    const detectorConfig = {
        runtime: 'mediapipe', // or 'tfjs'
        modelType: 'lite',
        solutionPath: 'https://cdn.jsdelivr.net/npm/@mediapipe/pose',
    };
    try {
        detector = await poseDetection.createDetector(model, detectorConfig);
        console.log(img);
        const estimationConfig = {
            enableSmoothing: false, maxPoses: 1,
            type: 'full',
            scoreThreshold: 0.65,
            render3D: true
        };
        try {
            const poses = await detector.estimatePoses(img);
            console.log(poses);
        } catch (error) {
            detector.dispose();
            detector = null;
            console.log(error);
        }
    } catch (err) {
        console.log(err);
    }
}
img.src = "testimg.jpg";

index.html

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection" crossorigin="anonymous"></script>
    <!-- Include below scripts if you want to use TF.js runtime. -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl" crossorigin="anonymous"></script>

    <!-- Optional: Include below scripts if you want to use MediaPipe runtime. -->
    <script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose" crossorigin="anonymous"></script>

</head>

<body>
    <script src="main.js"></script>
</body>

</html>

I get the following error when I open the html in the browser. The html is hosted on expressjs.

main.js:11 <img src="testimg.jpg">
main.js:24 TypeError: Cannot read properties of undefined (reading 'Tensor')
    at e.<anonymous> (pose-detection:17:7199)
    at pose-detection:17:2162
    at Object.next (pose-detection:17:2267)
    at pose-detection:17:1204
    at new Promise (<anonymous>)
    at s (pose-detection:17:949)
    at e.estimatePoses (pose-detection:17:6935)
    at img.onload (main.js:19:42)

Solution

I managed to replicate your issue locally and it seems the script tags are in the wrong order. This will work if you drop the "pose-detection" script tag to the bottom.

See the correct order as per documentation here