Already registered License key but still pop up message displays in NextJS

[BhavikLotia]

I have registered my license key but still pop up is showing. I have tried many ways but nothing works

[TheveshwarJayakumar]

Hi BhavikLotia,

Greetings from Syncfusion support!

We have evaluated the issue you reported and understand that you are facing difficulties while registering the license in your Next.js application. The license key can be registered in the src/app/layout.tsx or page.tsx file for Next.js 13. Ensure the addition of 'use client' at the top of the file to notify the client-side component. For guidance on generating a license key, refer to this documentation.

Please ensure that you are using the same major version for all Syncfusion components. Our Syncfusion licenses are version-specific, and if multiple major versions of our components are used in the same application, it can create version conflicts. Therefore, please make sure that you use the same version for all Syncfusion components.

'use client'
import { registerLicense } from '@syncfusion/ej2-base';

// Registering Syncfusion license key
registerLicense('License Key');

If the issue still persists, kindly share the package.json file, so that we can provide a prompt solution.

Regards,
Theveshwar

[BhavikLotia]

Hey Theveshwar

Thank you for providing me suggestions. I have tried it but didn't worked. Still, I am getting same error. Here, I am providing pop-up image with package.json and layout.js file screenshot.

"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-regular-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/react-fontawesome": "^0.2.0",
"@nextui-org/react": "^2.1.5",
"@syncfusion/ej2-base": "20.4.48",
"@syncfusion/ej2-react-richtexteditor": "20.4.49",
"autoprefixer": "10.4.15",
"codemirror": "^5.65.15",
"eslint": "8.47.0",
"eslint-config-next": "13.4.19",
"framer-motion": "^10.16.1",
"moment": "^2.29.4",
"next": "13.4.19",
"next-auth": "^4.23.1",
"postcss": "8.4.28",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-form-stepper": "^2.0.3",
"react-hook-form": "^7.45.4",
"react-toastify": "^9.1.3",
"tailwindcss": "3.3.3"
},

"use client";

import { UserContext } from "@/data/providers/user/user.provider";
import { Spinner } from "@nextui-org/react";
import { useContext, useEffect } from "react";
import NavbarComponent from "@/components/navbar/navbar.component";
import { useSession } from "next-auth/react";
import { registerLicense } from "@syncfusion/ej2-base";
registerLicense("MY LICENSE KEY")

export default function AuthenticatedLayout({ children }) {
  const { status } = useSession();
  const { user } = useContext(UserContext);

  return (
    <main className="bg-primarysub min-h-screen">
      {status === "loading" || !user ? (
        <div className="grid place-items-center h-screen">
          <Spinner color="secondary" />
        </div>
      ) : status === "authenticated" ? (
        <>
          {/* Menu start */}
          <NavbarComponent />
          {/* MEnu end */}
          <div>{children}</div>
        </>
      ) : (
        <div className="grid place-items-center h-screen">
          <Spinner color="secondary" />
        </div>
      )}
    </main>
  );
}

Thanks and Regards,
Bhavik

[BhavikLotia]

Also, I am using this key in one other project as well. I hope it will work in multiple projects

[TheveshwarJayakumar]

Hi BhavikLotia,

Thank you for getting back to us!

Upon further validation on provided latest package.json details, we have found that you are referring to the non-react packages of our controls. For instance, the @syncfusion/ej2-base package is a sub-dependency of the component package, and therefore, there is no need to add the ej2-base package separately in the application. We kindly request that you remove the following packages from the package.json file mentioned below.

Remove the below non-react packages.

**"@syncfusion/ej2-base": "23.1.36",**

Additionally, this issue may occur due to the following reason.

Reason:  Due to Duplicate packages installed in your application. Follow the below steps to resolve the issue.
 
	•  Delete the @Syncfusion folder from node_modules and the package-lock.json file from the root folder.
 
	•  Clear npm .cache file at your end.
 
	• Update our packages to the same major version. For example, if your utilizing version like (i.e. v20.X.XX) use the same version for all the Syncfusion components in the package.json file.
 
	•  Run the ‘’npm install” command to install the node_modules.

Query: Also, I am using this key in one other project as well. I hope it will work in multiple projects.

Yes, you can utilize the license key in another project as well.

Please let us know if you have any further questions or require additional assistance. We are here to help.

Regards,
Theveshwar

[gsumankumar]

Since there has been no activity on this issue for over a week, we are closing it as part of our routine maintenance. If the previously shared solution doesn't resolve the problem or if you have additional information to assist us, please feel free to reopen the issue. We appreciate your understanding

[mamlzy]

Hi BhavikLotia,

Greetings from Syncfusion support!

We have evaluated the issue you reported and understand that you are facing difficulties while registering the license in your Next.js application. The license key can be registered in the src/app/layout.tsx or page.tsx file for Next.js 13. Ensure the addition of 'use client' at the top of the file to notify the client-side component. For guidance on generating a license key, refer to this documentation.

Please ensure that you are using the same major version for all Syncfusion components. Our Syncfusion licenses are version-specific, and if multiple major versions of our components are used in the same application, it can create version conflicts. Therefore, please make sure that you use the same version for all Syncfusion components.

'use client' import { registerLicense } from '@syncfusion/ej2-base';

// Registering Syncfusion license key registerLicense('License Key');

If the issue still persists, kindly share the package.json file, so that we can provide a prompt solution.

Regards, Theveshwar

It works after adding use client, thank you so much!