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

musatov · July 7, 2022, 10:37am

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.

amitysupport · July 8, 2022, 3:57pm

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

anton · July 12, 2022, 12:25pm

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

amitysupport · July 12, 2022, 12:55pm

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

amitysupport · July 19, 2022, 3:35am

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

anton · July 29, 2022, 12:34pm

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

amitysupport · August 4, 2022, 4:31pm

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?

anton · August 29, 2022, 2:28pm

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

SSC · November 7, 2022, 7:02am

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

./node_modules/react-loading-skeleton/dist/skeleton.css
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?

amitysupport · November 7, 2022, 9:22am

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

SSC · November 7, 2022, 9:40am

Thats great thanks! I’ll try it out.

Topic		Replies	Views
Typescript Amity UI Kit Web	7	289	April 25, 2023
Amity UI Kit Installation Web	6	274	April 25, 2023
Has anyone successfully integrated Amity in a Next.js app? Web	4	620	May 18, 2022
Unable to integrate Amity into Next.Js Web	3	188	July 27, 2023
Compatibility Issue between React 18 and @amityco/ui-kit Package Web	4	342	July 14, 2023

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

CSS Imported by a Dependency

Possible Ways to Fix It

Related Topics