# React UIKit v3 error - type declaration for typescript

**URL:** <https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491>\
**Category:** Sendbird Chat UIKit\
**Created:** [April 20, 2022, 10:12am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491 "2022-04-20T10:12:56Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Daniel\_Ahn](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/daniel_ahn/32/2326_2.png) [@Daniel\_Ahn](https://community.sendbird.com/u/Daniel_Ahn)\
**Post date:** [April 20, 2022, 10:12am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/1 "2022-04-20T10:12:56Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Reagan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/reagan/32/1100_2.png) [@Reagan](https://community.sendbird.com/u/Reagan)\
**Post date:** [April 22, 2022, 12:16am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/2 "2022-04-22T00:16:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [April 22, 2022, 5:54am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/3 "2022-04-22T05:54:09Z")

</div>

Hello UIKit developer here,

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

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [April 29, 2022, 8:20am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/4 "2022-04-29T08:20:44Z")

</div>

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:

```auto
{
  "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

---

<div class="post-metadata">

**Author:** ![Reagan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/reagan/32/1100_2.png) [@Reagan](https://community.sendbird.com/u/Reagan)\
**Post date:** [May 1, 2022, 2:45pm UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/5 "2022-05-01T14:45:42Z")

</div>

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`)

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [May 2, 2022, 2:52am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/6 "2022-05-02T02:52:26Z")

</div>

Will check that, thanks for reporting

---

<div class="post-metadata">

**Author:** ![Daniel\_Ahn](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/daniel_ahn/32/2326_2.png) [@Daniel\_Ahn](https://community.sendbird.com/u/Daniel_Ahn)\
**Post date:** [May 3, 2022, 8:21am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/7 "2022-05-03T08:21:48Z")

</div>

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 [Channel list | Chat React SDK | Sendbird Docs](https://sendbird.com/docs/uikit/v3/react/modules/channel-list), 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.

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [May 3, 2022, 8:25am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/8 "2022-05-03T08:25:53Z")

</div>

@Daniel_Ahn Will check that too, thanks for telling us

---

<div class="post-metadata">

**Author:** ![simonsayscode](https://avatars.discourse-cdn.com/v4/letter/s/4da419/32.png) [@simonsayscode](https://community.sendbird.com/u/simonsayscode)\
**Post date:** [May 16, 2022, 8:49pm UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/9 "2022-05-16T20:49:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![john34](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@john34](https://community.sendbird.com/u/john34)\
**Post date:** [May 20, 2022, 7:27am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/10 "2022-05-20T07:27:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [May 20, 2022, 11:46am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/11 "2022-05-20T11:46:25Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sravan\_S](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/sravan_s/32/83_2.png) [@Sravan\_S](https://community.sendbird.com/u/Sravan_S)\
**Post date:** [May 25, 2022, 1:50am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/12 "2022-05-25T01:50:28Z")

</div>

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

For webpack fixes:

```auto
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](https://webpack.js.org/configuration/resolve/#resolvefallback)

> 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

---

<div class="post-metadata">

**Author:** ![hyeonsu](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/hyeonsu/32/665_2.png) [@hyeonsu](https://community.sendbird.com/u/hyeonsu)\
**Post date:** [June 25, 2022, 7:25am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/13 "2022-06-25T07:25:48Z")

</div>

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

```auto
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

```auto
{
  "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

```auto
{
  "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

```auto
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;

```

---

<div class="post-metadata">

**Author:** ![johnny](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/johnny/32/3312_2.png) [@johnny](https://community.sendbird.com/u/johnny)\
**Post date:** [November 28, 2022, 8:54pm UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/14 "2022-11-28T20:54:00Z")

</div>

Were you able to find a solution to this problem @hyeonsu? I am having the same issue.

---

<div class="post-metadata">

**Author:** ![ybhwang](https://sea2.discourse-cdn.com/flex020/user_avatar/community.sendbird.com/ybhwang/32/4030_2.png) [@ybhwang](https://community.sendbird.com/u/ybhwang)\
**Post date:** [June 7, 2023, 2:46am UTC](https://community.sendbird.com/t/react-uikit-v3-error-type-declaration-for-typescript/4491/16 "2023-06-07T02:46:55Z")

</div>

I just solved the problem in the below (with adding option, `files`)

```json
"include": [
  "next-env.d.ts",
  "**/*.ts",
  "**/*.tsx",
  "node_modules/@sendbird/uikit-react/index.d.ts"
],
"files": [
  "node_modules/@sendbird/uikit-react/index.d.ts"
],
"exclude": ["node_modules"]

```