Having trouble connecting Nextjs with ChromaDB?

Question

Having trouble connecting Nextjs with ChromaDB?

I am encountering issues while trying to establish a connection with the Chromadb vector database in Nextjs. The objective is to store user-generated content in Chromadb. Below is the code snippet I am utilizing along with its 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}` };
}

When executing the provided code, I encounter an unusual error in webpack that states:

⨯ ./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, as currently no loaders are configured for processing this file. Visit https://webpack.js.org/concepts#loaders for more information.
(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

The issue arises due to Chromadb experiencing difficulty when using ESM modules in

./node_modules/chromadb/dist/chromadb.mjs

. However, it functions properly with CommonJS.

I have tried multiple troubleshooting steps, despite being aware of their potential inefficacy. These actions include:

Installing different packages such as npm, yarn, bun, and pnpm.
Replacing server actions with API routes.
Attempting to initialize, export, and import 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 method to utilize commonjs in NextJs?

javascript typescript next.js chromadb

Answer 1

Answer №1

The issue stemmed from a problem with Webpack. Specifically, the error occurred while Webpack was attempting to process a binary file named onnxruntime_binding.node, which is a component of the onnxruntime-node package.

To solve this issue, we can tweak some settings in Webpack as follows:

1. Adding node-loader

The node-loader tool is designed to handle .node files, which should help resolve the problem related to onnxruntime_binding.node.

You can easily install it using any preferred package manager as a Dev dependency:

npm install node-loader --save-dev

2. Configuring Webpack

Add the following code snippet to your next.config.mjs file:

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

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

    return config;
  },
};

export default nextConfig;

Answer 2

The issue stemmed from a problem with Webpack. Specifically, the error occurred while Webpack was attempting to process a binary file named onnxruntime_binding.node, which is a component of the onnxruntime-node package.

To solve this issue, we can tweak some settings in Webpack as follows:

1. Adding node-loader

The node-loader tool is designed to handle .node files, which should help resolve the problem related to onnxruntime_binding.node.

You can easily install it using any preferred package manager as a Dev dependency:

npm install node-loader --save-dev

2. Configuring Webpack

Add the following code snippet to your next.config.mjs file:

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

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

    return config;
  },
};

export default nextConfig;

Having trouble connecting Nextjs with ChromaDB?

Answer №1

1. Adding node-loader

2. Configuring Webpack

Similar questions

The output returned by an AngularJS controller

Using Buttons to Filter Data in React

Tips on accessing the v-model value with a parameter in VUE

Is there a neat method in React and Material UI for de-structuring the props that I am passing to useStyles?

Using Jquery to detect if there are any Space characters in the user input

Restrict the duplication of div elements with JQuery

What is the significance of `()=>` in JavaScript when using Selenium?

Is there a way to transfer the input value from a textfield in one component to another component in ReactJS?

Tips on converting a Java regular expression to JavaScript regular expression

Troubleshooting problem with resizing and links in IE11 for iframe-resizer

I am looking to personalize a Material UI button within a class component using TypeScript in Material UI v4. Can you provide guidance on how to achieve this customization?

Solving the issue where the argument type is not assignable to the parameter type

When using html2canvas in Angular, it is not possible to call an expression that does not have a call signature

loading preloaded fonts at the optimal moment

Struggling to make an AJAX form function properly

Update the HTML page when switching between tabs

Initializing Three.js to load the model

Implementing Knockout.js with JqueryUI Autocomplete: Access the complete object instead of just the value

Halt the update of a variable when a different variable reaches zero

How can one dynamically update a page in Angular when the path is changed?