Supported in NextJS?

[jhaji2911]

I have a question

Hi, I tried using the botframework-webchat: ^4.15.6 in my existing nextjs application next: 12.1.4,

I tried importing the import ReactWebChat ,{createDirectLine, createStore,createStyleSet } from "botframework-webchat"; and also by using dynamic import with ssr:false, but it throws window not defined .

Any Idea how to fix it?, and is botframework-webchat supported on applications that use SSR?

[stevkan]

@jhaji2911 - thank you for reporting this. I'll attempt a repro of the issue and will let you know what I find.

[jhaji2911]

@jhaji2911 - thank you for reporting this. I'll attempt a repro of the issue and will let you know what I find.

@stevkan Thanks.

[compulim]

I know we are not doing a great job on SSR. We build our UI couple of years ago before SSR is as popular as today.

It would be interested to know which part of our code use window. And also which of our partner code use window, (say, DirectLineJS).

We don't have a plan on SSR. But we are open and love to learn how to become SSR.

I also expect the chat adapter (say, DirectLineJS) may need significant investment to enable SSR. Fetching chat history on server-side should use REST, instead of Web Socket. Our current chat adapter API may need to be revamped as well because it's currently event-driven.

Let's see what we learn. 😉

[jhaji2911]

@compulim Thanks for your response.

Actually I tried implementing chatBot using createDirectLine and ReactWebChat in combination, ,and I discovered a work around (but it is not SSR) for now the connection is established :) , I have created a chatBot component and I imported it in _app.tsx (this is the root for next.js applications) by calling this component dynamically with SSR:false it is working.

If we do SSR:true then it breaks, the error goes like this - at Object.<anonymous> (/myproject/directory/node_modules/botframework-webchat-api/lib/hooks/Composer.js:530:11) at Module._compile (node:internal/modules/cjs/loader:1103:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) at Module.load (node:internal/modules/cjs/loader:981:32) at Function.Module._load (node:internal/modules/cjs/loader:822:12) at Module.require (node:internal/modules/cjs/loader:1005:19) at require (node:internal/modules/cjs/helpers:102:18) at Object.<anonymous> (/myproject/directory/node_modules/botframework-webchat-api/lib/index.js:50:40) at Module._compile (node:internal/modules/cjs/loader:1103:14) at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10) error - node_modules/botframework-webchat-api/lib/hooks/Composer.js (646:10) @ Object.<anonymous> ReferenceError: window is not defined .

If you need anymore information on this, do let me know, would be happy to learn and contribute more on this topic.

[ADudija]

If you guys are still trying to figure out how to implement this package into nextjs, here how can you do that avoiding the windows undefined error.

const WebChat = dynamic(
    () => {
        return import("botframework-webchat").then(mod => mod);
    },
    { ssr: false }
);

const [directLine, setDirectLine] = useState(null);
const [store, setStore] = useState(null);

useEffect(() => {
    loadChatBot();
}, []);

const loadChatBot = async () => {
    const { createStore, createDirectLine } = await import("botframework-webchat");
    const dl = createDirectLine({ token: 'Your token here' });
    const st = createStore();
    setDirectLine(dl)
    setStore(store)

};

[iamkarantalwar]

when will this get resolved?

[m10rten]

If you guys are still trying to figure out how to implement this package into nextjs, here how can you do that avoiding the windows undefined error.

const WebChat = dynamic(
    () => {
        return import("botframework-webchat").then(mod => mod);
    },
    { ssr: false }
);

const [directLine, setDirectLine] = useState(null);
const [store, setStore] = useState(null);

useEffect(() => {
    loadChatBot();
}, []);

const loadChatBot = async () => {
    const { createStore, createDirectLine } = await import("botframework-webchat");
    const dl = createDirectLine({ token: 'Your token here' });
    const st = createStore();
    setDirectLine(dl)
    setStore(store)

};

Hi @ADudija , Do you have a full file example?

[donald-boosted]

I am having the same issue on Nextjs 13

[OEvgeny]

Here is the working example of WebChat + NextJS: https://stackblitz.com/edit/stackblitz-starters-e38mut?file=app%2Fpage.tsx

Please refer to #5024 for more details