search

langchain-ai / langchainjs

🦜🔗 Build context-aware reasoning applications 🦜🔗
https://js.langchain.com/docs/
MIT License
12.69k stars 2.18k forks source link

OpenAIEmbeddings for Web #3165

Closed pichlerpa closed 8 months ago

pichlerpa commented 1 year ago

Hi, I was wondering whether OpenAIEmbeddings should work in web/browser environments without nodejs server? I am getting the following error message when following the documentation:

image

PS: Unfortunately, I don't have access to the webpack.config.js in my case.

Thanks, Patrick

dosubot[bot] commented 1 year ago

🤖

Hello @pichlerpa! I'm Dosu, a bot here to help you with bugs, answer questions, and guide you through becoming a contributor. While we're waiting for a human maintainer, I'm here to assist you. I'm currently reviewing your issue and will get back to you with an answer shortly.

dosubot[bot] commented 1 year ago

🤖

Yes, the LangChainJS framework is designed to work in a browser environment without a Node.js server. This is demonstrated by the various test-exports-* packages used to ensure the exports field functions correctly across different JavaScript environments, including those that can run in a browser environment like Cloudflare Workers, Vercel Serverless Functions, and Vite. You can see this in the create-entrypoints.js script.

However, it's important to note that some modules are deprecated for Node.js only environments and may not work in a browser environment. Also, some modules require optional dependencies and may not work if these dependencies are not met.

Regarding the OpenAIEmbeddings module, it is used for embedding queries and documents using OpenAI's language models. It supports concurrency and retry logic, and handles errors such as timeouts and invalid organization configurations. You can see this in the openai.int.test.ts and base.ts files.

As for the error you're encountering, it would be helpful if you could provide more details about the error message and the steps you took before encountering the error. This will help in diagnosing the issue and providing a more accurate solution.

Sources

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

jacoblee93 commented 1 year ago

It should work yes - what version of LangChain are you running/can you give me a bit more info on your setup?

pichlerpa commented 1 year ago

Hey @jacoblee93, thanks a lot for your response, it's a TypeScript/React project using NodeJS version 20.9.0 and langchain version 0.0.183. This is the the tsconfig.json:

{
    "compilerOptions": {
        "allowJs": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "target": "es6",
        "sourceMap": true,
        "outDir": "./.tmp/build/",
        "moduleResolution": "node",
        "declaration": true,
        "allowSyntheticDefaultImports": true,
        "lib": [
            "es2015",
            "dom"
        ],
        "jsx": "react",
        "types": ["react", "react-dom"]
    },
    "files": [
        "src/visual.tsx"
    ]
}

If you need anything else, please let me know.

Thanks, Patrick

pichlerpa commented 10 months ago

Hey @jacoblee93, can you please help me on this? You also recently closed another issue of mine which unfortunately didn't solve it for me. I also get the 'process/browser' error now. I noticed that you have a few config adjustments in the example you provided. Maybe they make it somehow possible, even though I also tried them without any luck:

Your help would be much appreciated. Thanks, Patrick

ERROR in ./node_modules/@langchain/core/dist/callbacks/base.js 89:26-33
Module not found: Error: Can't resolve 'process/browser' in 'C:\AzureDevOps\chatbotLLM\node_modules\@langchain\core\dist\callbacks'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@langchain/core/dist/callbacks/manager.js 2:0-49 492:30-49 567:11-42
 @ ./node_modules/@langchain/core/dist/runnables/base.js 2:0-59 1159:39-64 1185:78-103
 @ ./node_modules/@langchain/core/dist/documents/transformers.js 1:0-48 12:45-53
 @ ./node_modules/@langchain/core/dist/documents/index.js 2:0-34 2:0-34
 @ ./node_modules/@langchain/core/documents.js 1:0-41 1:0-41
 @ ./node_modules/langchain/dist/document.js 1:0-53 1:0-53
 @ ./node_modules/langchain/dist/document_loaders/web/pdf.js 1:0-45 82:31-39 104:16-24
 @ ./node_modules/langchain/document_loaders/web/pdf.js 1:0-54 1:0-54
 @ ./src/chatbot.tsx 18:0-66 288:30-42
 @ ./src/visual.tsx 6:0-39 85:44-54
 @ ./.tmp/precompile/visualPlugin.ts 1:0-42 10:12-18 11:23-29

ERROR in ./node_modules/@langchain/core/dist/utils/env.js 13:35-42
Module not found: Error: Can't resolve 'process/browser' in 'C:\AzureDevOps\chatbotLLM\node_modules\@langchain\core\dist\utils'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@langchain/core/dist/callbacks/manager.js 6:0-57 522:31-53 524:33-55 526:13-35 542:36-58 543:24-46
 @ ./node_modules/@langchain/core/dist/runnables/base.js 2:0-59 1159:39-64 1185:78-103
 @ ./node_modules/@langchain/core/dist/documents/transformers.js 1:0-48 12:45-53
 @ ./node_modules/@langchain/core/dist/documents/index.js 2:0-34 2:0-34
 @ ./node_modules/@langchain/core/documents.js 1:0-41 1:0-41
 @ ./node_modules/langchain/dist/document.js 1:0-53 1:0-53
 @ ./node_modules/langchain/dist/document_loaders/web/pdf.js 1:0-45 82:31-39 104:16-24
 @ ./node_modules/langchain/document_loaders/web/pdf.js 1:0-54 1:0-54
 @ ./src/chatbot.tsx 18:0-66 288:30-42
 @ ./src/visual.tsx 6:0-39 85:44-54
 @ ./.tmp/precompile/visualPlugin.ts 1:0-42 10:12-18 11:23-29

ERROR in ./node_modules/langchain/dist/document_loaders/web/pdf.js 121:39-92
Module not found: Error: Can't resolve 'pdf-parse/lib/pdf.js/v1.10.100/build/pdf.js' in 'C:\AzureDevOps\chatbotLLM\node_modules\langchain\dist\document_loaders\web'
 @ ./node_modules/langchain/document_loaders/web/pdf.js 1:0-54 1:0-54
 @ ./src/chatbot.tsx 18:0-66 288:30-42
 @ ./src/visual.tsx 6:0-39 85:44-54
 @ ./.tmp/precompile/visualPlugin.ts 1:0-42 10:12-18 11:23-29

ERROR in ./node_modules/langsmith/dist/utils/env.js 13:35-42
Module not found: Error: Can't resolve 'process/browser' in 'C:\AzureDevOps\chatbotLLM\node_modules\langsmith\dist\utils'
Did you mean 'browser.js'?
BREAKING CHANGE: The request 'process/browser' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/langsmith/dist/client.js 4:0-79 36:8-30 42:8-30 99:23-45 100:23-45 215:33-54 280:33-55
 @ ./node_modules/langsmith/dist/index.js 1:0-37 1:0-37
 @ ./node_modules/langsmith/index.js 1:0-31 1:0-31
 @ ./node_modules/@langchain/core/dist/tracers/tracer_langchain.js 1:0-35 37:36-42
 @ ./node_modules/@langchain/core/dist/callbacks/manager.js 7:0-66 622:23-38
 @ ./node_modules/@langchain/core/dist/runnables/base.js 2:0-59 1159:39-64 1185:78-103
 @ ./node_modules/@langchain/core/dist/documents/transformers.js 1:0-48 12:45-53
 @ ./node_modules/@langchain/core/dist/documents/index.js 2:0-34 2:0-34
 @ ./node_modules/@langchain/core/documents.js 1:0-41 1:0-41
 @ ./node_modules/langchain/dist/document.js 1:0-53 1:0-53
 @ ./node_modules/langchain/dist/document_loaders/web/pdf.js 1:0-45 82:31-39 104:16-24
 @ ./node_modules/langchain/document_loaders/web/pdf.js 1:0-54 1:0-54
 @ ./src/chatbot.tsx 18:0-66 288:30-42
 @ ./src/visual.tsx 6:0-39 85:44-54
 @ ./.tmp/precompile/visualPlugin.ts 1:0-42 10:12-18 11:23-29

ERROR in ./node_modules/@langchain/core/dist/callbacks/base.js
Cannot read properties of undefined (reading 'module')
 @ ./node_modules/@langchain/core/dist/callbacks/manager.js 2:0-49 492:30-49 567:11-42
 @ ./node_modules/@langchain/core/dist/runnables/base.js 2:0-59 1159:39-64 1185:78-103
 @ ./node_modules/@langchain/core/dist/documents/transformers.js 1:0-48 12:45-53
 @ ./node_modules/@langchain/core/dist/documents/index.js 2:0-34 2:0-34
 @ ./node_modules/@langchain/core/documents.js 1:0-41 1:0-41
 @ ./node_modules/langchain/dist/document.js 1:0-53 1:0-53
 @ ./node_modules/langchain/dist/document_loaders/web/pdf.js 1:0-45 82:31-39 104:16-24
 @ ./node_modules/langchain/document_loaders/web/pdf.js 1:0-54 1:0-54
 @ ./src/chatbot.tsx 18:0-66 288:30-42
 @ ./src/visual.tsx 6:0-39 85:44-54
 @ ./.tmp/precompile/visualPlugin.ts 1:0-42 10:12-18 11:23-29

ERROR in ./node_modules/@langchain/core/dist/utils/env.js
Cannot read properties of undefined (reading 'module')
 @ ./node_modules/@langchain/core/dist/callbacks/manager.js 6:0-57 522:31-53 524:33-55 526:13-35 542:36-58 543:24-46
 @ ./node_modules/@langchain/core/dist/runnables/base.js 2:0-59 1159:39-64 1185:78-103
 @ ./node_modules/@langchain/core/dist/documents/transformers.js 1:0-48 12:45-53
 @ ./node_modules/@langchain/core/dist/documents/index.js 2:0-34 2:0-34
 @ ./node_modules/@langchain/core/documents.js 1:0-41 1:0-41
 @ ./node_modules/langchain/dist/document.js 1:0-53 1:0-53
 @ ./node_modules/langchain/dist/document_loaders/web/pdf.js 1:0-45 82:31-39 104:16-24
 @ ./node_modules/langchain/document_loaders/web/pdf.js 1:0-54 1:0-54
 @ ./src/chatbot.tsx 18:0-66 288:30-42
 @ ./src/visual.tsx 6:0-39 85:44-54
 @ ./.tmp/precompile/visualPlugin.ts 1:0-42 10:12-18 11:23-29

ERROR in ./node_modules/langsmith/dist/utils/env.js
Cannot read properties of undefined (reading 'module')
 @ ./node_modules/langsmith/dist/client.js 4:0-79 36:8-30 42:8-30 99:23-45 100:23-45 215:33-54 280:33-55
 @ ./node_modules/langsmith/dist/index.js 1:0-37 1:0-37
 @ ./node_modules/langsmith/index.js 1:0-31 1:0-31
 @ ./node_modules/@langchain/core/dist/tracers/tracer_langchain.js 1:0-35 37:36-42
 @ ./node_modules/@langchain/core/dist/callbacks/manager.js 7:0-66 622:23-38
 @ ./node_modules/@langchain/core/dist/runnables/base.js 2:0-59 1159:39-64 1185:78-103
 @ ./node_modules/@langchain/core/dist/documents/transformers.js 1:0-48 12:45-53
 @ ./node_modules/@langchain/core/dist/documents/index.js 2:0-34 2:0-34
 @ ./node_modules/@langchain/core/documents.js 1:0-41 1:0-41
 @ ./node_modules/langchain/dist/document.js 1:0-53 1:0-53
 @ ./node_modules/langchain/dist/document_loaders/web/pdf.js 1:0-45 82:31-39 104:16-24
 @ ./node_modules/langchain/document_loaders/web/pdf.js 1:0-54 1:0-54
 @ ./src/chatbot.tsx 18:0-66 288:30-42
 @ ./src/visual.tsx 6:0-39 85:44-54
 @ ./.tmp/precompile/visualPlugin.ts 1:0-42 10:12-18 11:23-29
jacoblee93 commented 10 months ago

Can you give me a bit more details about the framework you're using? And are you using Webpack?

You could also try using "type": "module" in your package.json and switching to ESM, I see a few of the errors in your trace mentioning that.

pichlerpa commented 10 months ago

Hey @jacoblee93, thanks for your response. Unfortunately, nothing has changed after adding "type": "module", ESM syntax was already in place. I provided the tsconfig.json already above, these are my webpack details:

└─┬ babel-loader@9.1.3
  └─┬ webpack@5.89.0
    └─┬ terser-webpack-plugin@5.3.10
      └── webpack@5.89.0 deduped

Thanks, Patrick

hannibalov commented 9 months ago

Hey @jacoblee93 I'm encountering a similar issue. The problem is that my current setup is for a Power BI visual done in React, so I don't have access to webpack to disable packages. As far as I can tell, the root cause is that I'm using LangChain to read PDF contents through WebPDFLoader, which has 'fs' and other dependencies that are not browser based. Please correct me if this is wrong

I created a simple React project that only reads a pdf file https://github.com/hannibalov/pdf-parse to illustrate the issue. This project uses the WebPDFLoader to read pdf contents. I also tried with "type": "module" but didn't help. The compiler throws errors:

ERROR in ./node_modules/pdf-parse/lib/pdf.js/v1.10.100/build/pdf.js 17187:13-26
Module not found: Error: Can't resolve 'fs' in 'C:\Users\Rod\Documents\projects\pdf-parse\node_modules\pdf-parse\lib\pdf.js\v1.10.100\build'

ERROR in ./node_modules/pdf-parse/lib/pdf.js/v1.10.100/build/pdf.js 17188:15-30
Module not found: Error: Can't resolve 'http' in 'C:\Users\Rod\Documents\projects\pdf-parse\node_modules\pdf-parse\lib\pdf.js\v1.10.100\build'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }'
        - install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "http": false }

ERROR in ./node_modules/pdf-parse/lib/pdf.js/v1.10.100/build/pdf.js 17189:16-32
Module not found: Error: Can't resolve 'https' in 'C:\Users\Rod\Documents\projects\pdf-parse\node_modules\pdf-parse\lib\pdf.js\v1.10.100\build'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "https": require.resolve("https-browserify") }'
        - install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "https": false }

ERROR in ./node_modules/pdf-parse/lib/pdf.js/v1.10.100/build/pdf.js 17190:14-28
Module not found: Error: Can't resolve 'url' in 'C:\Users\Rod\Documents\projects\pdf-parse\node_modules\pdf-parse\lib\pdf.js\v1.10.100\build'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
        - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "url": false }

webpack compiled with 4 errors and 1 warning

Despite the errors, the functionality actually works, and the pdf can be read. But obviously this is not ideal, because the errors are shown in the browser to the user. In a simple React app we can work around the issue using react-app-rewired, but this can't be used for a Power BI visual.

Thank you! Rodrigo

pichlerpa commented 8 months ago

It finally works by customizing parts of the webpack config to something like this:

resolve: { 
    alias: {
        http: "stream-http",
        https: "https-browserify",
        zlib: "browserify-zlib",
        stream: "stream-browserify",
        sharp$: false,
        'onnxruntime-node$': false,
    },
    fallback: {
        fs: false,
        'node:fs/promises': false,
        module: false,
        perf_hooks: false,
    },
    extensions: [".tsx", ".ts", ".jsx", ".js", ".css"],
},