Stream-Chat error on creating channel: Invalid chat id, letters, numbers and "!-_" are allowed at new channel

Question

I am trying to follow a youtube tutorial(https://www.youtube.com/watch?v=MJzbJQLGehs) to get an understanding on how to create a messaging app in react. I am to the point of creating channels and I keep getting an error message:

CreateChannel.jsx:45 Error: Invalid chat id  , letters, numbers and "!-_" are allowed
    at new Channel (channel.ts:140:1)

I have tried to look at the documentation because I know some of the stuff has been updated since this tutorial was created but I cannot find the issue.

import React, { useState } from "react";
import { useChatContext } from "stream-chat-react";
import { UserList } from "./";
import { CloseCreateChannel } from "../assets";

const ChannelNameInput = ({ channelName = "", setChannelName }) => {
  const handleChange = (e) => {
    e.preventDefault();
    setChannelName(e.target.value);
  };
  return (
    <div className="channel-name-input__wrapper">
      <p>Name</p>
      <input
        value={channelName}
        onChange={handleChange}
        placeholder="channel-name"
      />
      <p>Add Members</p>
    </div>
  );
};

const CreateChannel = ({ createType, setIsCreating }) => {
  const [channelName, setChannelName] = useState(" ");
  const { client, setActiveChannel } = useChatContext();

  const [selectedUsers, setSelectedUsers] = useState([client.userID] || " ");

  const createChannel = async (e) => {
    e.preventDefault();

    try {
      const newChannel = await client.channel(createType, channelName, {
        name: channelName,
        members: selectedUsers,
      });

      await newChannel.watch();

      setChannelName("");
      setIsCreating(false);
      setSelectedUsers([client.userID]);
      setActiveChannel(newChannel);
    } catch (error) {
      console.log(error);
    }
  };
  
  return (
    <div className="create-channel__container">
      <div className="create-channel__header">
        <p>
          {createType === "team"
            ? "Create a New Channel"
            : "Send a Direct Message"}
        </p>
        <CloseCreateChannel setIsCreating={setIsCreating} />
      </div>
      {createType === "team" && (
        <ChannelNameInput
          channelName={channelName}
          setChannelName={setChannelName}
        />
      )}
      <UserList setSelectedUsers={setSelectedUsers} />
      <div className="create-channel__button-wrapper" onClick={createChannel}>
        <p>
          {createType === "team" ? "Create Channel" : "Create Message Group"}
        </p>
      </div>
    </div>
  );
};

export default CreateChannel;

Answer 1

the error states that the naming of the channel seems to be containing unallowed characters. As the error message states only the following types of characters are allowed:

• letters
• numbers
• the characters !, -, and _

In CreateChannel you're initializing the channelName as a string with an empty space (" "). Depending on the value set in the ChannelNameInput component there might have been a name set, that contains characters not allowed.

Could you check that and see if that fixes the issue?