Closed gsans closed 6 months ago
๐ค
Hello @gsans,
I'm here to assist you with your issue. It seems like you're encountering a TypeError when trying to implement the getting started code for chatModel from the LangChainJS documentation.
The error you're seeing typically occurs when you're trying to access a property of an object that hasn't been defined. In your case, it seems like the 'message' property of the 'generations[0][0]' object is undefined.
Looking at your network response, it seems like the response structure is slightly different from what the call
method in base.js
expects. The call
method tries to access the 'message' property of the first item in the 'generations' array. However, in your network response, the 'message' property is nested inside the 'choices' array, which is not being accessed in the call
method.
Here's the relevant part of your network response:
"choices": [
{
"index": 0,
"message": {
"role": "assistant",
"content": "Rainbow Steps Socks Co."
},
"finish_reason": "stop"
}
]
And here's the relevant part of the call
method:
const generations = result.generations;
return generations[0][0].message;
As you can see, the call
method is trying to access 'message' directly from the first item in the 'generations' array, but in your network response, 'message' is nested inside the 'choices' array.
To fix this issue, you might need to adjust the call
method to correctly access the 'message' property from the network response. Here's an example of how you could do this:
const generations = result.generations;
return generations[0][0].choices[0].message;
Please note that this is just a suggestion and might not work depending on the exact structure of your 'generations' array and the rest of your code. If you're still having trouble, please provide more context or details about the error.
I hope this helps! If you have any more questions, feel free to ask.
Best, Dosu
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.
You are completely right but "base.js" is part of LangChain codebase.
Hey @gsans, we made some updates to message formatting in more recent versions and the quickstart likely reflects that. Can you try upgrading to latest?
Please reopen if that doesn't fix it.
I am using the latest I believe. This is 0.0.179
ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'message')
TypeError: Cannot read properties of undefined (reading 'message')
at base.cjs:233:34
at Generator.next (<anonymous>)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:22:1)
at _ZoneDelegate.invoke (zone.js:368:26)
at Object.onInvoke (core.mjs:11083:33)
at _ZoneDelegate.invoke (zone.js:367:52)
at Zone.run (zone.js:129:43)
at zone.js:1257:36
at _ZoneDelegate.invokeTask (zone.js:402:31)
at resolvePromise (zone.js:1193:31)
at zone.js:1100:17
at zone.js:1116:33
at asyncGeneratorStep (asyncToGenerator.js:6:1)
at _throw (asyncToGenerator.js:25:1)
at _ZoneDelegate.invoke (zone.js:368:26)
at Object.onInvoke (core.mjs:11083:33)
at _ZoneDelegate.invoke (zone.js:367:52)
at Zone.run (zone.js:129:43)
at zone.js:1257:36
Response
{
"id": "chatcmpl-8FlykYkpWUvDEY2jjKyJr1bd5KIUD",
"object": "chat.completion",
"created": 1698770042,
"model": "gpt-4-0613",
"choices": [
{
"index": 0,
"message": {
"role": "assistant",
"content": "1. \"Rainbow Threads\"\n2. \"Vibrant Steps\"\n3. \"Spectrum Socks\"\n4. \"Kaleidoscope Comforts\"\n5. \"BrightStride\"\n6. \"ColorPop Socks\"\n7. \"Sock Prism\"\n8. \"Technicolor Toes\"\n9. \"ColorWheel Socks\"\n10. \"Hue Crew\".\n11. \"DazzleSox\"\n12. \"Radiant Wraps\"\n13. \"ChromaFoot\"\n14. \"Colorful Cozies\"\n15. \"Rainbow Peds\"\n16. \"ColorSplash Socks\"\n17. \"VividFootwear\"\n18. \"Pulse of Colors\"\n19. \"PixelSocks\"\n20. \"Stellar Stripes\" \n21. \"ColorCraze Footwear\"\n22. \"Rainbow Rings Socks\"\n23. \"ColorFun Footies\"."
},
"finish_reason": "stop"
}
],
"usage": {
"prompt_tokens": 22,
"completion_tokens": 185,
"total_tokens": 207
}
}
I did notice that the error pops way before the response is back. Could it be a build setting that is messing up with async/await?
tsconfig
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
Please reopen as it seems to be persistent for Angular apps
Thanks, will try to repro today.
Hey @gsans could you provide the babel config you're using? I see in the issue you filed in Angular you mention A babel plugin that is used to wrap promises into generators could also be involved.
.
While looking at why there seems to be a Generator code involved. I found out that Angular CLI had a babel setting that could be involved.
This issue shows the code I saw https://github.com/angular/angular-cli/issues/25708
if (options.forceAsyncTransformation) {
// Always transform async/await to support Zone.js
plugins.push(
require('@babel/plugin-transform-async-to-generator').default,
require('@babel/plugin-proposal-async-generator-functions').default,
);
needRuntimeTransform = true;
}
This CLI option forceAsyncTransformation
is not available now but somehow the error shows some traces of a similar mechanism.
The general idea is that Angular change detection (Zones) doesnโt support native Async/await so some other mechanism is needed. My current understanding is that this is messing up with LangChain base codebase.
Since reporting this Iโve tried to run LangChain code outside Zones but Iโm afraid the build is still messing with the code anyways.
Iโve also reported this issue to the Angular team to see if they can add some light into a possible workaround.
Created a repo for easy reproduction. https://github.com/gsans/repro-app
Needs OpenAI API key. Instructions https://www.maisieai.com/help/how-to-get-an-openai-api-key-for-chatgpt
1) Run this Angular CLI command to create the local environment
ng g environments
2) Fill in OpenAI API key
// src/environments/environment.development.ts
export const environment = {
OPENAI_API_KEY: "<<ADD-HERE>>"
};
3) Run locally at http://localhost:4200/
ng serve
4) Click on call button to reproduce error in the console
5) Console
core.mjs:10614 ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'message')
TypeError: Cannot read properties of undefined (reading 'message')
at base.js:229:34
at Generator.next (<anonymous>)
at asyncGeneratorStep (asyncToGenerator.js:3:1)
at _next (asyncToGenerator.js:22:1)
at _ZoneDelegate.invoke (zone.js:368:26)
at Object.onInvoke (core.mjs:11083:33)
at _ZoneDelegate.invoke (zone.js:367:52)
at Zone.run (zone.js:129:43)
at zone.js:1257:36
at _ZoneDelegate.invokeTask (zone.js:402:31)
at resolvePromise (zone.js:1193:31)
at resolvePromise (zone.js:1147:17)
at zone.js:1260:17
at _ZoneDelegate.invokeTask (zone.js:402:31)
at core.mjs:10757:55
at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10757:36)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Object.onInvokeTask (core.mjs:11070:33)
at _ZoneDelegate.invokeTask (zone.js:401:60)
at Zone.runTask (zone.js:173:47)
Wait for response in the Network tab. Call is successful.
{
"id": "chatcmpl-8GV5Yh4366uVozlQ1NeceMvwoM70P",
"object": "chat.completion",
"created": 1698943444,
"model": "gpt-4-0613",
"choices": [
{
"index": 0,
"message": {
"role": "assistant",
"content": "1. Rainbow Steps\n2. Colorful Cozy Toes\n3. Spectrum Socks\n4. Vibrant Footprints\n5. Popsicle Peds\n6. Bright Steps\n7. Colorama Socks\n8. Hue Crew Socks\n9. Kaleidoscope Socks \n10. ColorSplash Footwear\n11. Technicolor Toes\n12. Dazzle Digits\n13. Footnote Colors\n14. Chromatic Comforts\n15. Tinted Toes\n16. Shade Parade Socks\n17. Rainbow Wrappings\n18. Palette Peds\n19. Prism Paws\n20. ColorWheel Socks\n21. Spectrum Strides\n22. Jazzy Jamboree Socks\n23. Bright Feet Beat\n24. Radiant Rambles\n25. Pigment Patter Socks."
},
"finish_reason": "stop"
}
],
"usage": {
"prompt_tokens": 22,
"completion_tokens": 178,
"total_tokens": 200
}
}
As an overview. The call throws immediately without waiting for the response to come back. The issue seems to be the asyncToGenerator wrapper that fails to replace the original async/await code from LangChain base.js pointing to either: 1) a possible build issue or 2) implementation issue at base.js.
This issue is important as it seems LangChain cannot be used with Angular at the moment.
Thank you CC @bracesproul
I'm running into this with my angular app as well. I was able to update until langchain 0.0.140. The error occurs starting with 0.0.141. Looking at the release notes, only one change stands out: Upgrade to OpenAI v4 (extends #2353) by @jacoblee93 in #2389
https://github.com/openai/openai-node/issues/232 sounds like the same issue.
Hi, @gsans,
I'm helping the langchainjs team manage their backlog and am marking this issue as stale. From what I understand, the issue was reported by you regarding a TypeError in the call
method of the base.js
file in the langchain
package. There were discussions about potential fixes, including upgrading to the latest version of the package and investigating Angular build settings. However, it seems that the issue remains unresolved, and it's unclear if it's still relevant to the latest version of the langchainjs repository.
Could you please confirm if the issue is still relevant to the latest version of the langchainjs repository? If it is, please let the langchainjs team know by commenting on the issue. Otherwise, feel free to close the issue yourself, or it will be automatically closed in 7 days. Thank you for your understanding and contribution to the langchainjs project.
I provided all the details you asked for. That included a reproduction project and the versions that introduced the issue in your side.
Iโve lost interest and trust in your capacity to check on your own issues to provide a solution even when given all the information down to the exact version while dismissing a whole ecosystem like Angular.
It is your own interest to follow up issues and get to the bottom of them. You should behave more professionally.
Gerard.
On Sat, 2 Mar 2024 at 11:01, dosubot[bot] @.***> wrote:
Hi, @gsans https://github.com/gsans,
I'm helping the langchainjs team manage their backlog and am marking this issue as stale. From what I understand, the issue was reported by you regarding a TypeError in the call method of the base.js file in the langchain package. There were discussions about potential fixes, including upgrading to the latest version of the package and investigating Angular build settings. However, it seems that the issue remains unresolved, and it's unclear if it's still relevant to the latest version of the langchainjs repository.
Could you please confirm if the issue is still relevant to the latest version of the langchainjs repository? If it is, please let the langchainjs team know by commenting on the issue. Otherwise, feel free to close the issue yourself, or it will be automatically closed in 7 days. Thank you for your understanding and contribution to the langchainjs project.
โ Reply to this email directly, view it on GitHub https://github.com/langchain-ai/langchainjs/issues/3105#issuecomment-1974837522, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABDRYXDGHKERLRK5Y5OSWDDYWHZWRAVCNFSM6AAAAAA6X3Q4JGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZUHAZTONJSGI . You are receiving this because you were mentioned.Message ID: @.***>
Hey apologies for the silence here - we're a very small team and have a ton to cover.
It sounded like the problem was lower level in the OpenAI dep based on the linked issue? If so you could make another custom class that depends on the prior version of OpenAI:
https://js.langchain.com/docs/guides/extending_langchain
Otherwise I'm not sure there's any changes we can make in LangChain to help.
The issue has been solved on the angular side in zone.js 0.14.3: https://github.com/angular/angular/issues/53380 I have since then been able to update langchain in my angular project.
Following the code here.
The output is:
Looking at "base.js"
Not sure how to proceed as this is failing after adding the code from the docs.
Respone from Network looks good
package.json
For reference original code: