React UIKit v3 error - type declaration for typescript

Hello! I’m making channel list page with UIkit.
I’m using Typescript + Next.js and got an error message when import ChannelList from '@sendbird/uikit-react/ChannelList'; in React UIKit v3 beta.

My project enviroments following:

  • Nextjs: 12.0.8,
  • React: 17.0.2,
  • Typescript: 4.5.5

Error message in VSCode

Could not find a declaration file for module ‘@sendbird/uikit-react/ChannelList’. ‘{myproject}/node_modules/@sendbird/uikit-react/ChannelList.js’ implicitly has an ‘any’ type.
Try npm i --save-dev @types/sendbird__uikit-react if it exists or add a new declaration (.d.ts) file containing declare module '@sendbird/uikit-react/ChannelList';ts(7016)

Unfortunately it looks like the none of the type definitions for UIKit have been updated to match the corresponding v3 changes

1 Like

Hello UIKit developer here,

Thanks for reporting the issue, we will look into it and fix it ASAP

1 Like

We fixed the issue in 3.0.0.beta.2

But, we need a little help from your side:
If you are in a typescript project, add the line:
node_modules/@sendbird/uikit-react/index.d.ts to tsconfig.include

Example of a tsconfig file:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "esModuleInterop": true,
    "jsx": "react-jsx",
  },
  "include": [
    "src",
    "node_modules/@sendbird/uikit-react/index.d.ts"
  ]
}

We choose to go this way because, our our bundling is quite complex and half the project is JSX and other half TSX (migration still ongoing)
So its kinda hard to split all the type definitions into proper structure
We are working to avoid this extra step, but will take a little bit more time

Thanks @Sravan_S for the update!

Unfortunately it looks like there are still some bundling issues in v3

  • Its incompatible with Webpack5 because its relying on stream which is no longer poly-filled in Webpack5
  • The CSS source maps are invalid due to referencing files that are not included the bundle (../src/smart-components/OpenChannel/components/OpenChannelInput/open-channel-input.scss)
2 Likes

Will check that, thanks for reporting

Sorry for late reporting.

After updating @sendbird/uikit-react version and tsconfig file(include node_modules/@sendbird/uikit-react/index.d.ts), unfortunately, I got same error when I reported(Cannot find type declaration). Other tsconfig properties are exactly same.

Instead, I tried import { ChannelList } from '@sendbird/uikit-react' and this works for me. But, I think this is different with import ChannelList from '@sendbird/uikit-react/ChannelList'. (according to docs)

I’m reading | UIKit React SDK | Sendbird Docs, and component props type doesn’t match written in docs.

Also, I got error when doing this: import { useChannelList } from ‘@sendbird/uikit-react/ChannelList/context. Missing docs update or module export bug.

Module ‘"@sendbird/uikit-react/ChannelList/context"’ has no exported member ‘useChannelList’

Additionally, I haven’t got the same error with @Reagan yet.

Thanks to @Reagan for report, and @Sravan_S for hard working!
Thanks.

2 Likes

@Daniel_Ahn Will check that too, thanks for telling us

I’ve had to use // @ts-ignore several places with the newest Sendbird components so that it matches docs vs the typescript definitions.

Hello everyone ,

Jumping on the question because i have the same problem :

Calling useChannelList return an error

TypeError: (0 , sendbird_uikit_react_ChannelList_context__WEBPACK_IMPORTED_MODULE_3_.useChannelList) is not a function

But it work if i import and use : useChannelListContext

/Cheers.
john

1 Like

Thanks @john34 We will export useChannelList in the next release(will keep useChannelListContext for a few version too). This was a mistake from our side. Expect a release including all these fixes on May24th

1 Like

The fix for issues discussed here should be in beta.5

For webpack fixes:

Webpack 5 removes stream and buffer componets from default polyfill To enable these, install buffer and stream and then add the following to webpack.cofig.js

module.exports = {
  //...
  resolve: {
    fallback: {
      buffer: require.resolve('buffer'),
      stream: require.resolve('stream-browserify'),
    },
  },
};

To read more: Resolve | webpack

donot forget to install stream-browserify and buffer using npm/yarn

Other issues should be solved automatically

If you still have issues with type-definitions, please share a minimum reproducible repo

1 Like

When importing import SendBirdApp from "@sendbird/uikit-react/App";

Could not find a declaration file for module '@sendbird/uikit-react/App'
  Try `npm i --save-dev @types/sendbird__uikit-react` if it exists or add a new declaration (.d.ts) file containing `declare module '@sendbird/uikit-react/App';

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    "node_modules/@sendbird/uikit-react/index.d.ts"
  ],
  "exclude": ["node_modules"]
}

package.json

{
  "private": true,
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "type-check": "tsc"
  },
  "dependencies": {
    "@sendbird/uikit-react": "^3.0.0-beta.6",
    "next": "latest",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "sendbird": "^3.1.19"
  },
  "devDependencies": {
    "@types/node": "^12.12.21",
    "@types/react": "^18.0.14",
    "@types/react-dom": "^18.0.5",
    "typescript": "^4.7.4"
  }
}

React Code

import Link from "next/link";
import Layout from "../components/Layout";
import SendBirdApp from "@sendbird/uikit-react/App";

const App = () => {
    return (
        <div className="App">
            <SendBirdApp
                // Add the two lines below.
                appId={YOUR_APP_ID};    // Specify your Sendbird application ID.
                userId={USER_ID};    // Specify your user ID.
            />
        </div>
    );
};

const ChatPage = () => (
  <Layout title="Home | Next.js + TypeScript Example">
    <h1>Hello Next.js 👋</h1>
    <p>
      <Link href="/about">
        <a>About</a>
      </Link>
    </p>
  </Layout>
);

export default ChatPage;