I have a DataGrid with a custom toolbar to set <GridToolbarExport printOptions={{ hideFooter: true }} />. However, when I attempt to print, I receive the error:

TypeError: gridFooterElement is null

The same happens if I set hideFooter as a DataGrid prop. The call stack for the error has the following:

useGridPrintExport/handlePrintWindowLoad<
    node_modules/@mui/x-data-grid/hooks/features/export/useGridPrintExport.js (127:1)

useGridPrintExport/exportDataAsPrint</printWindow.onload
    node_modules/@mui/x-data-grid/hooks/features/export/useGridPrintExport.js (256:1)

The source code says gridFooterElement can be null, but then has non-null assertions immediately after.

What could possibly be causing this? I’ve tried to recreate it in a sandbox, and it works every time, so it is only in my project. Here is an example of what doesn’t work for me:

'use client';
import { Box } from "@mui/material";
import { DataGrid, GridColDef, GridRowsProp, GridToolbarContainer, GridToolbarExport } from "@mui/x-data-grid";


export default function Page() {
    const columns: GridColDef[] = [
        {
            field: 'col1',
            headerName: 'Column 1',
            flex: 1
        },
        {
            field: 'col2',
            headerName: 'Column 2',
            flex: 1
        }
    ]

    const rows: GridRowsProp = [
        { id: '1', col1: 'Test A', col2: 'Test B' }
    ]

    const CustomToolbar = () => (
        <GridToolbarContainer>
            <Box sx={{ flexGrow: 1 }} />
            <GridToolbarExport slotProps={{ button: { variant: 'outlined' } }} printOptions={{ hideFooter: true, hideToolbar: true }} />
        </GridToolbarContainer>
    )
    
    return(
        <Box sx={{
            height: 550
        }}>
            <DataGrid autoPageSize
                columns={columns} rows={rows}
                slots={{ toolbar: CustomToolbar }}
            />
        </Box>
    )
}