Typescript Amity UI Kit

Hi Support Team,
I would like to add amity ui to my current typescript project.

But I can’t find any typescript ui kit.

How should I build typescript UI with Amity?

Hello! Are you using ReactJS or React Native for implementation?

I’m using Next.js + Typescript.

We don’t have ReactJS typescript UIKit yet. It’s currently in our Roadmap right now. However, you can still use our ReactJS web UIKit to import in your Next.js + Typescript by config tsconfig.json file and add type declaration file for the UIKit in your root folder.

Hi @topAmity,

I tried to use it in my Next.js + Typescript project but got some css building errors.

I put the typings folder in root of project and added “typeRoots”: [“./typings”, “./node_modules/@types”] to tsconfig.json.

I’m not sure if it’s correct to import the module.

If you know the best way to use your UI kit module, please let me know.

Here’s the error message in my side.

Thank you!

For Next JS, It requires extra configuration. You need to import UIKit with dynamic import function from nextJS with ssr=false. Moreover, next-transpile-modules is required in order to complied all the JS code and run on NextJS (https://www.npmjs.com/package/next-transpile-modules). You can follow my github repo for nextJs configuration as a guideline (GitHub - topAmity/amity-seo).

  1. How to import UiKit can be found in ui-kit.js file (amity-seo/ui-kit.js at main · topAmity/amity-seo · GitHub)
  2. next-transpile-modules configuration can be found in next.config.js file (amity-seo/next.config.js at main · topAmity/amity-seo · GitHub)

Hi @topAmity,
Thank you for your reply.

I will try it with your correctness and write you again if you have any other problems.

Thank you!

1 Like