Amity integration problem Nextjs14/React18/Typescript

Baris · December 18, 2023, 12:22pm

Hello,

I am currently trying to integrate Amity with our project however having problems with it. Here are the steps I have taken;

Cloned the UIKit and followed the readme (git@github.com:AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git)
Started following the steps from README.
Received warnings from npm ci step; (There are more but copied couple of them here)

npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: react-inspector@5.1.1
npm WARN Found: react@18.2.0
npm WARN node_modules/react
npm WARN   peer react@"^18.2.0" from the root project
npm WARN   55 more (@fortawesome/react-fontawesome, ...)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1
npm WARN node_modules/@storybook/addon-actions/node_modules/react-inspector
npm WARN   react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.16
npm WARN   node_modules/@storybook/addon-actions
npm WARN
npm WARN Conflicting peer dependency: react@17.0.2
npm WARN node_modules/react
npm WARN   peer react@"^16.8.4 || ^17.0.0" from react-inspector@5.1.1
npm WARN   node_modules/@storybook/addon-actions/node_modules/react-inspector
npm WARN     react-inspector@"^5.1.0" from @storybook/addon-actions@6.5.16
npm WARN     node_modules/@storybook/addon-actions

I have continued with the other steps.

4. npm link

5. npm link ./`<path-to-your-app>`/node_modules/react ./`<path-to-your-app>`/node_modules/react-dom

6. npm run build

7. cd ./`<path-to-your-app>`

8. npm link @amityco/ui-kit-open-source --save

I have added amityUikit.d.ts to the root folder and added to the tsconfig.json to fix the type error.
I am trying the code from this link : https://forum.amity.co/t/is-there-is-any-possibility-to-have-web-amity-ui-kit-working-with-nextjs/471/10

with one difference. In the imports import('@amityco/ui-kit') need to use @amityco/ui-kit-open-source instead as the module name.

      <AmityUiKitProvider
        apiKey=""
        apiRegion="staging"
        userId="valeriy-test"
        displayName="valeriy-test"
      >
        <AmityUiKitSocial />
      </AmityUiKitProvider>

When I try to build I am getting;

Type error: Type ‘{ children: Element; key: undefined; apiKey: string; apiEndpoint: string; userId: undefined; displayName: undefined; }’ is not assignable to type ‘IntrinsicAttributes’.
Property ‘children’ does not exist on type ‘IntrinsicAttributes’.

problem component is AmityUiKitProvider

“next”: “14.0.1”,
“react”: “^18”,
“react-dom”: “^18”,

Any help is appreciated.

Thank you

amitysupport · December 18, 2023, 2:09pm

Hello, could you please confirm whether you are using ReactJS or React Native for your implementation?

Baris · December 18, 2023, 10:35pm

Hi, thanks for the quick response. I am using ReactJS for the implementation.

amitysupport · December 19, 2023, 3:34am

Understood, thank you for confirming, Let me pass back to the team.

topAmity · December 19, 2023, 10:11am

Hi Baris, apiRegion shouldn’t be staging, it should be your own apiRegion e.g ‘sg’, ‘eu’, ‘us’. Can you try changing that and try again?

Baris · December 19, 2023, 10:45pm

Hello topAmity,

Thanks for the response. My problem is not that I am running but unable to connect. (Other values are incorrect too otherwise. ) Problem is when I run npm run build this is the output I am getting.

> next build

   ▲ Next.js 14.0.1
   - Environments: .env.local, .env.production

 ✓ Creating an optimized production build
 ✓ Compiled successfully
   Linting and checking validity of types  ..Failed to compile.

./src/app/(Site)/chat/page.tsx:17:8
Type error: Type '{ children: Element; apiKey: string; apiRegion: string; userId: string; displayName: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'children' does not exist on type 'IntrinsicAttributes'.

  15 |   return (
  16 |     <div>
> 17 |       <AmityUiKitProvider
     |        ^
  18 |         apiKey=""
  19 |         apiRegion="sg"
  20 |         userId="valeriy-test"
   Linting and checking validity of types  ...

It is complaining about the AmityUiKitSocial as the children. When I remove the AmityUiKitProvider then I get the error

Type error: Type '{ apiKey: string; apiRegion: string; userId: string; displayName: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'apiKey' does not exist on type 'IntrinsicAttributes'.

  16 |     <div>
  17 |       <AmityUiKitProvider
> 18 |         apiKey=""
     |         ^
  19 |         apiRegion="sg"
  20 |         userId="valeriy-test"
  21 |         displayName="valeriy-test" />

I remove apiKey then it complains about the next property and so on.

topAmity · December 20, 2023, 8:24am

Are you implementing the uikit this way? Here is my code for an example

// import { useRouter } from "next/router";
import dynamic from "next/dynamic";

import { useState } from "react";

// import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit";
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,
  }
);
const AmityUiKitChat = dynamic(
  () => import("@amityco/ui-kit").then((mod) => mod.AmityUiKitChat),
  {
    ssr: false,
  }
);
import Login from "./login";

const apiKey = "b3babb0b3a89f4341d31dc1a01091edcd70f8de7b23d697f";

export default function UiKit() {
  const [userId, setUserId] = useState();

  return (
    <div className="App">
      {!userId ? (
        <Login onSubmit={setUserId} />
      ) : (
        <AmityUiKitProvider
          key={userId}
          apiKey={apiKey}
          apiEndpoint="https://api.sg.amity.co"
          userId={userId}
          displayName={userId}
          theme
        >

          <AmityUiKitSocial />
        </AmityUiKitProvider>
      )}
    </div>
  );
}

Baris · December 21, 2023, 4:19am

Yup almost exactly the same way. Main diff is the import module name is ui-kit-open-source. Below is my full code.

import dynamic from 'next/dynamic';

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

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

export default function About() {
  return (
    <div>
      <AmityUiKitProvider
        apiKey=""
        apiRegion="sg"
        userId="valeriy-test"
        displayName="valeriy-test"
      >
        <AmityUiKitSocial />
      </AmityUiKitProvider>
    </div>
  )
}

By the way AmityUiKitProvider missing some properties from your example like theme, apiEndpoint etc. however adding them does not have an effect. Still getting the same error with AmityUiKitProvider. (Property ‘children’ does not exist on type ‘IntrinsicAttributes’.)

amitysupport · December 22, 2023, 10:56am

The current code seems correct, could you please help check and confirm, which line/function this error comes from (Property ‘children’ does not exist on type ‘IntrinsicAttributes’.) ?

Baris · December 22, 2023, 12:04pm

Hello,

Error comes pointing the AmityUiKitProvider. It is complainin about the AmityUiKitSocial that is placed as the children.

Below is the full error;

Type error: Type '{ children: Element; key: string; apiKey: string; apiEndpoint: string; apiRegion: string; userId: string; displayName: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'children' does not exist on type 'IntrinsicAttributes'.

  21 |   return (
  22 |     <div>
> 23 |       <AmityUiKitProvider
     |        ^
  24 |         key='test'
  25 |         apiKey=""
  26 |         apiEndpoint="https://api.sg.amity.co"

And if I remove the AmityUiKitSocial then it is complaining about the apiKey.
Below is the full error after I remove the AmityUiKitSocial property from the code.

export default function About() {
  return (
    <div>
      <AmityUiKitProvider
        key='test'
        apiKey=""
        apiEndpoint="https://api.sg.amity.co"
        apiRegion="sg"
        userId="valeriy-test"
        displayName="valeriy-test"
      />      
    </div>
  )
}

Type error: Type '{ key: string; apiKey: string; apiEndpoint: string; apiRegion: string; userId: string; displayName: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'apiKey' does not exist on type 'IntrinsicAttributes'.

  23 |       <AmityUiKitProvider
  24 |         key='test'
> 25 |         apiKey=""
     |         ^
  26 |         apiEndpoint="https://api.sg.amity.co"
  27 |         apiRegion="sg"
  28 |         userId="valeriy-test"

And if I remove the apiKey property then it complains about the next property and so on.

topAmity · December 26, 2023, 4:57pm

Instead of web uikit open source, Can you try with our npm uikit package? (@amityco/ui-kit - npm)

Baris · December 29, 2023, 1:44am

Hello, sorry for the late reply. I have been away from the computer for the last couple of days.

I have tried using the @amityco/ui-kit however same issue still persists. And I managed to actually reproduce the same issue by creating a new NextJs app.

I believe you can reproduce the issue following the steps below.

Create a new next app using latest. (14.0.4)

npx create-next-app@latest

Add the amityUikit.d.ts file to the root with;

declare module '@amityco/ui-kit';

Replace the content of the src\app\page.tsx with following code;

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 },
);

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

export default function Home() {
  return (
    <div>
      <AmityUiKitProvider
        key='test'
        apiKey=""
        apiEndpoint="https://api.sg.amity.co"
        apiRegion="sg"
        userId="valeriy-test"
        displayName="valeriy-test"
      >
        <AmityUiKitSocial />
      </AmityUiKitProvider>
    </div>
  )
}

Run npm run build
Same error happens;

   ▲ Next.js 14.0.4

 ✓ Creating an optimized production build
 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

./src/app/page.tsx:23:8
Type error: Type '{ children: Element; key: string; apiKey: string; apiEndpoint: string; apiRegion: string; userId: string; displayName: string; }' is not assignable to type 'IntrinsicAttributes'.
  Property 'children' does not exist on type 'IntrinsicAttributes'.

  21 |   return (
  22 |     <div>
> 23 |       <AmityUiKitProvider
     |        ^
  24 |         key='test'
  25 |         apiKey=""
  26 |         apiEndpoint="https://api.sg.amity.co"

Baris · January 2, 2024, 3:51am

Hello @topAmity , did you get the chance to look into this mate? Were you able to reproduce the issue locally?

amitysupport · January 3, 2024, 8:50am

Hello! @Baris We’re looking into the reported issue. After our recent holiday, we’re actively addressing it. Stay tuned for updates. Thanks for your patience!

Baris · January 3, 2024, 9:02am

Thank you very much for the update. Looking forward to hear back from you.

Kind regards.

Baris · January 9, 2024, 12:19am

Hello @amitysupport, can you please let me know if there are any updates on this?
Thanks.

amitysupport · January 9, 2024, 3:28am

Hello @Baris ,

We’re sorry for the delay in resolving the issue you reported. It’s an unusual problem, so we’re taking some time to figure it out. Our team is working hard to identify the cause and will update you as soon as we make progress.

Thanks for your understanding.

Best regards,
Support team

Baris · January 9, 2024, 6:09am

Thank you very much for the update. Cheers.

amitysupport · January 9, 2024, 8:43am

Hello @Baris,

Could you kindly check your email? Our team has reached out to gather additional information to investigate the issues you’re experiencing.

Best regards,
Support team

Baris · January 10, 2024, 12:12pm

Thank you @amitysupport. I have replied to the email, however I do not believe the issue here is related to the use of the incorrect api-key. I will keep monitoring my email for further communication.

Kind regards

Topic		Replies	Views
Compatibility Issue between React 18 and @amityco/ui-kit Package Web	4	348	July 14, 2023
Unable to integrate Amity into Next.Js Web	3	191	July 27, 2023
Miss match of react and react dom error in setup Web	2	361	December 7, 2022
Using Amity-Web-Social-Open-Source Web	3	304	April 30, 2023
Amity-Social-Cloud-Web-Sample-Apps Getting error Module not found: Error: Can't resolve '@amityco/ui-kit-open-source' UIkit	7	263	September 1, 2023

Amity integration problem Nextjs14/React18/Typescript

Related Topics