Packing Sheets with Rspack
Rspack is a fast module bundler for JavaScript.
SheetJS is a JavaScript library for reading and writing data from spreadsheets.
This demo uses Rspack and SheetJS to export data. We'll explore how to add SheetJS to a site using Rspack and how to export data to spreadsheets.
This demo focuses on integration details with the Rspack bundler.
The demos follow the "Export Tutorial", which covers SheetJS library usage in more detail.
This demo was tested in the following environments:
| Rspack | Date |
|---|---|
1.5.5 | 2025-09-18 |
Integration Details
The "Frameworks" section covers installation with Yarn and other package managers.
After installing the SheetJS module in a Rspack project, import statements can
load relevant parts of the library.
Projects that import data will use methods such as read1 to parse workbooks
and sheet_to_json2 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_sheet3 to
generate worksheets and writeFile4 to export files. As json_to_sheet is
part of the utils object, the required import is:
import { utils, writeFile } from 'xlsx';
Complete Example
This demo follows the Export Example.
- Initialize a new project:
mkdir sheetjs-rspack
cd sheetjs-rspack
npm init -y
- Install the dependencies using a package manager:
- npm
- pnpm
- Yarn
npm i --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz @rspack/core @rspack/cli
pnpm install --save https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz @rspack/core @rspack/cli
yarn add https://cdn.sheetjs.com/xlsx-0.20.3/xlsx-0.20.3.tgz @rspack/core @rspack/cli
- Save the following to
src/index.js:
import { utils, 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");
});
- Create bundle:
npx -p @rspack/cli rspack build
This build may fail with a module error:
ERROR in ./src/index.js
× Module parse failed:
╰─▶ × JavaScript parse error: 'import', and 'export' cannot be used outside of module code
Some versions of the npm tool create package.json files with the option
"type": "commonjs". Rspack will fail if that option is specified. Edit
package.json and remove the property:
"license": "ISC",
"type": "commonjs",
"dependencies": {
This command will create the script dist/main.js
- 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="dist/main.js"></script>
</body>
</html>
- Start a local HTTP server:
npx -y http-server .
Access the displayed URL (typically http://localhost:8080) with a web browser.
Click the "Click here to export" button to generate Presidents.xlsx