no available backend found. ERR: [webgpu] backend not found

[vlohar08]

System Info

@huggingface/transformers: ^3.2.1
node: v20.17.0
browser: Chrome Version 131.0.6778.205 (Official Build) (64-bit)
OS: Windows 11
next: 15.1.1
react: ^19.0.0

Environment/Platform

• Website/web-app
• Browser extension
• Server-side (e.g., Node.js, Deno, Bun)
• Desktop app (e.g., Electron)
• Other (e.g., VSCode extension)

Description

Hi,
I am trying to load Xenova/modnet in a Nextjs project using @huggingface/transformers. It is not working as during initialization I get this error "no available backend found. ERR: [webgpu] backend not found".

I have Graphics acceleration and chrome://flags/#enable-unsafe-webgpu enabled.

I am sharing my code. Please take a look and help.

Next config

import type { NextConfig } from "next";
import path from "path";
import { fileURLToPath } from "url";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const nextConfig: NextConfig = {
  webpack: (config) => {
    config.resolve.alias["@huggingface/transformers"] = path.resolve(
      __dirname,
      "node_modules/@huggingface/transformers"
    );
    config.resolve.alias["onnxruntime-web"] = path.resolve(__dirname, "node_modules/onnxruntime-web");
    config.resolve.alias = {
      ...config.resolve.alias,
      sharp$: false,
      "onnxruntime-node$": false,
    };
    return config;
  },
};

Model

export async function initializeModel(onProgress?: (progress: number) => void): Promise<void> {
  try {
    env.allowLocalModels = true;
    env.allowRemoteModels = true;
    if (env.backends?.onnx?.wasm) {
      env.backends.onnx.wasm.proxy = true;
    }

    state.model = await AutoModel.from_pretrained(MODEL_ID, {
      device: "webgpu",
      progress_callback: (progress: ProgressInfo) => {
        if (onProgress && progress.status === "progress") {
          onProgress(progress.progress);
        }
      },
    });

    state.processor = await AutoProcessor.from_pretrained(MODEL_ID, {});

    state.currentModelId = MODEL_ID;
  } catch (error) {
    throw new Error(error instanceof Error ? error.message : "Failed to initialize background removal model");
  }
}

Reproduction

1. Try to load the model using the given code in a Nextjs project