SpreadSheets and Designer Typescript errors

SpreadSheets and Designer Typescript errors

Posted by: luis.pagliaro on 13 June 2023, 9:47 am EST

• 

  luis.pagliaro

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 13 June 2023, 9:47 am EST

  Hi! We are trying to set up SpreadJS with typescript and run into an error when using the SpreadSheets or Designer components:

  'SpreadSheets' cannot be used as a JSX component.
    Its instance type 'SpreadSheets' is not a valid JSX element.
      Type 'SpreadSheets' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

  I created a CodeSandbox to try and replicate this issue:

  https://codesandbox.io/p/sandbox/dreamy-mestorf-793w2j?file=%2Fpages%2FSpreadSheet.tsx%3A15%2C11-15%2C23

  the sandbox is using versions and configurations similar to our project.

  Is there any way we can fix this?

  Thanks.

  Regards.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 14 June 2023, 11:56 pm EST

  Hello,

  We were not able to replicate the issue on our end. We tried to replicate the issue by using the sample shared by you. However, it was working correctly and throwing no error after we added the license key to the SpreadJS.
  
  Please refer to the attached sample.

  sample: https://codesandbox.io/p/sandbox/bold-feynman-r75zw8?file=%2Fpages%2FSpreadSheet.tsx%3A2%2C43

  Could you please share a minimal working sample which replicates the issue? This will enable us to thoroughly investigate the issue and provide the solution accordingly.

  regards,
  
  Avinash

• 

  luis.pagliaro

  • Post Options:
  • Link
    Copy

  Posted 15 June 2023, 8:07 am EST - Updated 15 June 2023, 8:12 am EST

  Hi! I just opened the sandbox you provided and the error comes up as soon as it is opened. See screenshot attached

  

  1356×655 125 KB

• 

  luis.pagliaro

  • Post Options:
  • Link
    Copy

  Posted 15 June 2023, 11:02 am EST - Updated 15 June 2023, 11:27 am EST

  We noticed in the docs:

  https://www.grapecity.com/spreadjs/docs/javascript_frameworks/UsingSpread.SheetswithReact/UsingtheExcelIOElement

  it says that a license needs to be provide to ExcelIO but there no property LicenseKey in the ExcelIO module:

  

  We can omit it and try and set it anyways:

  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  ExcelIO.LicenseKey = sjsLicense

  but feels hacky.

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 16 June 2023, 7:35 am EST

  Hello,
  
  Thank you for providing us with an image of the issue.
  
  We were able to replicate the issue on our end. The issue seems to be caused because the component return type does not match with the JSX Element syntax.
  
  You can remove this type error by adding “react”: [“./node_modules/@types/react”] in “paths” of “compilerOptions” in tsconfig.json file.
  
  Please refer to the attached sample
  
  sample: https://codesandbox.io/p/sandbox/bold-feynman-r75zw8?file=%2Fpages%2FSpreadSheet.tsx%3A19%2C1Hello,
  
  Thank you for providing us with an image of the issue.
  
  We were able to replicate the issue on our end. The issue seems to be caused because the component return type does not match with the JSX Element syntax.
  
  You can remove this type error by adding “react”: [“./node_modules/@types/react”] in “paths” of “compilerOptions” in tsconfig.json file.
  
  Please refer to the attached sample
  
  sample: https://codesandbox.io/p/sandbox/bold-feynman-r75zw8?file=%2Fpages%2FSpreadSheet.tsx%3A19%2C1

  regards,
  
  Avinash

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 20 June 2023, 1:01 am EST

  Hello,

  Regarding the type error. We were able to replicate the issue on our end. It seems to occur because of the missing type definition from the definition file of the ExcelIO module. Hence, we have escalated this issue to the concerned team. Please be rest assured that we will keep you updated as there is any progress on this issue.
  
  Please let us know if you face any difficulties. The internal ID for this issue will be SJS-18807.

  Regards,
  
  Avinash

• 

  avinash.pathak

  

  • Post Options:
  • Link
    Copy

  Posted 20 June 2023, 11:27 pm EST

  Hi,

  The team informed us that this is a limitation because in typescript we can not add property on the namespace level. we are sorry for the inconvenience. You may use any keyword to avoid errors. Please refer to the following code snippet.

  (IO as any).LicenseKey = SpreadJSKey;

  Regards,
  
  Avinash

• 

  luis.pagliaro

  • Post Options:
  • Link
    Copy

  Posted 21 June 2023, 8:30 am EST

  Thanks for your help, Avinash!