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:

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

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"
7},

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"
11},

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 (
    <div>
      <AmityUiKitProvider
        apiKey="b3bee858328ef4344a308e4a5a091688d05fdee2be353a2b"
        apiRegion="staging"
        userId="valeriy-test"
        displayName="valeriy-test"
      >
        <AmityUiKitSocial />
      </AmityUiKitProvider>
    </div>
  )
}

Package:

@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?