Unexpected line break while using in react.js

[Mert18]

I have set up the terminal with my socket connection following the instructions. However, I encountered an unexpected linebreak in the middle of the screen. My parent div takes all the width but terminal breaks after x cols.

I am opening terminal in the new window,

Details

• Chrome
• Windows 11
• 5.2.1

Steps to reproduce

const fitAddon = new FitAddon();

useEffect(() => {
        if(neIp){
            socket.on("connect", function () {
                const term = new Terminal({cursorBlink: true, theme: xtermjsTheme});
                const terminalContainer = document.getElementById("terminal");
                term.loadAddon(fitAddon)
                term.open(terminalContainer);
                fitAddon.fit();

                socket.emit("ipAddress", neIp)
                socket.emit("username", username)
                term.write(` CONNECTING WITH ${neIp}... \r\n`)

                term.onData((data) => {
                    setCommand((prevState) => {
                        return prevState + data
                    })
                    socket.emit("data", data);
                })

                term.onKey((event) => {
                  if(event.domEvent.code === "Enter"){
                    setEnterCheck(true)
                  }
                })

                socket.on("data", function (data) {
                    setResult((prevState) => {
                        return prevState + data
                    })
                    term.write(data);
                });

                socket.on("disconnect", function () {
                    term.write("\r\n*** DISCONNECTED***\r\n");
                });
            });
        }
    },[neIp])

Strangely, when I press enter, it writes the result to the whole row.

https://imgur.com/a/YdUsPEu

What may be causing the problem?

[jerch]

@Mert18 Maybe check the data comming from the backend for spurious CRLFs ('\r\n'). Many shells in interactive prompt mode put those in the returned data at the terminal right border to progress the output at the beginning of the next row.

If there are those and they are not in line with the current terminal col width, then you prolly forgot to resize the PTY of the backend to the new terminal size.