Material-table: 'WebpackError: ReferenceError: window is not defined' when building a static site using gatsbyjs

[floAr]

Using the current version of material-table it is not possible to build out a static html side (for example using gatsby js)
During the build process the error WebpackError: ReferenceError: window is not defined shows up. I'm using "material-table": "^1.62.0",

It was working on an older version of material-table: https://codesandbox.io/s/yj6jnmqpw9?file=/package.json
but seems to be broken by something introduced in the meantime. There are some leads on the gatsby side, but not enough to fix the error: https://www.gatsbyjs.org/docs/debugging-html-builds/#how-to-check-if-code-classlanguage-textwindowcode-is-defined

Any help is greatly appreciated

[hendra-go]

Yeah, i confirmed this bug.

The problem is jsPDF. Related to Angular universal does not work with jsPDF: ReferenceError: window is not defined

It is not material-table fault, but probably not published new version until above issue fixed ?

Currently i am not using PDF Export, should it be this feature optional, not need to force it into material-table core ?
just my 2 cents

[zackkrida]

Yeah this is pretty critical—means any use of Material Table in a project with server-side rendering (SSR) could break, especially considering this was released on a minor version bump (so folks deployment processes may automatically bump to this version).

[oze4]

Is this still an issue with v1.63.0? I know that version fixed a different jsPDF issue.

[floAr]

@oze4 I created a quick fix for this and confirmed it is working for the gatsby stack

[floAr]

Is this still an issue with v1.63.0? I know that version fixed a different jsPDF issue.

I think the fix was about putting jsPDF into normal depenency instead of dev. I tried it yesterday and the fix was still present. It breaks when importing the jspdf package during a static build process (because it uses 'window' which is undefined without a browser)

[hendra-go]

Thanks @floAr , i also confirmed this PR works with Gatsby.

But for me, i will stick to material-table 1.62.0 because that version had all i need for my current project.

I will upgrade only if my project needs PDF Export function or material-table becomes more modular or at least has an option to choose which export function suites your need.

Probably instead:
exportButton: true

We can use something like:

exportButton: {
    exportCsv: true,
    exportPdf: true
}

[willwill96]

Experiencing the same thing with SSR - just going to revert to 1.62.0 until this is resolved

[floAr]

There is a PR (#2114) that sould solve this problem, @mbrn maybe you want to have a look on this?

[s-kris]

Same issue with NextJS

[gxwheel152]

Agree --- would be nice to have the ability to turn off the PDF version. Hitting the same issue with a Gatsby site

[CloudZazu]

I have the same problem with Next.js

[mahdibarati]

version 1.65.0 had this bug from jspdf.
I'm using 1.62.0 and everything is OK now

[mariojfduarte]

facing same problem

[modbender]

No fix yet? Same problem with Nextjs

Server Error
ReferenceError: window is not defined

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
<unknown>
file:///C:/project/frontend/node_modules/jspdf/dist/jspdf.min.js (37:30237)
<unknown>
file:///C:/project/frontend/node_modules/jspdf/dist/jspdf.min.js (1:62)
Object.<anonymous>
file:///C:/project/frontend/node_modules/jspdf/dist/jspdf.min.js (1:66)
Module._compile
internal/modules/cjs/loader.js (1158:30)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1178:10)
Module.load
internal/modules/cjs/loader.js (1002:32)
Function.Module._load
internal/modules/cjs/loader.js (901:14)
Module.require
internal/modules/cjs/loader.js (1044:19)
require
internal/modules/cjs/helpers.js (77:18)
Object.<anonymous>
file:///C:/project/frontend/node_modules/material-table/dist/components/m-table-toolbar.js (60:37)
Module._compile
internal/modules/cjs/loader.js (1158:30)
Object.Module._extensions..js
internal/modules/cjs/loader.js (1178:10)
Module.load
internal/modules/cjs/loader.js (1002:32)
Function.Module._load
internal/modules/cjs/loader.js (901:14)
Module.require
internal/modules/cjs/loader.js (1044:19)
require
internal/modules/cjs/helpers.js (77:18)

Temporary fix is to use nextjs dynamic import:

import dynamic from "next/dynamic";

const MaterialTable = dynamic(() => import("material-table"), { ssr: false });

[amahar]

I have this problem with Nextjs - reverting to version material-table 1.62.0 for now.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. You can reopen it if it required.