Is there is any possibility to have Web Amity UI Kit working with NextJS?

We would like to use Amity UI Kit from npm package or from the source code with the latest NextJS framework version. However, we are struggling with getting it working even with react-create-app.

Here is the code sample:

2  key={userId}
3  apiKey={apiKey}
4  apiRegion={ApiRegion.US}
5  apiEndpoint={ApiEndpoint.US}
6  userId={userId}
7  displayName={userId}
9  <AmityUiKitFeed
10    targetType={PostTargetType.CommunityFeed}
11    targetId={communityId}
12    showPostCreator={true}
13  />

The list of dependencies for NextJS application:

1"dependencies": {
2  "@amityco/ui-kit": "2.12.2",
3  "next": <next>,
4  "react": <react>,
5  "react-dom": <react>,
6  "styled-components": "^5.3.5"

The list of dependencies for Create react app application:

1"dependencies": {
2  "@amityco/ui-kit": "2.12.2",
3  "@testing-library/jest-dom": "^5.16.4",
4  "@testing-library/react": "^13.3.0",
5  "@testing-library/user-event": "^13.5.0",
6  "react": <react>,
7  "react-dom": <react>,
8  "react-scripts": <react-scripts>,
9  "styled-components": "^5.3.5",
10  "web-vitals": "^1.0.0"

And here is the table with the results of experiments

As you can see, the NPM version of UI Kit only works with application build with create-react-app of previous version. Others attempts were not successful. During experiments with using UI Kit from the source code, we’ve been following instructions: Web Javascript Migration Guide.

The error we’ve been facing is always the same for UI Kit from the source code:

1 Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?
2 ReferenceError: Element is not defined
3    at Object.eval (webpack-internal:///../../tmp/Amity-Social-Cloud-UIKit-Web-OpenSource/build/index.js:1:407602)
4    at r (webpack-internal:///../../tmp/Amity-Social-Cloud-UIKit-Web-OpenSource/build/index.js:1:206)
5    at Object.eval (webpack-internal:///../../tmp/Amity-Social-Cloud-UIKit-Web-OpenSource/build/index.js:1:129777)
6    at r (webpack-internal:///../../tmp/Amity-Social-Cloud-UIKit-Web-OpenSource/build/index.js:1:206)
7    at Object.eval (webpack-internal:///../../tmp/Amity-Social-Cloud-UIKit-Web-OpenSource/build/index.js:1:71958)
8    at r (webpack-internal:///../../tmp/Amity-Social-Cloud-UIKit-Web-OpenSource/build/index.js:1:206)
9    at Object.eval (webpack-internal:///../../tmp/Amity-Social-Cloud-UIKit-Web-OpenSource/build/index.js:1:350651)
10    at r (webpack-internal:///../../tmp/Amity-Social-Cloud-UIKit-Web-OpenSource/build/index.js:1:206)
11    at Object.eval (webpack-internal:///../../tmp/Amity-Social-Cloud-UIKit-Web-OpenSource/build/index.js:1:366110)
12    at r (webpack-internal:///../../tmp/Amity-Social-Cloud-UIKit-Web-OpenSource/build/index.js:1:206)

And for UI Kit from NPM package:

1 Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?
2 error - ReferenceError: Element is not defined
3    at Object.<anonymous> (/Users/michael/Documents/repositories/tmp/11-nextjs-amity/node_modules/@amityco/ui-kit/build/index.js:16:242854)
4    at r (/Users/michael/Documents/repositories/tmp/11-nextjs-amity/node_modules/@amityco/ui-kit/build/index.js:1:380)
5    at Object.<anonymous> (/Users/michael/Documents/repositories/tmp/11-nextjs-amity/node_modules/@amityco/ui-kit/build/index.js:11:12964)
6    at r (/Users/michael/Documents/repositories/tmp/11-nextjs-amity/node_modules/@amityco/ui-kit/build/index.js:1:380)
7    at Object.<anonymous> (/Users/michael/Documents/repositories/tmp/11-nextjs-amity/node_modules/@amityco/ui-kit/build/index.js:6:48598)
8    at r (/Users/michael/Documents/repositories/tmp/11-nextjs-amity/node_modules/@amityco/ui-kit/build/index.js:1:380)
9    at Object.<anonymous> (/Users/michael/Documents/repositories/tmp/11-nextjs-amity/node_modules/@amityco/ui-kit/build/index.js:16:186570)
10    at r (/Users/michael/Documents/repositories/tmp/11-nextjs-amity/node_modules/@amityco/ui-kit/build/index.js:1:380)
11    at Object.<anonymous> (/Users/michael/Documents/repositories/tmp/11-nextjs-amity/node_modules/@amityco/ui-kit/build/index.js:16:201990)
12    at r (/Users/michael/Documents/repositories/tmp/11-nextjs-amity/node_modules/@amityco/ui-kit

If anyone had experience overcoming those issues, please hare it with us. I will highly appreciate it.

Hi @musatov our team is checking on this, we will get back to you asap :pray:

@amitysupport is there any feedback that you can share with us?

Hi @anton sorry for late response, this one is still in progress, we will get back to you within this week :pray:

Hi @anton @musatov sorry for keeping you waiting, it’s more complicated and took longer time than we expected. It seems that our ui-kit doesn’t fully support NextJS as it tries to do server side render first. However, our team managed to run the uikit as below:

import dynamic from 'next/dynamic';

const AmityUiKitProvider = dynamic(
  async () => (await import('@amityco/ui-kit')).AmityUiKitProvider,
  { ssr: false },

const AmityUiKitSocial = dynamic(
  async () => (await import('@amityco/ui-kit')).AmityUiKitSocial,
  { ssr: false },

export default function About() {
  return (
        <AmityUiKitSocial />


@amityco/ui-kit 2.12.2
next: 12.2.2
react: 18.2.0
react-dom: 18.2.0
  • You will need to import amityco/ui-kit dynamically with ssr option equaled false

Reference: Advanced Features: Dynamic Import | Next.js

Thank you for your answer. This is what we did as well.

Hi @anton did you manage to make it work? we have found a topic regarding to this nextjs issue. Since you have to dynamically import it, the swc minification was the issue, can you please try switching it off?

We have custom babel configs, so swc is switched for our project by default.

I’ve implemented the code above, however now am getting the following error message

Global CSS cannot be imported from within node_modules.
Location: node_modules@amityco\ui-kit\build\index.js

There is a link to this page explaning the issue and resolutions…

CSS Imported by a Dependency

One of your dependencies (node_modules) imports a CSS file.

This normally happens when a package’s source files are accidentally consumed, instead of the built package.

Possible Ways to Fix It

Reach out to the maintainer and ask for them to publish a compiled version of their dependency.

Compiled dependencies do not have references to CSS files, or any other files that require bundler-specific integrations.

The dependency should also provide instructions about what CSS needs to be imported by you, in your application.

Importing CSS files within node_modules cannot be supported because we cannot know the correct behavior:

  • Should the file be consumed as Global CSS or CSS Modules?
  • If Global, in what order does the file need to be injected?
  • If Modules, what are the emitted class names? As-is, camel-case, snake case?
  • Etc.

Is there a workaround for this… anyway to disable the Skeleton Loading in the UIKit?

Hello @SSC The error came from NextJS cannot compile the code inside the node package which can be solved by using next-transpile-modules. You can follow the installation guide from this link ( next-transpile-modules - npm). This package will transpile the node modules to be able to complied by NextJS. Here is the code inside next.config.js

/** @type {import('next').NextConfig} */

const withTM = require("next-transpile-modules")(["@amityco/ui-kit"]);

const nextConfig = {

reactStrictMode: true,


module.exports = withTM(nextConfig);

Since our Amity SDK doesn’t support server-side rendering, You might also face this error “Self is not defined” if you haven’t imported the Amity-UIKit with dynamic import. Here is the example code for importing Amity UIKit, just in case (ref:Advanced Features: Dynamic Import | Next.js)

const AmityUiKitProvider = dynamic(
() => import("@amityco/ui-kit").then((mod) => mod.AmityUiKitProvider),
ssr: false,

const AmityUiKitSocial = dynamic(
() => import("@amityco/ui-kit").then((mod) => mod.AmityUiKitSocial),
ssr: false,

We’ve updated the Amity-NextJS-Sample-App Github repository for this issue. You can see the sample code on files ui-kit.js and next.config.js (GitHub - AmityCo/Amity-Social-Cloud-NextJS-Sample-App).

Thats great thanks! I’ll try it out.

1 Like