# Is there is any possibility to have Web Amity UI Kit working with NextJS? **URL:** \ **Category:** Web\ **Created:** [July 7, 2022, 10:37am UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471 "2022-07-07T10:37:51Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![musatov](https://avatars.discourse-cdn.com/v4/letter/m/ac91a4/32.png) [@musatov](https://forum.social.plus/u/musatov)\ **Post date:** [July 7, 2022, 10:37am UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/1 "2022-07-07T10:37:51Z")
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: ```auto 1 9 14 ``` The list of dependencies for NextJS application: ```auto 1"dependencies": { 2 "@amityco/ui-kit": "2.12.2", 3 "next": , 4 "react": , 5 "react-dom": , 6 "styled-components": "^5.3.5" 7}, ``` The list of dependencies for Create react app application: ```auto 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": , 7 "react-dom": , 8 "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 ![Screen Shot 2022-07-07 at 2.29.18 PM](https://europe1.discourse-cdn.com/flex013/uploads/amity/original/1X/3588447e8ff2ad83f149a724592fba0941d26d70.jpeg) 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](https://docs.amity.co/uikit/web/web-javascript-migration-guide). The error we’ve been facing is always the same for UI Kit from the source code: ```auto 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: ```auto 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. (/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. (/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. (/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. (/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. (/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. ---
**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\ **Post date:** [July 8, 2022, 3:57pm UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/2 "2022-07-08T15:57:38Z")
Hi @musatov our team is checking on this, we will get back to you asap 🙏 ---
**Author:** ![anton](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@anton](https://forum.social.plus/u/anton)\ **Post date:** [July 12, 2022, 12:25pm UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/3 "2022-07-12T12:25:02Z")
@SocialPlus_Support is there any feedback that you can share with us? ---
**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\ **Post date:** [July 12, 2022, 12:55pm UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/4 "2022-07-12T12:55:26Z")
Hi @anton sorry for late response, this one is still in progress, we will get back to you within this week 🙏 ---
**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\ **Post date:** [July 19, 2022, 3:35am UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/5 "2022-07-19T03:35:09Z")
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: ```auto 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 (
) } ``` **Package:** ```auto @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](https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr) ---
**Author:** ![anton](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@anton](https://forum.social.plus/u/anton)\ **Post date:** [July 29, 2022, 12:34pm UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/6 "2022-07-29T12:34:55Z")
Thank you for your answer. This is what we did as well. ---
**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\ **Post date:** [August 4, 2022, 4:31pm UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/7 "2022-08-04T16:31:34Z")
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? ---
**Author:** ![anton](https://avatars.discourse-cdn.com/v4/letter/a/d9b06d/32.png) [@anton](https://forum.social.plus/u/anton)\ **Post date:** [August 29, 2022, 2:28pm UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/8 "2022-08-29T14:28:49Z")
We have custom babel configs, so swc is switched for our project by default. ---
**Author:** ![SSC](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@SSC](https://forum.social.plus/u/SSC)\ **Post date:** [November 7, 2022, 7:02am UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/9 "2022-11-07T07:02:28Z")
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](https://nextjs.org/docs/messages/css-npm)** # 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](https://nextjs.org/docs/messages/css-npm#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? ---
**Author:** ![SocialPlus\_Support](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.social.plus/socialplus_support/32/798_2.png) [@SocialPlus\_Support](https://forum.social.plus/u/SocialPlus_Support)\ **Post date:** [November 7, 2022, 9:22am UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/10 "2022-11-07T09:22:48Z")
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](https://www.npmjs.com/package/next-transpile-modules)). This package will transpile the node modules to be able to complied by NextJS. Here is the code inside next.config.js ```auto /** @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](https://nextjs.org/docs/advanced-features/dynamic-import)) ```auto 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](https://github.com/AmityCo/Amity-Social-Cloud-NextJS-Sample-App)). ---
**Author:** ![SSC](https://avatars.discourse-cdn.com/v4/letter/s/e9c0ed/32.png) [@SSC](https://forum.social.plus/u/SSC)\ **Post date:** [November 7, 2022, 9:40am UTC](https://forum.social.plus/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/11 "2022-11-07T09:40:40Z")
Thats great thanks! I’ll try it out.