Licensing with Next.js on Vercel (solved)

[Scott Reid]

I'm looking for guidance on how to best do the licensing registration with a Next.js app on Vercel.
I'm currently doing it via registerLicense in my app router page.tsx, which does work on a dev server (see below)

On a vercel deployment though, the component (grid) shows the 'unlicensed' banner.

'use client'

import { SYNCFUSION_LICENSE_KEY} from '@/lib/settings'

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

// Register Syncfusion license only on client side - this logic required for prerender build to work

if (typeof window !== 'undefined') {

registerLicense(SYNCFUSION_LICENSE_KEY);

}

...

[Scott Reid]

I've also tried switching to the command line activation by adding these postbuild steps in package.json/scripts

"postbuild": "npx syncfusion-license activate && npm cache clean --force",

Vercel build logs show both commands completing successfully, but this did not resolve the registration message.

[Deepika Arumugasamy]

Hi Scott Reid,

Thank you for reaching out.

We have evaluated the issue you reported and understand that you are facing difficulties while registering the license in your application. Regarding this issue, 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.

 

Please make sure to register the generated key in the application through the "register license" method, which should be called from the root folder of the application. Below is the documentation for license key registration.

Documentation: 

generate a new license key

License key registration

 

layout.tsx:

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

 

// Registering Syncfusion license key

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

 

However, if you would like to register globally, you can use our npx command for license registration. The license activation should be done before the Next.js build process after installing packages.

 

The ^ symbol allows for major version upgrades, which can sometimes lead to conflicts. To avoid this, we recommend replacing the ~ sign instead of ^, since it is best practice to avoid any major version upgrade conflict, and it will bring the latest patch of the current version. 

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, .next folder from the root folder.
• Clear the npm cache file at your end: npm cache clean --force.
• Update our packages to the same major version. For example, if you are using a version like (i.e., v27.1.XX), use the same version for all the Syncfusion components in the package.json file.
• Run the ‘’npm install” command to install the Syncfusion packages again.

 

Please refer our below documentation licensing FAQ's

 

Link:  Licensing FAQ's

 

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

Regards,

Deepika

[Scott Reid]

Thank you!

For others that land here looking for a solution, this is what ultimately worked for me:

1. In package,json, scripts item, add this:

"prebuild": "npm cache clean --force && npx syncfusion-license activate",

2. Deploy to vercel

3. Re-deploy from vercel deployments page, ensuring "Use existing build cache" is UN-checked.

[Deepika Arumugasamy]

Hi Scott Reid,

Thank you for the update. Please get back to us if you need any further assistance. 

Regards,

Deepika