1. Home
  2. Forum
  3. React - EJ 2
  4. NextJS License Issue

NextJS License Issue

What am I doing wrong?

I am following the docs here: https://ej2.syncfusion.com/react/documentation/licensing/overview

  1. I claim a key here: https://www.syncfusion.com/account/claim-license-key
    syncfusion-claimkey.jpg
  2. npm dependencies used:
    syncfusion-npm.jpg
  3. registerLicense in _app.tsx:

    syncfusion-register2.jpg
  4. And get this error. I have also tried using the text file (syncfusion-license.txt) and running npx syncfusion-license activate
    syncfusion-error.jpg


    Nothing seems to fix the licensing issue! Thanks in advanced for the help.


7 Replies 1 reply marked as answer
MB Mike Bowles November 15, 2023 08:13 PM UTC

I updated all packages to the latest major version and license works now.
Image_3681_1700079180873


Marked as answer
TJ Theveshwar Jayakumar Syncfusion Team November 20, 2023 02:37 AM UTC

Hi Mike Bowles,


Thank you for reaching out to Syncfusion support.


We understand that you are still facing the license validation issue even after following the provided steps. Upon further validation with the provided details, we suspect that you have not replaced the generated license key in the "register license" method. We would like to inform you that you need to add the generated key in place of 'license key' as represented below.


// Registering Syncfusion license key

registerLicense('Replace your generated license key here');


Also, we have found that you are referring to the non-react packages of our controls. For instance, the @syncfusion/ej2 package is a sub-dependency of the component package, and therefore, there is no need to add the ej2 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": "23.1.44",

 "@syncfusion/ej2-base": "23.1.41",

"@syncfusion/ej2-react-base": "23.1.43",


Kindly ensure that you have followed the below steps once changes are done.


  •  Delete the @Syncfusion folder from node_modules and the package-lock.json file from the root folder.


  • Clear npm cache at your end.


  • Ensure to update our packages to the same major version.


  •  Run the "npm install” command to install the packages.


Kindly refer our below documentation licensing FAQ's.


Link: https://ej2.syncfusion.com/react/documentation/licensing/licensing-troubleshoot#potential-causes-of-licensing-errors-in-applications


If you require any further assistance or have additional questions, please feel free to let us know.


Regards,

Theveshwar


HN Hariprasath N April 18, 2024 08:43 AM UTC

Image_4256_1713429744294



After adding the license, I'm encountering this error. I'm using React with Next.js and the App Router. Please assist me in resolving the issue.


// Registering Syncfusion license key

registerLicense(myLicense);


MI Mohamed Imran Thamin Ansari Syncfusion Team April 22, 2024 06:11 AM UTC

Hi Hariprasath,

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. Also it is important to include 'use client' at the top of the page to indicate client side component.

 

 

'use client'

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

 

// Registering Syncfusion license key

registerLicense('Replace your generated license key here');

 

 

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.

 

Additionally, this issue may occur 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. v25.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.


 

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



Regards,

Mohamed


SM SUMIT MALI July 25, 2024 06:28 AM UTC

Image_7878_1721888647781



This is my layout.tsx file where you can see how i implemented to register licence key ....


Image_3408_1721888783361

this is my package.json 



here in nextjs i am getting this issue 
Image_6103_1721888833068

i have implemented same thing in Reactjs there this worked fine but i am getting error in nextjs 


is there any possible fixies or i need to work with ReactJs ?


TJ Theveshwar Jayakumar Syncfusion Team July 26, 2024 05:14 AM UTC

Hi SUMIT MALI,


Thank you for reaching out to 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. Regarding, Upon evaluating your loayout.tsx file, we have found that you haven’t included 'use client' at the top of the file to notify client side component for client side license validation.  So, please ensure that you have included 'use client' at the top to notify client side component:


layout.tsx:

'use client'

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

 

// Registering Syncfusion license key

registerLicense('your license key');


If still the issue persists or if you need any further assistance reach out to us.


Regards,

Theveshwar


AH Ahsan December 18, 2025 08:00 PM UTC

The issue is that the registerLicense function from Syncfusion can only run in a client component. That means we must use frontend environment variables in Next.js, which require the NEXT_PUBLIC prefix.

Our setup runs on AWS EC2 using a Docker image. We store our environment values in AWS Secrets Manager. The backend environment variables work at runtime, but the frontend variables must be available at build time so that Next.js can bundle them into the client.

Right now, Docker does not receive the value for NEXT_PUBLIC_SYNC_FUSION_LICENSE_KEY before the production build. Because the value is missing during next build, it is not included in the client bundle, and registerLicense receives undefined.

My questions:

  1. Is there any supported way to call registerLicense from a server component without using "use client"?
  2. Is there any alternative approach that avoids requiring the license to be embedded at build time?
  3. Is there any recommended way to use Syncfusion with environment values stored in AWS Secrets Manager when the build is Dockerized?
Here is the code where I register the license:
"use client";
import React, { ReactNode } from "react";
import { registerLicense } from "@syncfusion/ej2-base";
import { SYNC_FUSION_LICENSE_KEY } from "@src/config";
import { ReactQueryProvider } from "@src/lib";
import { ToastProvider } from "@src/components/toast";

type ProviderProps = {
children: ReactNode;
};

registerLicense(SYNC_FUSION_LICENSE_KEY!);

function Providers({ children }: ProviderProps) {
return (
<ReactQueryProvider>
<ToastProvider>{children}</ToastProvider>
</ReactQueryProvider>
);
}

export default Providers;



And here is the relevant part of package.json:

PS: I already tried removing ej2 libraries, but the restriction still applies

{
"name": "abc",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@hookform/resolvers": "^5.1.1",
"@syncfusion/ej2-base": "^30.1.38",
"@syncfusion/ej2-buttons": "^30.1.37",
"@syncfusion/ej2-calendars": "^31.1.20",
"@syncfusion/ej2-data": "^30.1.40",
"@syncfusion/ej2-dropdowns": "^31.1.20",
"@syncfusion/ej2-icons": "^30.2.4",
"@syncfusion/ej2-inputs": "^31.1.20",
"@syncfusion/ej2-kanban": "^30.1.39",
"@syncfusion/ej2-layouts": "^30.1.40",
"@syncfusion/ej2-lists": "^30.1.42",
"@syncfusion/ej2-navigations": "^30.1.42",
"@syncfusion/ej2-notifications": "^30.1.37",
"@syncfusion/ej2-popups": "^30.1.37",
"@syncfusion/ej2-react-buttons": "^30.1.37",
"@syncfusion/ej2-react-calendars": "^30.1.37",
"@syncfusion/ej2-react-dropdowns": "^30.1.39",
"@syncfusion/ej2-react-grids": "^30.1.39",
"@syncfusion/ej2-react-inputs": "^30.1.38",
"@syncfusion/ej2-react-kanban": "^30.1.39",
"@syncfusion/ej2-react-navigations": "^30.2.5",
"@syncfusion/ej2-react-notifications": "^30.1.37",
"@syncfusion/ej2-react-popups": "^30.1.40",
"@syncfusion/ej2-react-richtexteditor": "^30.2.5",
"@syncfusion/ej2-react-schedule": "^31.1.20",
"@syncfusion/ej2-react-splitbuttons": "^30.1.39",
"@syncfusion/ej2-splitbuttons": "^31.1.17",
"@tanstack/react-query": "^5.83.0",
"axios": "^1.10.0",
"clsx": "^2.1.1",
"dayjs": "^1.11.13",
"next": "15.3.5",
"next-auth": "^5.0.0-beta.27",
"pluralize": "^8.0.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.60.0",
"tailwind-merge": "^3.3.1",
"zod": "^3.25.75",
"zsa": "^0.6.0",
"zsa-react-query": "^0.2.1"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/pluralize": "^0.0.33",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.3.5",
"prettier": "^3.6.2",
"tailwindcss": "^4",
"typescript": "^5"
}

}​


Attachment: home_24d76882.jpg

Loader.
Up arrow icon