Can't integrate Nextjs with ChromaDB

I am having trouble connecting to the Chromadb vector database in Nextjs. My goal is to store user content in Chromadb. Here is the code I am using with the dependencies:

dependencies version:

next: "14.1.0"
chromadb: "1.8.1"

app/upload/action.tsx:

"use server"; 
import { ChromaClient } from "chromadb"; 

export async function createDocs(prevState: any, formData: FormData) { 
    const client = new ChromaClient({ path: "http://0.0.0.0:8000", }); 
    const collection = await client.getCollection({ name: "demo", }); 
    const response = await collection.add({ 
        ids: ['1'], 
        documents: [`${formData.get("content")}`], 
        metadatas: [{ user: 1, title: `${formData.get("title")}`}], 
    }); 
    return { message: `${response}` }; 
}

However, when I run the code, I get a strange error in webpack that says:

⨯ ./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/onnxruntime-node/bin/napi-v3/darwin/arm64/onnxruntime_binding.node
./node_modules/onnxruntime-node/bin/napi-v3/ sync ^\.\/.*\/.*\/onnxruntime_binding\.node$
./node_modules/onnxruntime-node/dist/binding.js
./node_modules/onnxruntime-node/dist/backend.js
./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
./node_modules/chromadb/dist/chromadb.mjs
./app/upload/actions.tsx

Chromadb has trouble using ESM modules in ./node_modules/chromadb/dist/chromadb.mjs. However, it works fine with CommonJS.

I attempted various actions to troubleshoot the error, despite knowing that they may not be effective. These actions included:

installing different packages such as npm, yarn, bun, and pnpm.
I replaced server actions with API routes
tried initializing, exporting, and importing the client variable.

file.ts:

import {ChromaClient} from 'chromadb'

const client = new ChromaClient({
  path: 'http://0.0.0.0:8000'
});


export async function collection() {
  const collection = await client.getCollection({
    name: 'demo'
  })
}

is there a way that I can try using commonjs in nextjs?

Solution

it seems like chroma has some binary dependencies. The problem occurs when Webpack tries to process a binary file called onnxruntime_binding.node, which is part of the onnxruntime-node package.

to resolve this issue we can add some configurations to Webpack to fix it:

1. Installing node-loader

node-loader process .node files, which should resolve the issue with onnxruntime_binding.node

install it with any package manager you want as a Dev dependency

npm install node-loader --save-dev

2. configure the webpack

add the following code to next.config.mjs:

const nextConfig = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      // Fixes npm packages that depend on `fs` module
      config.resolve.fallback.fs = false;
    }

    config.module.rules.push({
      test: /\.node$/,
      use: 'node-loader',
    });

    return config;
  },
};

export default nextConfig;