Uncaught (in promise) DOMException: AES key data must be 128 or 256 bits

Question

Using the below code, I get an error regarding AES key is not of correct length, but it is IMHO :-(

async function Test() {
        var passphraseKey = await TextEncode("I hëart årt and £$¢!");
        var data = await TextEncode("I hëart årt and £$¢!");
        var saltBuffer = await window.crypto.getRandomValues(new Uint8Array(16));

        var importKey = await window.crypto.subtle.importKey('raw', passphraseKey, { name: 'PBKDF2' }, false, ['deriveKey'])
            .then(function (key) {
                return key;
            });

        var deriveKey = await window.crypto.subtle.deriveKey({ name: 'PBKDF2', salt: saltBuffer, iterations: 100, hash: 'SHA-256' }, importKey, { name: 'AES-GCM', length: 256 }, true, ["encrypt", "decrypt"])
            .then(function (webKey) {
                return webKey;
            });

        var cipher = await window.crypto.subtle.encrypt({ name: "AES-GCM", iv: window.crypto.getRandomValues(new Uint8Array(16)) }, deriveKey, data)
            .then(function (encrypted) {
                console.log(new Uint8Array(encrypted));
            })
            .catch(function (err) {
                console.error(err);
            });
    };

It is window.crypto.subtle.encrypt that throws the error, but actually I end up with a valid output, but why does it throw an error at the same time?

encrypted output with error message