[data grid] Print export does not work in production environments in Chrome.

[KseniaKoms]

The problem in depth

We are encountering an issue with the DataGridPremium component in Chrome where the print window does not appear after clicking the "Print" button in the table toolbar. This issue is observed in production environments but works as expected when deployed on localhost. The print window should be displayed when clicking "Print" in all environments, but currently, it only functions correctly in the localhost environment.

Steps to Reproduce:

1. Set up a DataGridPremium with a toolbar that includes the "Print" option.
2. Open the application in Chrome in a remote environment (e.g., staging or production).
3. Click the "Print" button in the toolbar.
4. Observe that the print window does not appear.

Expected Behavior:
The print window should appear after clicking "Print" in the table toolbar in all environments, including remote ones.

Actual Behavior:
The print window appears only in localhost but does not show up in prod environments.

Environment Details:
Browser: Chrome Version 128.0.6613.138 (Official Build) (arm64)
Localhost: Print window appears
Prod Environments: We are using Vite with esbuild for local setup and opting for Terser in prod setup. Otherwise the environments are identical.

Your environment

`npx @mui/envinfo`

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 21.6.2 - /opt/homebrew/bin/node
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 129.0.6668.59
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.36 
    @mui/core-downloads-tracker:  5.15.10 
    @mui/icons-material: ^5.15.0 => 5.15.10 
    @mui/material: ^5.15.0 => 5.15.10 
    @mui/private-theming:  6.0.2 
    @mui/styled-engine:  6.0.2 
    @mui/system: ^6.0.2 => 6.0.2 
    @mui/types:  7.2.13 
    @mui/utils:  5.15.9 
    @mui/x-data-grid:  7.16.0 
    @mui/x-data-grid-premium: ^7.16.0 => 7.16.0 
    @mui/x-data-grid-pro:  7.16.0 
    @mui/x-date-pickers: ^6.18.4 => 6.19.4 
    @mui/x-internals:  7.16.0 
    @mui/x-license:  7.16.0 
    @types/react: 18.2.48 => 18.2.48 
    react: 18.2.0 => 18.2.0 
    react-dom: 18.2.0 => 18.2.0 
    typescript: 5.0.3 => 5.0.3 

Search keywords: DataGrid Chrome Print
Order ID: 82865

[michelengelen]

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[KseniaKoms]

import * as React from 'react';
import Box from '@mui/material/Box';
import { useDemoData } from '@mui/x-data-grid-generator';
import { DataGrid } from '@mui/x-data-grid';
import {
  DataGridPremium,
  GridToolbarExport,
  GridToolbarContainer,
  useGridApiRef,
} from '@mui/x-data-grid-premium';

export default function Demo() {
  const { data } = useDemoData({
    dataSet: 'Commodity',
    rowLength: 100000,
    editable: true,
  });
  const apiRef = useGridApiRef();
  return (
    <Box sx={{ width: '100%', height: '100%', position: 'relative' }}>
      <DataGridPremium
        {...data}
        apiRef={apiRef}
        loading={data.rows.length === 0}
        slots={{
          toolbar: () => (
            <GridToolbarContainer
              sx={{
                display: 'flex',
                justifyContent: 'space-between',
                borderBottom: '1px solid #e0e0e0',
                padding: '0.521vw',
                paddingLeft: '0.729vw',
              }}
            >
              <GridToolbarExport printOptions={{ hideFooter: true, hideToolbar: true }} />
            </GridToolbarContainer>
          ),
        }}
        rowHeight={38}
        checkboxSelection
      />
    </Box>
  );
}

[arminmeh]

@KseniaKoms
do you see any errors?

[KseniaKoms]

I don`t see any error in template and in localhost but this issue still reproduce in production.

[michelengelen]

which framework are you using? Next? This might prove important to find the cause

[KseniaKoms]

No, I use React.

[arminmeh]

@KseniaKoms
can you please share relevant config files, so that we can match the setup that you have?

[KseniaKoms]

Which config files do you mean? If config for DataGrid table component I provided it in previous comment and the rest part of handlers I cannot share. Or do you mean packages config?

[arminmeh]

@mui/xgrid anyone has any other suggestion?

[thomasdiesenreiter]

we have the same issue here. printing works in safari and firefox, but not in chrome.

[arminmeh]

@thomasdiesenreiter do you have any errors that would help pinpoint the cause?

[thomasdiesenreiter]

@arminmeh I have to get back to my devs for that.

[michelengelen]

@arminmeh I just randomly ran across this issue (or a similar one) myself.
I could print in Firefox, but not in Chrome.
Chrome however prints a warning:

Warning from print export

``` GridPagination.tsx:136 MUI X: The page size `4` is not present in the `pageSizeOptions`. Add it to show the pagination select. at GridPagination (webpack-internal:///../packages/x-data-grid/src/components/GridPagination.tsx:76:99) at div at eval (webpack-internal:///../node_modules/.pnpm/@emotion[email protected]_@types+rea…otion/react/dist/emotion-element-7a1343fa.browser.development.esm.js:70:66) at GridFooterContainer (webpack-internal:///../packages/x-data-grid/src/components/containers/GridFooterContainer.tsx:53:7) at GridFooter (webpack-internal:///../packages/x-data-grid/src/components/GridFooter.tsx:35:99) at GridFooterPlaceholder (webpack-internal:///../packages/x-data-grid/src/components/base/GridFooterPlaceholder.tsx:18:100) at div at eval (webpack-internal:///../node_modules/.pnpm/@emotion[email protected]_@types+rea…otion/react/dist/emotion-element-7a1343fa.browser.development.esm.js:70:66) at GridRoot (webpack-internal:///../packages/x-data-grid/src/components/containers/GridRoot.tsx:48:100) at GridContextProvider (webpack-internal:///../packages/x-data-grid/src/context/GridContextProvider.tsx:22:3) at DataGrid (webpack-internal:///../packages/x-data-grid/src/DataGrid/DataGrid.tsx:46:84) at div at ExportDefaultToolbar (webpack-internal:///./pages/playground/demo.tsx:22:78) at Ye (webpack-internal:///../node_modules/.pnpm/[email protected]_react-do…e_modules/styled-components/dist/styled-components.browser.esm.js:30:16099) at StyledEngineProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.gi…_modules/@mui/monorepo/docs/src/modules/utils/StyledEngineProvider.js:40:5) at CodeVariantProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.gi…t7sa/node_modules/@mui/monorepo/docs/src/modules/utils/codeVariant.js:55:5) at CodeStylingProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.gi…e_modules/@mui/monorepo/docs/src/modules/utils/codeStylingSolution.js:55:5) at CodeCopyProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.gi…de_modules/@mui/monorepo/packages/mui-docs/src/CodeCopy/CodeCopy.tsx:181:3) at TranslationsProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.gi…skt7sa/node_modules/@mui/monorepo/packages/mui-docs/src/i18n/i18n.tsx:35:3) at UserLanguageProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.gi…skt7sa/node_modules/@mui/monorepo/packages/mui-docs/src/i18n/i18n.tsx:76:5) at AdProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.gi…sa/node_modules/@mui/monorepo/packages/mui-docs/src/Ad/AdProvider.tsx:22:5) at DocsProvider (webpack-internal:///../node_modules/.pnpm/@mui+monorepo@https+++codeload.gi…les/@mui/monorepo/packages/mui-docs/src/DocsProvider/DocsProvider.tsx:21:3) at AppWrapper (webpack-internal:///./pages/_app.js:185:5) at MyApp (webpack-internal:///./pages/_app.js:419:5) at PathnameContextProviderAdapter (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@…nsdmgq3gkuvevjge/node_modules/next/dist/shared/lib/router/adapters.js:89:7) at ErrorBoundary (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@…/next/dist/client/components/react-dev-overlay/pages/ErrorBoundary.js:43:5) at ReactDevOverlay (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@…ext/dist/client/components/react-dev-overlay/pages/ReactDevOverlay.js:34:5) at Container (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@…gin_muvr5ye73wnsdmgq3gkuvevjge/node_modules/next/dist/client/index.js:80:1) at AppContainer (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@…in_muvr5ye73wnsdmgq3gkuvevjge/node_modules/next/dist/client/index.js:191:5) at Root (webpack-internal:///../node_modules/.pnpm/[email protected]_@[email protected]_@…in_muvr5ye73wnsdmgq3gkuvevjge/node_modules/next/dist/client/index.js:423:5) ```

I did use the normal playground in dev environment.
Not sure why this happens though. 🤷🏼

The relevant piece of code is here:

mui-x/packages/x-data-grid/src/components/GridPagination.tsx

Lines 131 to 145 in 4bc5acc

	if (
	!warnedOnceMissingInPageSizeOptions.current &&
	!rootProps.autoPageSize &&
	!isPageSizeIncludedInPageSizeOptions(pageSize)
	) {
	console.warn(
	[
	`MUI X: The page size \`${paginationModel.pageSize}\` is not present in the \`pageSizeOptions\`.`,
	`Add it to show the pagination select.`,
	].join('\n'),
	);
	warnedOnceMissingInPageSizeOptions.current = true;
	}
	}

This is also very likely a problem with Chrome and not our component as the last change made to this is 6 months old.

I'll also include a screen recording of it.

Screen.Recording.2024-10-11.at.08.27.47.mov

Hope this helps!

[arminmeh]

thanks @michelengelen, I will take a look

[arminmeh]

this console.warn should not be there at all in prod, since it is wrapped in that condition
Additionally, this only complains about the prop misalignment. Not sure if that would cause any problems.

Can you open console in Firefox and see if you get that warning and still have the print window open?

Also, can you share the demo code you used for the video?
It would be great if I can reproduce the issue on my side.

[michelengelen]

Demo code is from this section: Default Toolbar

The warning also fires in Firefox, so probably not related.
This really gives the impression that there is something we are missing on Chrome side, rather our code ... did they change something recently on the print feature/window?

[michelengelen]

One thing I just noticed (might be related) is that the iframe appears and disappears in an instant in Chrome. Hardly noticable in the video, so i took a screenshot:

[michelengelen]

In Firefox you can see that this is attached to an event called handlePrintWindowLoad

[michelengelen]

handlePrintWindowLoad runs as expected, but then the print gets cancelled for some reason and immediately jumps into the cleanup: handlePrintWindowAfterPrint which removes the iframe again!

[arminmeh]

For me it works fine, so maybe it is related to some chrome/system setting?
I am using Chrome 129.0.6668.101

[michelengelen]

I am on a similar version: 129.0.6668.91
I'll try updating and check if thats the problem!

[arminmeh]

Can you check the differences in Firefox and Chrome at this point
https://github.com/mui/mui-x/blob/v7.19.0/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx#L369

[michelengelen]

Ok, updating to your version helped ... This might be a chrome related bug after all!

[michelengelen]

Can you check the differences in Firefox and Chrome at this point https://github.com/mui/mui-x/blob/v7.19.0/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx#L369

There are no differences ... for some reason Chrome closed the print window and FF kept it open!

[arminmeh]

@KseniaKoms @thomasdiesenreiter
can you check if updating Chrome resolves the issue?

[KseniaKoms]

I've just updated Chrome after your comment, but it didn't help.

[arminmeh]

the problem is that @michelengelen can't reproduce the issue anymore
anyone else from @mui/xgrid can reproduce it?

I am interested if this is the line where it gets wrong
https://github.com/mui/mui-x/blob/v7.19.0/packages/x-data-grid/src/hooks/features/export/useGridPrintExport.tsx#L139

[michelengelen]

I still have the logs from FF:

The only difference with Chrome was, that the 'change' event got fired 3 times. And the value in mql.matches was true, false, true during the 3 calls.

With the updated chrome this fires correctly:

• once for showing the print dialog
• a second time after printing or cancelling

Firefox runs the callback twice as well, without action taken from the user:

Screen.Recording.2024-10-11.at.12.09.09.mov

The bug now appears again for me as well ... although on the new Chrome version. I logged the mql object here as well and noticed that mql.matches is always false, only sometimes it will run as true and thats when the print dialog appears:

This is super weird and not easily reproducible as it sometimes shows on first try, but most of the time it takes like 20-30 clicks

[KseniaKoms]

We also tested on the latest versions our packages but still don't see print window. We used
{ "dependencies": { "@emotion/cache": "^11.13.1", "@emotion/react": "11.11.4", "@emotion/styled": "^11.13.0", "@mui/material": "^6.1.4", "@mui/system": "^6.1.4", "@mui/x-data-grid-premium": "^7.21.0", "react": "^18.2.0", "react-dom": "^18.2.0", "terser": "^5.36.0" }, "devDependencies": { "@types/react": "^18.0.15", "@types/react-dom": "^18.0.6", "@vitejs/plugin-react": "^2.0.0", "typescript": "^4.6.4", "vite": "4.2.3" } }

[cherniavskii]

Can't reproduce it in Chrome on Windows 11:

Screen.Recording.2024-10-29.at.22.41.39.mov

@KseniaKoms Can you reproduce the issue here https://mui.com/x/react-data-grid/export/#default-toolbar?
Also, what is the size of your dataset?

[KseniaKoms]

@cherniavskii I can not reproduce this issue, only in our production environment. We have dynamic dataset, it could be 5 records or 15000 records.

[mtr1990]

Having same problem with Chrome.

Tested on:

• Safari
• Firefox
• Chrome => Sometimes works on Production, sometimes doesn't (Dev mode is always not work)

datagrid.mp4

[arminmeh]

@mtr1990
for you the dev mode is always failing?
can you share the your environment details?

[mtr1990]

The problem appears on the Vite.js version

Next.js still works normally. Sometimes it doesn't work (very rarely).

In addition, Safari and Firefox still work normally. I tested it in an anonymous browser so there will be no conflicts with extensions

node v20.18.1
chrome version 130.0.6723.119 (Official Build) (arm64)

Vite.js version

"vite": "^5.4.11",
"@mui/x-data-grid": "^7.22.2",

Next.js version

"next": "^14.2.18",
"@mui/x-data-grid": "^7.22.2",

X-3.mp4

[mtr1990]

Update!

Just updated Chrome Version 131.0.6778.86 (Official Build) (arm64)

And it works again with Vite.js version.

But I think this is still a potential problem that needs attention.

Because it's the same code, same browser version. Next.js works and Vite.js doesn't

x-4.mp4