Set license key in NextJS

Posted by: lucas.nguyen on 18 December 2024, 2:16 am EST

  • Posted 18 December 2024, 2:16 am EST - Updated 18 December 2024, 3:21 am EST

    I am using SpreadJS in a web application built with NextJS v14.2.14. I want to set a license key for all the spreadsheets in the application, so I have set the license in a file named AppProvider, which is a client component, as shown below:

    'use client'
    import GC from '@mescius/spread-sheets'
    export default function AppProvider({
      children
    }: {
      children: React.ReactNode
    }) {
    
      GC.Spread.Sheets.LicenseKey = 'my key'
      GC.Spread.Common.CultureManager.culture('my culture')
    
      return (
        <AppContext.Provider>
          {children}
        </AppContext.Provider>
      )
    }

    The children here represent all the pages in my web application. However, after setting the license key, I often encounter a 500 error.

    This issue occurs on all pages of the application. Could anyone help me understand what might be causing this problem or suggest a possible solution?

  • Posted 19 December 2024, 3:08 am EST - Updated 19 December 2024, 3:13 am EST

    Hi,

    This error occurs when SpreadJS (SJS), a client-side component, is unable to access the browser’s window object. It seems that SJS is not receiving the window object at the time of rendering.

    To resolve this, you can use the useEffect hook to ensure that SJS gets the window object when rendering the client component. Please refer to the attached code snippet, GIF (“Steps.gif”), and sample (“Sample.zip”) for guidance.

    'use client';
    import { useEffect } from "react";
    import * as GC from "@grapecity/spread-sheets";
    
    const AppProvider = ({ children }) => {
      useEffect(() => {
        // Set your SpreadJS license key here
        const SPREADJS_LICENSE = "Enter license key here";
        GC.Spread.Sheets.LicenseKey = SPREADJS_LICENSE;
      }, []);
    
      return <>{children}</>;
    };
    
    export default AppProvider;

    Attachments:

    GIF:

    Sample: Sample.zip

    Regards,

    Priyam

  • Posted 19 December 2024, 3:45 am EST - Updated 19 December 2024, 3:58 am EST

    Hi Priyam,

    After setting the license key in a useEffect, I am still facing the issue. Try F5 your current page. Do you have another solution, or do you need some piece of code from my side?

    Best regards,

    Lucas

  • Posted 19 December 2024, 8:07 am EST

    Hi Lucas,

    The provided sample does not include a license key, which may cause issues when running it on your end. However, we have tested it on our side using a valid license key, as demonstrated in the previously shared GIF. Please ensure you test with a valid license key.

    If the issue persists even after using a license key, kindly share a minimal working sample along with detailed steps to replicate the behavior you have observed. Alternatively, you can modify the previously shared sample to replicate the issue. This will enable us to investigate the problem more thoroughly.

    Additionally, it would be helpful if you could provide a GIF or video illustrating the issue. Without a sample, it will be difficult for us to replicate the behavior. Reviewing only a code snippet might not reveal the problem, so we will require a sample to investigate.

    Regards,

    Priyam

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels