@mui/x-data-grid-premium "ReferenceError: atob is not defined"

[Maxastuart]

Steps to reproduce

Link to live example: (required)

We just bought MuiPremium and I was able to upgrade our Date-Pickers decently. However, I tried for 3 hours to make a live DataGridPremium example work with node 14.18.2, next 10.1.2, and the newest MUI packages - there are limitations within codesandbox that prevent the docker container for that node version from working. I can provide more elaborate code samples if needed, but I'm not going to waste any more time on a codesandbox when I found where the issue is in MUI's codebase.

Current behavior

next dev throws "ReferenceError: atob is not defined" when loading a page with DataGridPremium

Expected behavior

it should load a basic datagrid

Context

I saw some other issues mentioning atob and eval() and pieced together that there are checks for window.atob in order to use eval.

The version of Next (which we're stuck with for this project due to being locked on node 14.18) appears to be pre-rendering server side when in development mode in such a way that a package DataGridPremium relies on, gridFilterUtils.ts, is unable to proceed.

(it wouldn't be an issue for production for us, we serve MUI content as wholly statically generated, but watch mode for development is important)

Looks like it was fixed in some other utils but gridFilterUtils.js is missing -- a needle in a haystack that this big version-locked project came across.

I'd love next dev to work without this temp workaround I'm using on gridFilterUtils.ts#L27C76-L27C76

const evalCode = undefined; // globalScope[atob('ZXZhbA==')];

...which definitely won't work editing the node_modules file for deployment!

Your environment

npx @mui/envinfo

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.2/bin/npm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @mui/base:  5.0.0-beta.24 
    @mui/icons-material: ^5.14.18 => 5.14.18 
    @mui/lab: ^5.0.0-alpha.153 => 5.0.0-alpha.153 
    @mui/material: ^5.14.18 => 5.14.18 
    @mui/private-theming:  5.14.18 
    @mui/styles: ^5.14.18 => 5.14.18 
    @mui/system:  5.14.18 
    @mui/x-data-grid:  6.18.1 
    @mui/x-data-grid-premium: ^6.18.1 => 6.18.1 
    @mui/x-data-grid-pro:  6.18.1 
    @mui/x-date-pickers:  6.18.1 
    @mui/x-date-pickers-pro: ^6.18.1 => 6.18.1 
    @types/react: ^16.9.49 => 16.14.5 

Search keywords: atob next nextjs node node14
Order ID: 78418

[Maxastuart]

related: #10056

[DanailH]

Looks like a simple enough fix. @Maxastuart would you be open to creating a PR with the fix? Otherwise we will see to create on next week.

[Maxastuart]

@DanailH I worry the fix I have in mind could also have a lot of side effects for other frameworks/builds others use MUI with (that's hinted at by this already being attempted a few times before). I'd be more comfortable if someone who knows the codebase, userbase, &/or the issue a bit more could take this on.

[romgrk]

It's in my todo list but I'm busy. If you want a workaround without editing our code you can insert this in your global scope:

globalThis.atob = function atob(value) {
  return Buffer.from(value, 'base64').toString('binary');
}