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

Web
10

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