[data grid] Export to Excel isn't working

[chezkibotwinick]

The problem in depth

Hi,

I am experiencing an issue with the DataGridPremium component when attempting to export as Excel. While everything works as expected in my local environment, I encounter the following error in different environments:

It seems that the component is trying to fetch data from the local environment for some reason. I came across a previous issue opened on this page, but it did not provide any steps for resolving the issue.

This error occurs both by using the GridExcelExportMenuItem and by using the getDataAsExcel api.

I have tried different versions, including the latest, but the error persists.
I would greatly appreciate your assistance in resolving this issue.

Thanks

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Export to Excel
Order ID: 85670

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @chezkibotwinick?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[chezkibotwinick]

Hey, I accidentally closed this and it is still an issue.
Can I please get assistance here?
Thanks.

[michelengelen]

Hey @cherniavskii could you have a look at this?

In the meantime could you provide us with a little more info on your setup and implementation @chezkibotwinick ? Also did you try manually installing exceljs as suggested here?

[chezkibotwinick]

Hey @michelengelen.

• I tried manually installing exceljs (version: "^4.4.0") and still same error.
• These are the mui dependencies I am using:
  • "@mui/material": "^5.13.0",
  • "@mui/system": "^5.12.3",
  • "@mui/x-data-grid": "^6.4.0",
  • "@mui/x-data-grid-premium": "^6.4.0"

Both following implementation result in same error as I shared above:
Regular:

    <GridToolbarExportContainer>
      <GridExcelExportMenuItem />
      <GridPrintExportMenuItem />
    </GridToolbarExportContainer>

Using custom method:

  const exportAsExcel = async () => {
    const workbook = await apiRef?.current?.getDataAsExcel();
    ...
  };

  <GridToolbarExportContainer>
    <MenuItem onClick={exportAsExcel}>Download as Excel</MenuItem>
    <GridExcelExportMenuItem />
    <GridPrintExportMenuItem />
  </GridToolbarExportContainer>

[michelengelen]

• I tried manually installing exceljs (version: "^4.4.0") and still same error.

• These are the mui dependencies I am using:

  • "@mui/material": "^5.13.0",
  • "@mui/system": "^5.12.3",
  • "@mui/x-data-grid": "^6.4.0",
  • "@mui/x-data-grid-premium": "^6.4.0"

Hey @chezkibotwinick ... we will have a look. But first: Why are you using x-data-grid AND x-data-grid-premium? And are you using both on the same page? Could you try removing the x-data-grid package and only use the premium one to see if thats the cause of the error?

Also could you maybe provide some more info on your setup? e.g. if you are using plain React, or Vite/Next, etc.

In the meantime I will test it myself.
thanks in advance 🙇🏼

[chezkibotwinick]

@michelengelen thanks for looking into it and for your support :)

I removed x-data-grid but the same error still occurs.

Re setup - I am using React "^18.0.14".

[michelengelen]

I am not able to reproduce this issue.
The setup I was using:

  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.15.12",
    "@mui/system": "^5.12.3",
    "@mui/x-data-grid-premium": "^6.4.0",
    "next": "14.1.3",
    "react": "^18",
    "react-dom": "^18"
  },

Ran a production build locally and I can export without a problem from it.
@cherniavskii maybe that helps for a further investigation.

BTW: @chezkibotwinick could you post the full stacktrace for the error you got from exporting? I am a bit baffled that it states that it occurs in bootstrap:126 ... are you using bootstrap by any chance?

[cherniavskii]

Hi @chezkibotwinick
What bundler do you use?

The issue could be related to the usage of dynamic import:

mui-x/packages/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts

Lines 26 to 27 in 848f2a1

	const getExcelJs = async () => {
	const excelJsModule = await import('exceljs');

But I need a reproduction example to be able to investigate.

[cherniavskii]

@michelengelen

Ran a production build locally and I can export without a problem from it.

Yeah, it works fine with next: https://mui.com/x/react-data-grid/export/#excel-export

[chezkibotwinick]

@michelengelen I am not using bootstrap in my project.

@cherniavskii I am using webpack.

Thank you!

[chezkibotwinick]

@michelengelen this is the trace:

[michelengelen]

But I need a reproduction example to be able to investigate.

Could you maybe create a sample repo that uses webpack with a minimal reproduction example for us? That would help us a lot. In the meantime I will try and setup a project with webpack myself

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.