OvidijusParsiunas / deep-chat

Fully customizable AI chatbot component for your website
https://deepchat.dev
MIT License
1.26k stars 170 forks source link

NEXTJS App Router Error #140

Closed Mohamed-Abdulla closed 3 months ago

Mohamed-Abdulla commented 3 months ago

⨯ node_modules\deep-chat\dist\deepChat.js (192:0) @ eval ⨯ ReferenceError: navigator is not defined

OvidijusParsiunas commented 3 months ago

Hi @Mohamed-Abdulla.

It looks like you may be importing Deep Chat into your NextJs project incorrectly. Please see our live example or our code example. NextJs requires the deep-chat-react package that is imported as:

const DeepChat = dynamic(() => import('deep-chat-react').then((mod) => mod.DeepChat), {
  ssr: false,
});

If the problem persists please let me know more about your NextJs version and other details to allow me to reproduce it. Thankyou!

Mohamed-Abdulla commented 3 months ago

"dependencies": { "deep-chat-react": "^1.4.11", "next": "14.1.2", "react": "^18", "react-dom": "^18" },

⨯ node_modules\deep-chat\dist\deepChat.js (193:0) @ eval ⨯ ReferenceError: window is not defined

here is the code man

import dynamic from "next/dynamic";

export default function Home() { const DeepChat = dynamic(() => import("deep-chat-react").then((mod) => mod.DeepChat), { ssr: false, });

appreciate ur help . Thanks

FYI: "use client"; when I mark it as use client I can use it, I assume it only works on client component, since its use window object.

OvidijusParsiunas commented 3 months ago

The framework version that you are using works for me, so it is likely something else in your project.

It is interesting that you have to use "use client" to make it work, the ssr: false property should take care of it. Are you perhaps rendering this from the api directory files? Also, if you use "use client", does it then work perfectly?

I recommend checking out our live example or trying to run our code example to see if they work for you and then comparing the difference in those projects to yours to help identify the cause of the problem.

Let me know if you are able to find anything and if you can provide anything else that is unique about your project.

Thankyou!

Mohamed-Abdulla commented 3 months ago

No, i'm using app router. no API dir.

yes if i use use client, it works perfectly.

i looked ur example, you are using pages directory. perhaps that's different

OvidijusParsiunas commented 3 months ago

That's good to know, I'll investigate the use of app router and perhaps create more examples. Thanks!

OvidijusParsiunas commented 3 months ago

The documentation has now been updated with live exampels for App Router and Pages Router APIs.

The repository has also been updated with a new App Router project and the previous example has been migrated to the Pages Router directory.