Import error when using in React-vite project

[KtechB]

First of all, I'm glad to use langchain in Javascript. Thank you to the creators.

However when I tried to use langchain.js in React-vite project, the code seems to fail.

This code is React-vite initial code with langchain's LLM import.

import { useState } from "react";
import reactLogo from "./assets/react.svg";
import "./App.css";
import { OpenAI } from "langchain";
function App() {
  const [count, setCount] = useState(0);
  const llm = new OpenAI({ temperature: 0.9 });

  return (
    <div className="App">
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src="/vite.svg" className="logo" alt="Vite logo" />
        </a>
        <a href="https://reactjs.org" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </div>
  );
}

export default App;

Run this app yarn dev then, I got this error in console.

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/langchain.js?v=74bcca3d' does not provide an export named 'OpenAI' (at App.tsx:4:10)

Not only OpenAI, other classes also give me import error.

Running node v16.13.0 on macOs Montery 12.3.1 , apple silicon m1 chip.

Anyone know how to resolve this probrem?

[DennisKo]

So there are two problems.

1) It's not exporting ES modules yet. There are open PRs for enabling that, though. 2) You are trying to use it on the client side (inside the browser). That won't work currently as these functions use nodejs native modules, like stream and fs etc. You would need to use an SSR function and import it there. Or a real nodejs backend server.

[KtechB]

@DennisKo Thank you for answering.

That won't work currently as these functions use nodejs native modules, like stream and fs etc.

I got it. I didn't know Langchain.js is for node.js, not for client-side. Are there any plans to support frontend in the future? If so, it might be better close this issue.

[nfcampos]

Hi @KtechB at the moment the library is designed for node only. We're planning on supporting additional environments in the future, collecting some thoughts from the community on what environment we should support next at #152

[nfcampos]

Support for Browsers, Cloudflare workers, Nextjs/vercel (browser/serverless/edge), Deno, Supabase edge functions has been released, see https://blog.langchain.dev/js-envs/ for details. See the docs for install/upgrade instructions https://js.langchain.com/docs/getting-started/install including some breaking changes

Any issues let me know