Using NextJS 13 with Langchain's recommended vectorstore giving Error: HNSWLib is not installed

Question

I'm creating an app with the help of Langchain and OpenAI. I'm loading my data with JSONLoader and want to store it in a vectorstore, so I can retrieve on user request to answer questions specific to my data. The Langchain docs are describing HNSWLib as a possible store for ONLY Node.js apps. In my understanding is that NEXT is built up on top of Node.js so it can run SS javascript, so I should be able to use it. I should also mention that the JSONLoader also only works on NodeJS, which works perfectly, so I reckon it should be all set.

I've created an API route in app/api/llm/route.ts following the docs of the new Route Handlers, and also installed the hnswlib-node package.

import { NextRequest } from 'next/server';
import { OpenAI } from 'langchain/llms/openai';
import { RetrievalQAChain } from 'langchain/chains';
import { JSONLoader } from 'langchain/document_loaders/fs/json';
import { HNSWLib } from 'langchain/vectorstores/hnswlib';
import { OpenAIEmbeddings } from 'langchain/embeddings/openai';
import path from 'path';

// eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
export const GET = async (req: NextRequest) => {
  const apiKey = process.env.NEXT_PUBLIC_OPENAI_API_KEY;
  const model = new OpenAI({ openAIApiKey: apiKey, temperature: 0.9, modelName: 'gpt-3.5-turbo' });
  // Initialize the LLM to use to answer the question.
  const loader = new JSONLoader(path.join(process.cwd(), '/assets/surfspots.json'));
  const docs = await loader.load();

  // Create a vector store from the documents.
  const vectorStore = await HNSWLib.fromDocuments(docs, new OpenAIEmbeddings({ openAIApiKey: apiKey }));

  // Create a chain that uses the OpenAI LLM and HNSWLib vector store.
  const chain = RetrievalQAChain.fromLLM(model, vectorStore.asRetriever());
  const res = await chain.call({
    query: 'List me all of the waves I can find in Fuerteventura',
  });
  console.log({ res });
};

Which I'm calling on the front-end inside of a client-side react component.

When I'm trying to run this code, I get the following error:

Error: Please install hnswlib-node as a dependency with, e.g. `npm install -S hnswlib-node`
    at HNSWLib.imports (webpack-internal:///(sc_server)/./node_modules/langchain/dist/vectorstores/hnswlib.js:184:19)

I tried reinstalling the package, removed node_modules and reinstall everything again, search the web for answers, etc.

Anybody worked with these libraries or have any direction I could consider to debug this? Thank you in advance!

Answer 1

After trying to reinstall, change import and remove standalone package and trying to use from the langchain library. I came across an issue on github. On langchain/js's github, there is thread describing similar issue with different environments, and it turned out, the next.config.js file needed some extra setup to make it work. Huge shoutout to @manduks.

https://github.com/hwchase17/langchainjs/issues/943#issuecomment-1544928533

Adding line 6 sorted the problem.

/** @type {import("next").NextConfig} */
module.exports = {
  experimental: { appDir: true },
  webpack(config) {
    config.experiments = { ...config.experiments, topLevelAwait: true };
    config.externals = [...config.externals, 'hnswlib-node'];  // by adding this line, solved the import
    return config;
  },
};