TypeError: Cannot read properties of undefined (reading 'create')

[vnikolaew]

System Info

"@xenova/transformers": "^2.17.1",
"onnxruntime-node": "^1.17.0",
Windows 11
Chrome
❯ npm --version
10.5.2
❯ node --version
v22.0.0

Next.js v14.0.4

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

I am trying to use the pipeline API in my Nextjs app ( more specifically in a NextJS API Route).
But I am getting the below error. I am not sure what I am doing wrong.

TypeError: Cannot read properties of undefined (reading 'create')
    at constructSession (webpack-internal:///(rsc)/../../node_modules/@xenova/transformers/src/models.js:440:39)
    at async Promise.all (index 1)
    at async BertModel.from_pretrained (webpack-internal:///(rsc)/../../node_modules/@xenova/transformers/src/models.js:1001:20)
    at async AutoModel.from_pretrained (webpack-internal:///(rsc)/../../node_modules/@xenova/transformers/src/models.js:4993:20)
    at async Promise.all (index 1)
    at async loadItems (webpack-internal:///(rsc)/../../node_modules/@xenova/transformers/src/pipelines.js:2837:5)
    at async pipeline (webpack-internal:///(rsc)/../../node_modules/@xenova/transformers/src/pipelines.js:2789:21)
    at async SentenceSimilarity.run (webpack-internal:///(rsc)/../worker/src/lib/tasks/SentenceSimilarity.ts:21:30)
    at async ClassifyImagesWorker.processCore (webpack-internal:///(rsc)/../worker/src/lib/ClassifyImagesWorker.ts:83:20)
    at async time (webpack-internal:///(rsc)/./app/api/utils.ts:10:20)
    at async V1InngestExecution.eval [as userFnToRun] (webpack-internal:///(rsc)/./app/api/inngest/functions.ts:25:5

This is my next.config.mjs:

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require("@nx/next");

/**
 * @type {import("@nx/next/plugins/with-nx").WithNxOptions}
 **/
const nextConfig = {
   output: `standalone`,
   nx: {
      // Set this to true if you would like to use SVGR
      // See: https://github.com/gregberge/svgr
      svgr: false,

   },
   typescript: {
      ignoreBuildErrors: true,
   },
   sentry: {
      disableServerWebpackPlugin: true,
      disableClientWebpackPlugin: true,
   },
   experimental: {
      serverComponentsExternalPackages: ["sharp", "onnxruntime-node"],
   },
   webpack: (config) => {
      // See https://webpack.js.org/configuration/resolve/#resolvealias
      config.externals = [...config.externals, "hnswlib-node"];

      config.resolve.alias = {
         ...config.resolve.alias,
         "sharp$": false,
         "onnxruntime-node$": false,
      };
      return config;
   },
   images: {
      remotePatterns: [
         {
            hostname: "lh3.googleusercontent.com",
            protocol: `https`,
         },
         {
            hostname: "randomuser.me",
            protocol: `https`,
         },
         {
            hostname: "cdn.{APP_NAME}.com",
            protocol: `https`,
         },
         {
            hostname: "{APP_NAME}.com",
            protocol: `https`,
         },
         {
            hostname: "files.stripe.com",
            protocol: `https`,
         },
         {
            hostname: "live.staticflickr.com",
            protocol: `https`,
         },
         {
            hostname: "staticflickr.com",
            protocol: `https`,
         },
         {
            hostname: "cdn.pixabay.com",
            protocol: `https`,
         },
         {
            hostname: "www.dropbox.com",
            protocol: `https`,
         },
      ],
   },
};

const plugins = [
   // Add more Next.js plugins to this list if needed.
   withNx,
];

module.exports = composePlugins(...plugins)(nextConfig);

I am calling pipeline server-side:

this.extractor = await pipeline(
            "feature-extraction",
             "Snowflake/snowflake-arctic-embed-s",
            {
               quantized: false, // Comment out this line to use the quantized version
            });

Any help/recommendation would be highly appreciated!

Reproduction

1. create next.js app
2. install @xenova/transformer npm package
3. call pipeline API in any API route

[kallebysantos]

I'm getting similar error TypeError: Cannot read properties of undefined (reading 'constructor')

EDIT: was a mistake in the Supabase code that I'd follow. I already fix it

[xenova]

Can you try remove these lines (since you already have set them as external):

      config.resolve.alias = {
         ...config.resolve.alias,
         "sharp$": false,
         "onnxruntime-node$": false,
      };

I think this is the problem, which ignores these packages.

[vnikolaew]

Now I get the following error when commenting out these lines:

 ⨯ ../../node_modules/@xenova/transformers/node_modules/onnxruntime-node/bin/napi-v3/darwin/arm64/onnxruntime_binding.node
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Import trace for requested module:
../../node_modules/@xenova/transformers/node_modules/onnxruntime-node/bin/napi-v3/darwin/arm64/onnxruntime_binding.node
../../node_modules/@xenova/transformers/node_modules/onnxruntime-node/bin/napi-v3/ sync ^\.\/.*\/.*\/onnxruntime_binding\.node$
../../node_modules/@xenova/transformers/node_modules/onnxruntime-node/dist/binding.js
../../node_modules/@xenova/transformers/node_modules/onnxruntime-node/dist/backend.js
../../node_modules/@xenova/transformers/node_modules/onnxruntime-node/dist/index.js
../../node_modules/@xenova/transformers/src/backends/onnx.js
../../node_modules/@xenova/transformers/src/env.js
../../node_modules/@xenova/transformers/src/transformers.js

[antem66]

Any updates on this? Im facing exactly the same issue.

[xenova]

It looks like Next.js v14 has removed experimental.serverComponentsExternalPackages. It is now https://nextjs.org/docs/app/api-reference/next-config-js/serverExternalPackages. Could you try that?

[xenova]

Within the past week, it's back to https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages.

I've updated the example apps to Next.js v14, which you can follow to ensure you don't run into this issue.

• https://github.com/xenova/transformers.js/tree/main/examples/next-client
• https://github.com/xenova/transformers.js/tree/main/examples/next-server
• https://github.com/xenova/transformers.js/tree/main/examples/semantic-image-search-client
• https://github.com/xenova/transformers.js/tree/main/examples/semantic-image-search

[btahir]

Unfortunately this is still happening. Any updates?

I am trying to generate embeddings on a server component.

import { pipeline } from '@xenova/transformers';

// Use the Singleton pattern to enable lazy construction of the pipeline.
// NOTE: We wrap the class in a function to prevent code duplication (see below).
const P = () => class PipelineSingleton {
    static task = 'feature-extraction';
    static model = 'Supabase/gte-small';
    static instance = null;

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

let PipelineSingleton;
if (process.env.NODE_ENV !== 'production') {
    // When running in development mode, attach the pipeline to the
    // global object so that it's preserved between hot reloads.
    // For more information, see https://vercel.com/guides/nextjs-prisma-postgres
    if (!global.PipelineSingleton) {
        global.PipelineSingleton = P();
    }
    PipelineSingleton = global.PipelineSingleton;
} else {
    PipelineSingleton = P();
}

export default PipelineSingleton;

And I call it like this

    const embeddingPipeline = await PipelineSingleton.getInstance()
    const output = await embeddingPipeline(text, {
      pooling: 'mean',
      normalize: true,
    })
    const embedding = Array.from(output.data)

I have to include webpack code as well even though yours just had the experimental flag otherwise I get the same error as the person above.

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverComponentsExternalPackages: ['sharp', 'onnxruntime-node'],
  },

  webpack: (config) => {
    // Ignore node-specific modules when bundling for the browser
    // See https://webpack.js.org/configuration/resolve/#resolvealias
    config.resolve.alias = {
      ...config.resolve.alias,
      sharp$: false,
      'onnxruntime-node$': false,
    }
    return config
  },
}

module.exports = nextConfig

Appreciate any assistance. Thanks!