Hi, I’m trying to integrate Amity Social Cloud via the Web UI Kit into a Next.js application.
I’m following the guide to render the complete social feature: Using as a whole feature with the default settings - Amity Docs
So my page looks like this:
import Head from "next/head";
import { AmityUiKitProvider, AmityUiKitSocial } from "@amityco/ui-kit";
const MySocialPage = () => {
return (
<div>
<Head>
<title>My Social</title>
<meta name="description" content="My Social" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main style={{ paddingTop: 64 }}>
<AmityUiKitProvider
apiKey={process.env.NEXT_PUBLIC_AMITY_API_KEY}
userId="user1234"
displayName="Greg"
>
<AmityUiKitSocial />
</AmityUiKitProvider>
</main>
</div>
);
};
export default MySocialPage;
I’m getting a rendered social page (layout is there but it’s not functional - for example the actions are greyed out)
…and a whole load of errors in the console such as:
“Warning: forwardRef render functions do not support propTypes or defaultProps. Did you accidentally pass a React component?”
“Warning: Failed prop type: The prop apiEndpoint
is marked as required in ForwardRef
, but its value is undefined
.”
“Warning: React does not recognize the maxRows
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase maxrows
instead. If you accidentally passed it from a parent component, remove it from the DOM element.”
“Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code”
“ReactTruncateMarkup tried to render
, but truncating React components is not supported, the full content is rendered instead. Only DOM elements are supported.”
etc, etc…
These are followed up by a load of:
POST https://api.sg.amity.co/v1/device 401
errors
I could really use some help! Thanks
In addition, if I add apiEndpoint and apiRegion props (which are optional according to the docs), like so:
<AmityUiKitProvider
apiKey={process.env.NEXT_PUBLIC_AMITY_API_KEY}
apiEndpoint="api.eu.amity.co"
apiRegion="api.eu.amity.co"
userId="user1234"
displayName="Greg"
>
<AmityUiKitSocial />
</AmityUiKitProvider>
I get a new error:
Uncaught (in promise) TypeError: Cannot read properties of null (reading 'code')
at e.requestAccessTokenWithApiKey (client.min.js?726e:35:105981)
at async t.authenticateAndConnect (client.min.js?726e:24:9741)