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>
);
};
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 nextJSyarn add canvas --dev
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack (config) {
config.externals.push('canvas')
return config
}
}
module.exports = nextConfig
Last modified 3mo ago