TypeError: n is null

[JefferMarcelino]

Im try to use TalksJS on NextJS, and its giving me a TypeError

`

27 | const session = new Talk.Session({ | ^ 28 | appId: 'MY_APP_ID', 29 | me: currentUser, 30 | }); `

Im using Next 12.2.2

[Julianerik]

Hi there!

It looks like you've missed to add your appId, you can find it in your dashboard over at https://talkjs.com/dashboard/. Also, I can't see all your code, but it looks like the last closing bracket is happening very early on in the code, have you created a ref in which you mount the inbox?

[JefferMarcelino]

I added it.

[Julianerik]

Did it solve the issue, or does it persist?

[JefferMarcelino]

Didnt solve. I keep trying to solve.

[Julianerik]

Could you share the entire code snippet where you implement TalkJS, as well as the error message?

[JefferMarcelino]

My ChatBox component

import { useEffect } from 'react';
import Talk from "talkjs";

const ChatBox = () => {
    useEffect(() => {
        Talk.ready.then(() => {
            // After `Talk.ready`
            const currentUser = new Talk.User({
                id: '156',
                name: 'Henry Msssill',
                email: 'henrymill@example.com',
                photoUrl: 'henry.jpeg',
                welcomeMessage: 'Hello!',
                role: 'default',
            });

            const otherUser = new Talk.User({
                id: 's2',
                name: 'Jessicssa Wells',
                email: 'jessicawells@example.com',
                photoUrl: 'jessica.jpeg',
                welcomeMessage: 'Hello!',
                role: 'default',
            });

            const session = new Talk.Session({
                appId: 'ID',
                me: currentUser,
            });

            const conversationID = Talk.oneOnOneId(currentUser, otherUser);
            const conversation = session.getOrCreateConversation(conversationID);
            conversation.setParticipant(currentUser);
            conversation.setParticipant(otherUser);

            const chatbox = session.createChatbox();
            chatbox.select(conversation);
            chatbox.mount(document.getElementById('talkjs-container'));
        });
    }, []);

  return (
    <div id='talkjs-container' className='fixed bottom-4 right-4 h-96 z-[999]'>
    </div>
  )
}

export default ChatBox

Where I am trying to use

const LandingPage: NextPage = () => {
    return (
        <>
            <ChatBox />
            <div>
                <Header />

                <main>
                    {/* ... */ }
                </main>

                <Footer />
            </div>
        </>
    )
}

export default LandingPage

[Julianerik]

Hi there! I would recommend you to make use of useRef hook rather than document.getElementById. Here's a tutorial for implementing TalkJS into a Next project, hopefully it can help you out: https://talkjs.com/resources/add-chat-to-a-next-js-app-with-talkjs-tutorial/

[Julianerik]

Hi! I'm gonna close this issue seeing as I haven't heard anything new. If you got any more issues, please feel free to open up a new issue, or contact us via our support chat at https://talkjs.com/ , and we can help you out further. 👍