Links
Comment on page

Using Spreadsheet with NextJS

SSR is supported, but Server components, not yet
Add use client at the top of your file, so this component will be part of client bundle
"use client";
import { SpreadsheetProvider, CanvasGrid } from "@rowsncolumns/spreadsheet";
export const Sheet = () => {
return (
<SpreadsheetProvider>
<CanvasGrid />
</SpreadsheetProvider>
);
};

Loading Canvas in Node

NextJS throws error while compiling canvas during SSR. If you see these errors,
Error: Module not found: Can't resolve 'canvas'
Did you mean './canvas'?
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
the solution would be to install canvas and add it as an external module in nextJS
yarn add canvas --dev
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack (config) {
config.externals.push('canvas')
return config
}
}
module.exports = nextConfig