Add use client
at the top of your file, so this component will be part of client bundle
More info here -
Copy "use client";
import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";
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,
Copy Error: Module not found: Can't resolve 'canvas'
Did you mean './canvas'?
Copy 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
Copy yarn add canvas --dev
Copy /** @type {import('next').NextConfig} */
const nextConfig = {
webpack (config) {
config.externals.push('canvas')
return config
}
}
module.exports = nextConfig
CSS Specificity when importing stylesheet
NextJS does not respect the order of CSS imports. So there could be style conflicts if you are using tailwindcss in a nextJS project.
The proposed solution is
Install postcss-import
and add it to your postcss.config.js
Copy module.exports = {
plugins: {
"postcss-import": {},
tailwindcss: {},
autoprefixer: {},
},
};
Import spreadsheet style using the import statement
Copy @import "tailwindcss/base";
@import "@rowsncolumns/spreadsheet/dist/spreadsheet.min.css";
@tailwind components;
@tailwind utilities;
If you are still having problems with conflicting css in nextjs, this is another way to solve it.
Install the rowsncolumns tailwind preset
Copy yarn add @rowsncolumns/tailwindcss-preset --dev
// or
npm install @rowsncolumns/tailwindcss-preset
Update tailwindcss content and add the preset
Copy // tailwind.config.js
content: [
...// your files
"./node_modules/@rowsncolumns/*/dist/**/*.js"
],
presets: [
require('@rowsncolumns/tailwindcss-preset')
]
Import spreadsheet css variables
Import this css file in global.css
Copy // global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "./spreadsheet.css"