Not working on Next.js - Githubissues

rizshivalli commented 9 months ago

Getting this error on the fresh install of next.js and chat-ui-kit-react

installed dependencies

"dependencies": {
    "@chatscope/chat-ui-kit-react": "^2.0.0",
    "@chatscope/chat-ui-kit-styles": "^1.4.0",
    "next": "14.1.1",
    "react": "^18",
    "react-dom": "^18"
  }

 ⨯ node_modules/@chatscope/chat-ui-kit-react/dist/es/Scroll/ReactPerfectScrollbar.js (16:112) @ _inherits
 ⨯ TypeError: Super expression must either be null or a function
null
 at __webpack_require__ (/Users/rizwanshivalli/Desktop/Projects/chat/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/rizwanshivalli/Desktop/Projects/chat/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/rizwanshivalli/Desktop/Projects/chat/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/rizwanshivalli/Desktop/Projects/chat/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/rizwanshivalli/Desktop/Projects/chat/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/rizwanshivalli/Desktop/Projects/chat/.next/server/webpack-runtime.js:33:42)
    at __webpack_require__ (/Users/rizwanshivalli/Desktop/Projects/chat/.next/server/webpack-runtime.js:33:42)
    at eval (./src/app/page.tsx:7:86)
    at (rsc)/./src/app/page.tsx (/Users/rizwanshivalli/Desktop/Projects/chat/.next/server/app/page.js:184:1)
    at Function.__webpack_require__ (/Users/rizwanshivalli/Desktop/Projects/chat/.next/server/webpack-runtime.js:33:42)
    at async Promise.all (index 0)
digest: "4058398674"
TypeError: Super expression must either be null or a function
    at _inherits (webpack-internal:///(rsc)/./node_modules/@chatscope/chat-ui-kit-react/dist/es/Scroll/ReactPerfectScrollbar.js:148:15)
    at eval (webpack-internal:///(rsc)/./node_modules/@chatscope/chat-ui-kit-react/dist/es/Scroll/ReactPerfectScrollbar.js:187:5)
    at eval (webpack-internal:///(rsc)/./node_modules/@chatscope/chat-ui-kit-react/dist/es/Scroll/ReactPerfectScrollbar.js:307:2)
    at (rsc)/./node_modules/@chatscope/chat-ui-kit-react/dist/es/Scroll/ReactPerfectScrollbar.js

supersnager commented 9 months ago

@rizshivalli How did you installed v2.0.0 if there is no package with that version? Please upgrade to v2.0.3, and let me know if that helps.

You can also try to add 'use client' to the file where components are used.

rizshivalli commented 9 months ago

I am using 2.0.3 version itself

Its working with 'use-client' but the styles are not getting applied.


"use client";
import styles from "@chatscope/chat-ui-kit-styles/dist/default/styles.min.css";
import {
  ChatContainer,
  MainContainer,
  Message,
  MessageInput,
  MessageList,
} from "@chatscope/chat-ui-kit-react";

export default function Home() {
  return (
    <div style={{ position: "relative", height: "500px" }}>
      <MainContainer>
        <ChatContainer>
          <MessageList>
            <Message
              model={{
                message: "Hello my friend",
                sentTime: "just now",
                sender: "Joe",
              }}
            />
          </MessageList>
          <MessageInput placeholder="Type message here" />
        </ChatContainer>
      </MainContainer>
    </div>
  );
}

Zakariaels commented 9 months ago

Can you try the following ? import '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css';

rizshivalli commented 9 months ago

Now working, Thank you

chatscope / chat-ui-kit-react

Not working on Next.js #146