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;