Transformer.js model fails to parse JSON in client-side Next.js example

Question

On Brave browser Version 1.61.101 Chromium: 120.0.6099.71 (Official Build) (x86_64) (on Chrome Version 120.0.6099.62 (Official Build) (x86_64) I don't see this or any other errors) I run into a JSON parsing error when trying to run in development mode the client-side example from Hugging Face's Next.JS tutorial: https://huggingface.co/docs/transformers.js/tutorials/next#client-side-inference. Because of this error the text classification cannot run.

The error is as follows:

This is my TransformerWorker.js which is taken directly from the tutorial linked above, no changes:

import { pipeline, env } from "@xenova/transformers";

// Skip local model check and cache
env.allowLocalModels = false;

// Use the Singleton pattern to enable lazy construction of the pipeline.
class PipelineSingleton {
    static task = 'text-classification';
    static model = 'Xenova/distilbert-base-uncased-finetuned-sst-2-english';
    static instance = null;

    static async getInstance(progress_callback = null) {
        if (this.instance === null) {
            this.instance = pipeline(this.task, this.model, { progress_callback });
        }
        return this.instance;
    }
}

// Listen for messages from the main thread
self.addEventListener('message', async (event) => {
    // Retrieve the classification pipeline. When called for the first time,
    // this will load the pipeline and save it for future use.
    let classifier = await PipelineSingleton.getInstance(x => {
        // We also add a progress callback to the pipeline so that we can
        // track model loading.
        self.postMessage(x);
    });

    // Actually perform the classification
    let output = await classifier(event.data.text);

    // Send the output back to the main thread
    self.postMessage({
        status: 'complete',
        output: output,
    });
});

Answer 1

Looking through the Github issues for transformers.js I found https://github.com/xenova/transformers.js/issues/366 in which one user suggested adding the following line to the worker file:

env.userBrowserCache = false;

Turning the browser cache option off I no longer receive this error in the Brave browser and, in fact, the Next.js client-side example code Hugging Face provides in their tutorial works without any further issues for me.

That said, browser caching is a significant feature, so this could indicate an underlying bug that needs to be fixed in transformers.js. See the link to the transformers.js Github issue above.