ESM module for GridJS

jrf.att · April 17, 2023, 11:19pm

A previous thread noted that gridjs-spreadsheet doesn’t work in the browser as it is configured as a CommonJS module. I’m attempting to use gridjs-spreadsheet in a React application and hitting a similar issue.

While we technically can import the required JS files at the root index.html file, that goes against general React patterns and means the gridjs code will be loaded everywhere.

Would it be possible to have an ESM module definition added to gridjs-spreadsheet (i.e. “module” in addition to “main” in package.json), so that we can import gridjs-spreadsheet only in the relevant components?

peter.zhou · April 18, 2023, 1:15am

@jrf.att
we will improve it.
We have opened the following new ticket(s) in our internal issue tracking system .
Issue Title: provide ESM module definition for gridjs client js
Issue ID(s): CELLSGRIDJS-792

peter.zhou · April 18, 2023, 9:47am

@jrf.att
We 've updated in the npmjs

can you check if it meet your requirement .

jrf.att · April 19, 2023, 1:15am

@peter.zhou Thanks for looking at this so quickly! I’m still seeing an error when trying to import. Looks like something in xspreadsheet.js is trying to edit exports, which is making Webpack unhappy:

caught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at xspreadsheet.js:12:1
    at Object.<anonymous> (xspreadsheet.js:12:1)
    at push../node_modules/gridjs-spreadsheet/xspreadsheet.js (xspreadsheet.js:12:1)
    at i (xspreadsheet.js:1:1)
    at Module.<anonymous> (xspreadsheet.js:12:1)
    at i (xspreadsheet.js:1:1)
    at xspreadsheet.js:1:1
    at ./node_modules/gridjs-spreadsheet/xspreadsheet.js (xspreadsheet.js:1:1)
    at __webpack_require__ (bundle.js:852:31)
    at fn (bundle.js:151:20)
    at ./node_modules/gridjs-spreadsheet/index.js (index.js:1:1)
    at __webpack_require__ (bundle.js:852:31)
    at fn (bundle.js:151:20)
    at Module.<anonymous> (useSpreadsheet.js:8:1)
    at ./src/components/workspace/document/useSpreadsheet.js (useSpreadsheet.js:325:1)
[...]
    at __webpack_require__ (bundle.js:852:31)
    at checkDeferredModules (bundle.js:46:23)
    at Array.webpackJsonpCallback [as push] (bundle.js:33:19)
    at main.chunk.js:1:81

I’m importing with import Spreadsheet from 'gridjs-spreadsheet' per the README. useSpreadsheet.js is the file with the import statement.

peter.zhou · April 19, 2023, 1:38am

@jrf.att
seems the module.export in the index.js does not work.
now we change to the direct use.
update “main” to “xspreadsheet.js” in package.json.
please have a try with the 23.4.2 patch .
if you still meet issues.
Please provide your project and describe the detail run steps one by one.
then we can reproduce the issue and fix it.

jrf.att · April 19, 2023, 2:07am

@peter.zhou Still seeing the issue with 23.4.2. I’ve created a minimal repro project and uploaded to GitHub - james-atticus/aspose-gridjs-263367: Minimal repro for the issue described in https://forum.aspose.com/t/esm-module-for-gridjs/263367. If you clone that, and run yarn start, you’ll get the error in the console.

Steps to create the project, if you wanted to try from scratch:

Create new app with yarn create react-app aspose-gridjs-263367 (following Getting Started | Create React App)
cd aspose-gridjs-263367
yarn add gridjs-spreadsheet
Add the import statement to App.js
yarn start, then visit http://localhost:3000

amjad.sahi · April 19, 2023, 10:31am

@jrf.att,

Thanks for the sample project and details. We need to investigate your issue. We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-795

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.

jrf.att · April 21, 2023, 12:09am

Thanks @amjad.sahi - if/when you get to that ticket, it would be great if you could also change the code to import JSZip/JQuery using require/import rather than relying on the script being globally available.

peter.zhou · April 21, 2023, 1:19am

@jrf.att
we will update the related document to add/introduce the required lib section.
but consider if we import all the required lib,the output js will be large.
it is not good for us to do it.

jrf.att · April 21, 2023, 4:02am

@peter.zhou Sorry, wasn’t suggesting you copy the whole jquery code into your NPM module. I was seeing if it was possible to add jquery as a dependency for your NPM module. For example, in package.json:

{
  "name": "gridjs-spreadsheet",
  "version": "23.4.0",
  [...]
  "dependencies": {
    "jquery": "^3.6.0"
  }
}

Then in xspreadsheet.js:

const $ = require('jquery');
[...the rest of the existing code]

That way, $ doesn’t have to be globally available. When we do npm install gridjs-spreadsheet, we would automatically get jquery included as a transitive dependency.

peter.zhou · April 21, 2023, 4:05am

@jrf.att thanks. that seems a nice way.
we will try and update the package.json.

peter.zhou · April 25, 2023, 3:25am

@jrf.att
We’ve updated the npmjs package, please try the latest package. We’ve added the dependency lib in the package.json. We’ve evaluated the dependency lib. for the using of jquery/jszip/jqueryui, we don’t include it in our code level and other configuration as importing those in code level will greatly increase complexity of the product. So I suggest in your js side, you just add the import yourself. Or you can add them through cdn way:

import JSZip from ‘jszip’;
import $ from ‘jquery’;
window.$ = $;

jrf.att · April 26, 2023, 12:12am

Thanks @peter.zhou, got it working with a couple of additional lines of code:

// Include gridjs-spreadsheet CCS styling.
import 'gridjs-spreadsheet/xspreadsheet.css';

// gridjs-spreadsheet requires JSZip to be on the window
window.JSZip = JSZip;

There’s a bug in 23.4.5 which prevents images/charts from being scrolled on certain spreadsheets. This is the console error:

Uncaught TypeError: Cannot read properties of undefined (reading 'left')
    at xspreadsheet.js:12:1
    at Array.forEach (<anonymous>)
    at objectScroll (xspreadsheet.js:12:1)
    at xspreadsheet.js:12:1
    at Array.forEach (<anonymous>)
    at e.value (xspreadsheet.js:12:1)
    at i.value (xspreadsheet.js:12:1)
    at o.scrollImagesShapes (xspreadsheet.js:12:1)
    at xspreadsheet.js:12:1
    at e.value (xspreadsheet.js:12:1)
    at e.Xo (xspreadsheet.js:12:1)
    at a.moveFn (xspreadsheet.js:12:1)
    at xspreadsheet.js:12:1
    at HTMLDivElement.<anonymous> (xspreadsheet.js:12:1)

This is the object we’re failing on:

{
    "type": "image",
    "version": "4.6.0",
    "originX": "left",
    "originY": "top",
    "left": 71,
    "top": 32,
    "width": 54,
    "height": 80,
    "fill": "rgb(0,0,0)",
    "stroke": null,
    "strokeWidth": 0,
    "strokeDashArray": null,
    "strokeLineCap": "butt",
    "strokeDashOffset": 0,
    "strokeLineJoin": "miter",
    "strokeUniform": false,
    "strokeMiterLimit": 4,
    "scaleX": 1,
    "scaleY": 1,
    "angle": 0,
    "flipX": false,
    "flipY": false,
    "opacity": 1,
    "shadow": null,
    "visible": true,
    "backgroundColor": "",
    "fillRule": "nonzero",
    "paintFirst": "fill",
    "globalCompositeOperation": "source-over",
    "skewX": 0,
    "skewY": 0,
    "cropX": 0,
    "cropY": 0,
    "src": "blob:https://localhost:3000/5f1e509d-a824-4504-ba20-20afc0517f91",
    "crossOrigin": null,
    "filters": []
}

I was able to reproduce the error with the first sheet of this file: Annual reporting suite | Financial disclosures and reporting - NAB

peter.zhou · April 26, 2023, 1:18am

@jrf.att
We can reproduce this issue in the react project you provided.
We have opened the following new ticket(s) in our internal issue tracking system and will deliver their fixes according to the terms mentioned in Free Support Policies.

Issue ID(s): CELLSGRIDJS-801

You can obtain Paid Support Services if you need support on a priority basis, along with the direct access to our Paid Support management team.