docs.sheetjs.com/docz/docs/03-demos/02-frontend/19-bundler/21-swcpack.md

title	sidebar_label	pagination_prev	pagination_next	sidebar_position
Bundling Sheets with SWC	SWC spack	demos/index	demos/grid/index	21

import current from '/version.js'; import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import CodeBlock from '@theme/CodeBlock';

SWC¹ is a JS toolchain. SWC provides spack (formally called "swcpack") for bundling scripts.

SheetJS is a JavaScript library for reading and writing data from spreadsheets.

This demo uses spack and SheetJS to export data. We'll explore how to bundle SheetJS in a site using spack and how to export data to spreadsheets.

:::note pass

This demo focuses on integration details with the spack bundler.

The demos follow the "Export Tutorial", which covers SheetJS library usage in more detail.

:::

:::note Tested Deployments

This demo was tested in the following environments:

Version	Date
1.21.1	2025-06-18

:::

Integration Details

The "Frameworks" section covers installation with Yarn and other package managers.

After installing the SheetJS module in a SWC spack project, import statements can load relevant parts of the library.

Projects that import data will use methods such as read² to parse workbooks and sheet_to_json³ to generate usable data from files. As sheet_to_json is part of the utils object, the required import is:

import { read, utils } from 'xlsx';

Projects that export data will use methods such as json_to_sheet⁴ to generate worksheets and writeFile⁵ to export files. As json_to_sheet is part of the utils object, the required import is:

import { utils, writeFile } from 'xlsx';

:::caution pass

When this demo was tested against recent versions of @swc/core, spack crashed:

thread '<unnamed>' panicked at 'cannot access a scoped thread local variable without calling `set` first',

This is a bug in SWC

This bug is known to affect versions 1.3.100, 1.4.17, and 1.10.6.

This bug was fixed in version 1.21.1. It is strongly recommended to upgrade existing projects to use 1.21.1 or to downgrade to 1.2.246.

:::

Complete Example

0. Initialize a new project:

mkdir sheetjs-spack
cd sheetjs-spack
npm init -y

1. Install the dependencies using a package manager:

{`\ npm i --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.21.1`} {`\ pnpm install --save https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.21.1`} {`\ yarn add https://cdn.sheetjs.com/xlsx-${current}/xlsx-${current}.tgz regenerator-runtime @swc/cli @swc/core@1.21.1`}

:::note pass

The regenerator-runtime dependency is used for transpiling fetch and is not required if the interface code does not use fetch or Promises.

:::

2. Save the following to index.js:

import { utils, version, writeFileXLSX } from 'xlsx';

document.getElementById("xport").addEventListener("click", async() => {
/* fetch JSON data and parse */
const url = "https://docs.sheetjs.com/executive.json";
const raw_data = await (await fetch(url)).json();

/* filter for the Presidents */
const prez = raw_data.filter(row => row.terms.some(term => term.type === "prez"));

/* sort by first presidential term */
prez.forEach(row => row.start = row.terms.find(term => term.type === "prez").start);
prez.sort((l,r) => l.start.localeCompare(r.start));

/* flatten objects */
const rows = prez.map(row => ({
  name: row.name.first + " " + row.name.last,
  birthday: row.bio.birthday
}));

/* generate worksheet and workbook */
const worksheet = utils.json_to_sheet(rows);
const workbook = utils.book_new();
utils.book_append_sheet(workbook, worksheet, "Dates");

/* fix headers */
utils.sheet_add_aoa(worksheet, [["Name", "Birthday"]], { origin: "A1" });

/* calculate column width */
const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
worksheet["!cols"] = [ { wch: max_width } ];

/* create an XLSX file and try to save to Presidents.xlsx */
writeFileXLSX(workbook, "Presidents.xlsx");
});

3. Create an spack.config.js config file:

module.exports = ({
  entry: {
    'web': __dirname + '/index.js',
  },
  output: {
    path: __dirname + '/lib'
  },
  module: {},
});

4. Build for production:

npx spack

This command will create the script lib/web.js

5. Create a small HTML page that loads the generated script:

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <h1>SheetJS Presidents Demo</h1>
    <button id="xport">Click here to export</button>
    <script src="lib/web.js"></script>
  </body>
</html>

6. Start a local HTTP server, then go to http://localhost:8080/

npx -y http-server .

Click on "Click here to export" to generate a file.

---

1. See "Bundling Configuration" in the SWC documentation for more details. ↩︎

2. See read in "Reading Files" ↩︎

3. See sheet_to_json in "Utilities" ↩︎

4. See json_to_sheet in "Utilities" ↩︎

5. See writeFile in "Writing Files" ↩︎