Spread-sheets-vue with Typescript

Spread-sheets-vue with Typescript

Posted by: borodavkin on 31 May 2023, 4:10 am EST

• 

  borodavkin

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 31 May 2023, 4:10 am EST - Updated 31 May 2023, 5:58 am EST

  I use vue3 with typescript.

  When i try to apply code

  import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity/spread-sheets-vue';

  from demo to my program i got error of type declaration file d.ts. How can i handle this?

  Same for spread-sheets-designer-vue package.

  Also i try to create fresh vue app with designer by instruction:
  
  https://www.grapecity.com/spreadjs/docs/spreadjs_designer_component/designer-javaScript-frameworks/designer-vue

  but face with error:

  caught TypeError: Cannot read properties of undefined (reading ‘DR’)
  
  at …/localization/resentry (gc.spread.sheets.designer.all.min.js:1:6860884)
  
  at a (gc.spread.sheets.designer.all.min.js:1:6861143)
  
  at ./src/commands/defaultConfig.ts (gc.spread.sheets.designer.all.min.js:1:663974)
  
  at a (gc.spread.sheets.designer.all.min.js:1:6861143)
  
  at ./src/all.entry.ts (gc.spread.sheets.designer.all.min.js:1:242497)
  
  at a (gc.spread.sheets.designer.all.min.js:1:6861143)
  
  at gc.spread.sheets.designer.all.min.js:1:6861529
  
  at gc.spread.sheets.designer.all.min.js:1:6861639
  
  at gc.spread.sheets.designer.all.min.js:1:421
  
  at node_modules/@grapecity/spread-sheets-designer/dist/gc.spread.sheets.designer.all.min.js (

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 1 June 2023, 11:33 pm EST

  Hello Anton,

  As I can understand, you are getting an error related to type declaration when you are importing “@grapecity/spread-sheets-vue” module and property undefined error while trying to use designer component.

  You are getting type declaration error because there is no declaration(.d.ts) file for the “@grapecity/spread-sheets-vue” module. You can remove this error by creating a declaration file “index.d.ts” in the folder “node_modules/@grapecity/spread-sheets-vue”. The “index.d.ts” file contains the following statement.

  declare module '@grapecity/spread-sheets-vue';

  This will remove the typescript error you are getting.

  Additionally, you can also use “//@ts-ignore” to avoid the compiler error of typescript or specify ‘“noImplicitAny”: false’ in the “tsconfig.json” file.

  //@ts-ignore
  import { GcSpreadSheets, GcWorksheet, GcColumn } from '@grapecity/spread-sheets-vue';

  When you are using designer component, it is throwing property undefined error because you may not be importing all the modules required by the designer module or importing them in the incorrect order.

  Please refer to the attached samples of SpreadJS and SpreadJS Designer with vue3 and typescript

  SpreadJS Sample: spread-vue.zip

  SpreadJS Designer Sample: designer-vue.zip

  Please let me know if you still face any issues or have any doubts.

  Regards,

  Ankit

• 

  borodavkin

  • Post Options:
  • Link
    Copy

  Posted 2 June 2023, 2:31 am EST - Updated 2 June 2023, 4:13 am EST

  Hello Ankit!

  While i waited the answer i already found “ts-ignore” solution, this is works, thanks. But designer is not. I compared package.json from your sample and my file - installed packages related to spreadsheet are same, also as importing order. I use instruction from docs, so i copy code from there, and he is same as your sample.

  This error causes when i just import Designer in main.ts, so i think modules importing is not important in that case.

  I recreated this situation in sandbox https://codesandbox.io/p/sandbox/loving-babycat-errcx7

  Also i notice that my app create with vite (same as sandbox), and your is not, maybe thats the reason?

  Edit: I run your sample and its works just fine

  Thanks for your help!

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 6 June 2023, 12:32 am EST

  Hi,

  We are happy that your issue has been resolved. Please let me know if you need further assistance on this matter.

  Regards,

  Ankit

• 

  borodavkin

  • Post Options:
  • Link
    Copy

  Posted 6 June 2023, 1:00 am EST - Updated 6 June 2023, 1:00 am EST

  Sorry i probably misled you. My issue is not resolve. Running your sample works fine, BUT my app work with vite, that cause error that still persist. I recreated issue in sanbox (link in previouse message)

• 

  ankit.kumar

  

  • Post Options:
  • Link
    Copy

  Posted 6 June 2023, 2:19 am EST - Updated 6 June 2023, 2:24 am EST

  Hi Anton,

  Sorry for the confusion on my side also. Looking at your comment, I thought the issue is resolved.

  I tested the codesandbox sample that you sent to me. There were some issues with the implementation. Please consider the following points:

  1. Import the GC Object in the main.ts file.

  import GC from "@grapecity/spread-sheets";

  2. Import the Designer Component Dependencies

  import "@grapecity/spread-sheets-designer-resources-en";
  import "@grapecity/spread-sheets-designer";
  // @ts-ignore
  import Designer from "@grapecity/spread-sheets-designer-vue";

  3. Setting the License Key for the SpreadJS and Designer Component before registering the component:

  GC.Spread.Sheets.LicenseKey = "sjs-key"
  
  (GC.Spread.Sheets as any).Designer.LicenseKey = "designer-key".

  Kindly refer to the following codesandbox sample in which I have made the changes. Please let me know if you still face any problems.

  Sample: https://codesandbox.io/p/sandbox/angry-night-ylt3s0?file=%2Fsrc%2Fmain.ts%3A6%2C47

  Regards,

  Ankit

  

  1613×815 87.4 KB

• 

  borodavkin

  • Post Options:
  • Link
    Copy

  Posted 6 June 2023, 4:52 am EST

  Ankit, many thanks!