error while SSR (server-side rendering) -> document is not defined

[incodedev]

[FredrikOseberg]

@incodedev

Interesting. This should have been solved by building for node. Could you provide me with some more information?

• What technologies are you using for your HTTP server
• How are you trying to use this kit?

If you have your project on github, please link it here.

[incodedev]

I am working with nextjs, reactjs and try to render all pages in server first. sorry but my project is not publicly available so i can''t provide link.

[incodedev]

I am working with nextjs, reactjs and try to render all pages in server first. sorry but my project is not publicly available so i can''t provide link.

May be this kit need to upgrade building for node.

[FredrikOseberg]

I am working with nextjs, reactjs and try to render all pages in server first. sorry but my project is not publicly available so i can''t provide link.

May be this kit need to upgrade building for node.

It's already building for Node and I've successfully SSRed it with express and React.hydrate() following this recipe: https://www.digitalocean.com/community/tutorials/react-server-side-rendering

I'll setup a next.js project and see what is going on then. Can you provide me with steps to reproduce so I can debug locally?

[VincenzoMarcovecchio]

while building my gatsby project I get a similar error in the console

9:09:03 PM: failed Building static HTML for pages - 2.146s 9:09:03 PM: error "document" is not available during server side rendering. 9:09:03 PM: 9:09:03 PM: > 1 | module.exports=function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerab ........ 9:09:03 PM: WebpackError: ReferenceError: document is not defined 9:09:03 PM:
9:09:03 PM: - index.js:1 9:09:03 PM: node_modules/react-chatbot-kit/build/index.js:1:1792 9:09:03 PM:
9:09:03 PM: - index.js:1 9:09:03 PM: node_modules/react-chatbot-kit/build/index.js:1:3032 9:09:03 PM:
9:09:03 PM: - index.js:1 9:09:03 PM: node_modules/react-chatbot-kit/build/index.js:1:1716 9:09:03 PM:

[johnschult]

I'll setup a next.js project and see what is going on then. Can you provide me with steps to reproduce so I can debug locally?

I had the same issue as well. Just use a plain next.js starter project and add the component with config, etc.

[ReidwMorgan]

@FredrikOseberg I'm also trying to use this module in Nextjs. It's so much better than all the other chatbot modules that I've found, but I'm running into problems with the SSR (I think). Were you ever able to get it working on Nextjs?

I used the 'next/dynamic' function to get past the SSR loading of the module, but I am also stuck in the config file where [createChatBotMessage('Hello World')] is not recognized as a function.

Any hints on how to solve this?

I really love this chatbot, so I'm more that willing to put in some work to get a solution (warning: I am terrible at front end stuff).

Thanks!

[FredrikOseberg]

Hey. This is something I really want solved aswell. I have been working on 2.0 which is currently an open PR on the repository. Would love to have this support as a part of that release. Do you have a repository I can have a look at? Then I can link the package locally and debug.

tor. 16. sep. 2021 kl. 19:03 skrev ReidwMorgan @.***>:

@FredrikOseberg https://github.com/FredrikOseberg I'm also trying to use this module in Nextjs. It's so much better than all the other chatbot modules that I've found, but I'm running into problems with the SSR (I think). Were you ever able to get it working on Nextjs?

I used the 'next/dynamic' function to get past the SSR loading of the module, but I am also stuck in the config file where [createChatBotMessage('Hello World')] is not recognized as a function.

Any hints on how to solve this?

I really love this chatbot, so I'm more that willing to put in some work to get a solution (warning: I am terrible at front end stuff).

Thanks!

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub https://github.com/FredrikOseberg/react-chatbot-kit/issues/36#issuecomment-921075710, or unsubscribe https://github.com/notifications/unsubscribe-auth/AD2WIPXWNNKVRHKDN77Q5ZDUCIPNJANCNFSM4ZF7ZSRQ .

[ReidwMorgan]

Hey Fredrik!

Thanks for the quick reply. I'm actually just starting to build out a simple website and chatbot for all the backend logic I've been working on.

My project is based around my beta access to OpenAI's GPT3 and codex. I'm trying to create not just a production chat interface, but also an easy to use bot training interface as well (eg "Was this response helpful?" Yes/No, or "Type your ideal response to this sample question.", etc.).

I also am very interested in a comment you made about building this up to a full eCommerce workflow, but I'm getting waaaaay ahead of myself!

I don't have a repository at the moment, but I'll set one up and send you the link. Fair warning, I absolutely destroyed this code while trying to get this working.

Thanks,

Reid

On Thu, Sep 16, 2021 at 10:10 AM Fredrik Strand Oseberg < @.***> wrote:

Hey. This is something I really want solved aswell. I have been working on 2.0 which is currently an open PR on the repository. Would love to have this support as a part of that release. Do you have a repository I can have a look at? Then I can link the package locally and debug.

tor. 16. sep. 2021 kl. 19:03 skrev ReidwMorgan @.***>:

@FredrikOseberg https://github.com/FredrikOseberg I'm also trying to use this module in Nextjs. It's so much better than all the other chatbot modules that I've found, but I'm running into problems with the SSR (I think). Were you ever able to get it working on Nextjs?

I used the 'next/dynamic' function to get past the SSR loading of the module, but I am also stuck in the config file where [createChatBotMessage('Hello World')] is not recognized as a function.

Any hints on how to solve this?

I really love this chatbot, so I'm more that willing to put in some work to get a solution (warning: I am terrible at front end stuff).

Thanks!

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub < https://github.com/FredrikOseberg/react-chatbot-kit/issues/36#issuecomment-921075710 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AD2WIPXWNNKVRHKDN77Q5ZDUCIPNJANCNFSM4ZF7ZSRQ

.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/FredrikOseberg/react-chatbot-kit/issues/36#issuecomment-921080674, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMRUARVZ3MMNMYUH6HG243TUCIQILANCNFSM4ZF7ZSRQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- Reid Morgan 604.355.6517

[ReidwMorgan]

Hey Fredrik, here's the link to my very basic and broken code.

Hopefully my trail of destruction is clear enough that you can follow my different attempts to get this working, but here's a quick summary:

• disabling SSR and importing react-chatbot-kit using Nextjs "dynamic from 'next/dynamic".
• trying to wrap the module to see if that would help.
• Attempting to update the DOM with the Chatbot code via useEffect()
• Adding Typescript (first time ever) to try and force recognition of createChatBotMessage as a function for initial message in config file.
• packing config file into Chatbot function to see if that helps?

Again, front end is pretty new to me, so apologies for the absolute mess.

https://github.com/ReidwMorgan/support-bot-eh/tree/master/supportbot

Thanks! Any direction would be really appreciated!

On Thu, Sep 16, 2021 at 10:48 AM Reid Morgan @.***> wrote:

Hey Fredrik!

Thanks for the quick reply. I'm actually just starting to build out a simple website and chatbot for all the backend logic I've been working on.

My project is based around my beta access to OpenAI's GPT3 and codex. I'm trying to create not just a production chat interface, but also an easy to use bot training interface as well (eg "Was this response helpful?" Yes/No, or "Type your ideal response to this sample question.", etc.).

I also am very interested in a comment you made about building this up to a full eCommerce workflow, but I'm getting waaaaay ahead of myself!

I don't have a repository at the moment, but I'll set one up and send you the link. Fair warning, I absolutely destroyed this code while trying to get this working.

Thanks,

Reid

On Thu, Sep 16, 2021 at 10:10 AM Fredrik Strand Oseberg < @.***> wrote:

Hey. This is something I really want solved aswell. I have been working on 2.0 which is currently an open PR on the repository. Would love to have this support as a part of that release. Do you have a repository I can have a look at? Then I can link the package locally and debug.

tor. 16. sep. 2021 kl. 19:03 skrev ReidwMorgan @.***>:

@FredrikOseberg https://github.com/FredrikOseberg I'm also trying to use this module in Nextjs. It's so much better than all the other chatbot modules that I've found, but I'm running into problems with the SSR (I think). Were you ever able to get it working on Nextjs?

I used the 'next/dynamic' function to get past the SSR loading of the module, but I am also stuck in the config file where [createChatBotMessage('Hello World')] is not recognized as a function.

Any hints on how to solve this?

I really love this chatbot, so I'm more that willing to put in some work to get a solution (warning: I am terrible at front end stuff).

Thanks!

— You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub < https://github.com/FredrikOseberg/react-chatbot-kit/issues/36#issuecomment-921075710 , or unsubscribe < https://github.com/notifications/unsubscribe-auth/AD2WIPXWNNKVRHKDN77Q5ZDUCIPNJANCNFSM4ZF7ZSRQ

.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/FredrikOseberg/react-chatbot-kit/issues/36#issuecomment-921080674, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMRUARVZ3MMNMYUH6HG243TUCIQILANCNFSM4ZF7ZSRQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

-- Reid Morgan 604.355.6517

-- Reid Morgan 604.355.6517

[FredrikOseberg]

Hey Fredrik, here's the link to my very basic and broken code. Hopefully my trail of destruction is clear enough that you can follow my different attempts to get this working, but here's a quick summary: disabling SSR and importing react-chatbot-kit using Nextjs "dynamic from 'next/dynamic". trying to wrap the module to see if that would help. Attempting to update the DOM with the Chatbot code via useEffect() Adding Typescript (first time ever) to try and force recognition of createChatBotMessage as a function for initial message in config file. * packing config file into Chatbot function to see if that helps? Again, front end is pretty new to me, so apologies for the absolute mess. https://github.com/ReidwMorgan/support-bot-eh/tree/master/supportbot Thanks! Any direction would be really appreciated! … On Thu, Sep 16, 2021 at 10:48 AM Reid Morgan @.> wrote: Hey Fredrik! Thanks for the quick reply. I'm actually just starting to build out a simple website and chatbot for all the backend logic I've been working on. My project is based around my beta access to OpenAI's GPT3 and codex. I'm trying to create not just a production chat interface, but also an easy to use bot training interface as well (eg "Was this response helpful?" Yes/No, or "Type your ideal response to this sample question.", etc.). I also am very interested in a comment you made about building this up to a full eCommerce workflow, but I'm getting waaaaay ahead of myself! I don't have a repository at the moment, but I'll set one up and send you the link. Fair warning, I absolutely destroyed this code while trying to get this working. Thanks, Reid On Thu, Sep 16, 2021 at 10:10 AM Fredrik Strand Oseberg < @.> wrote: > Hey. This is something I really want solved aswell. I have been working on > 2.0 which is currently an open PR on the repository. Would love to have > this support as a part of that release. Do you have a repository I can > have > a look at? Then I can link the package locally and debug. > > tor. 16. sep. 2021 kl. 19:03 skrev ReidwMorgan @.***>: > > > @FredrikOseberg https://github.com/FredrikOseberg I'm also trying to > > use this module in Nextjs. It's so much better than all the other > chatbot > > modules that I've found, but I'm running into problems with the SSR (I > > think). Were you ever able to get it working on Nextjs? > > > > I used the 'next/dynamic' function to get past the SSR loading of the > > module, but I am also stuck in the config file where > > [createChatBotMessage('Hello World')] is not recognized as a function. > > > > Any hints on how to solve this? > > > > I really love this chatbot, so I'm more that willing to put in some work > > to get a solution (warning: I am terrible at front end stuff). > > > > Thanks! > > > > — > > You are receiving this because you were mentioned. > > > > > > Reply to this email directly, view it on GitHub > > < > #36 (comment) > >, > > or unsubscribe > > < > https://github.com/notifications/unsubscribe-auth/AD2WIPXWNNKVRHKDN77Q5ZDUCIPNJANCNFSM4ZF7ZSRQ > > > > . > > > > — > You are receiving this because you are subscribed to this thread. > Reply to this email directly, view it on GitHub > <#36 (comment)>, > or unsubscribe > https://github.com/notifications/unsubscribe-auth/AMRUARVZ3MMNMYUH6HG243TUCIQILANCNFSM4ZF7ZSRQ > . > Triage notifications on the go with GitHub Mobile for iOS > https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 > or Android > https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. > > -- Reid Morgan 604.355.6517 -- Reid Morgan 604.355.6517

@ReidwMorgan I got it working in a next js app. Can you verify on your end by trying out this package version:

 "react-chatbot-kit": "2.0.0-beta.4"

Bear in mind this brings a change to how we deal with CSS so you need to add this line of code at the top of your file:

import 'react-chatbot-kit/build/main.css';

[FredrikOseberg]

@ReidwMorgan I cloned your repo and got it working with the new package version. Should be good if you use 2.0.0-beta.4

[ReidwMorgan]

@FredrikOseberg that was so fast!

I'll try it out tonight. Thanks!

[ReidwMorgan]

I couldn't wait.

It works!!!

This is really exciting. Thank you!

[derekfreed]

@ReidwMorgan did you ever get the bot working with gpt? I'm trying to do the same

[ReidwMorgan]

Ah no.

I did a fine tune of GPT 3 for my business use case, and even with hundreds of examples it still wasn’t good enough.

That said, I just got got 4 api access and found the langchain library. This combo could create some amazing custom chatbots, I think.

I’m at a bigger company now with a bunch of devs, so I was planning to knock on their door after I get the backend stuff working.

Check out Langchain, if you don’t know it. It’s excellent.

On Wed, May 10, 2023 at 9:56 AM Derek @.***> wrote:

@ReidwMorgan https://github.com/ReidwMorgan did you ever get the bot working with gpt? I'm trying to do the same

— Reply to this email directly, view it on GitHub https://github.com/FredrikOseberg/react-chatbot-kit/issues/36#issuecomment-1542526759, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMRUARSFJY2NKCSEDOI45ZLXFPCCBANCNFSM4ZF7ZSRQ . You are receiving this because you were mentioned.Message ID: @.***>

-- Reid Morgan 604.355.6517