[charts] Dependecy Issue - Possible missing module

[MDugan09er]

The problem in depth

I am relatively new to development and material ui. I haven't had too much issue picking up syntax and app development, but I run into issues when there are library problems and dependency issues. In most cases, I rely on VS Code to provide suggestions of where to look next to solve my problems. In most cases, I have been able to solve them, but this case has been trickier.

I have successfully installed and imported MUI 5.15.6, X-DataGridPro 6.19.2 and X-Charts 7.0.0. I have been using MUI and X-DataGridPro successfully for the last few months but now trying to use X-Charts is throwing an error when the app renders on the page.

"Error: Module parse failed: Unexpected token (81:18)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file."

I only get this issue when trying to load an X-Chart to a page. No issues are caught by the project during build or serve actions with gulp.

As I go through the troubleshooting process, I can trace that the issue resides in the \esm folder of X-Charts. I find errors in each of the components to the charts for any import referencing @babel/runtime, such as lines in BarChart.js,

> var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

all saying

"Could not find a declaration file for module"

VS Code has suggested running npm i --save-dev @types/babel__runtime to support the @bable/runtime dependency, but I receive a 404 error when trying install it with npm to the project.

npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fbabel__runtime - Not found
npm ERR! 404
npm ERR! 404 '@types/babel__runtime@*' is not in this registry.

If @babel/runtime and the corresponding @types are required for x-charts to work, are there any recommended paths to getting this dependency or work around if the package is no longer available through npm?

If further information or items are needed, please let me know. This is my first issue post.

Your environment

`npx @mui/envinfo`

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 18.19.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 117.0.5938.150
    Edge: Chromium (122.0.2365.92)
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.14
    @mui/icons-material: ^5.15.6 => 5.15.6
    @mui/material: ^5.15.6 => 5.15.14
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/styled-engine-sc: ^6.0.0-alpha.13 => 6.0.0-alpha.13
    @mui/styles: ^5.15.6 => 5.15.6
    @mui/system:  5.15.14
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-charts: ^7.0.0 => 7.0.0
    @mui/x-data-grid:  6.19.2
    @mui/x-data-grid-pro: ^6.19.2 => 6.19.2
    @mui/x-date-pickers:  6.19.2
    @mui/x-date-pickers-pro: ^6.19.2 => 6.19.2
    @mui/x-license-pro: ^6.10.2 => 6.10.2
    @mui/x-tree-view: ^6.17.0 => 6.17.0
    @types/react: 17.0.45 => 17.0.45
    react: 17.0.1 => 17.0.1
    react-dom: 17.0.1 => 17.0.1
    styled-components: ^6.1.8 => 6.1.8
    typescript: 4.7.4 => 4.7.4

Search keywords: x-charts, dependency, babel__runtime
Order ID: #83255

[michelengelen]

Hey @MDugan09er ... thanks for raising this.
@alexfauquette did already add this to the board.

[alexfauquette]

I can trace that the issue resides in the \esm folder of X-Charts.

Thanks for your investigation. Looks like a ESM issue. We already got similar issue with NextJS #9826

And having better experience with ESM is larger goal: https://github.com/mui/material-ui/issues?q=is%3Aissue+is%3Aopen+%22%5BESM%5D%22+sort%3Aupdated-desc

@MDugan09er Could you shar more information about your config. The best being to create a repository with a minimal reproduction (create a project with the framework you're using, install the charts, and upload the repository if it's failing) Or at least could you share your package manager, the framework you're using on top of react (info such that we can recreate your env)

If further information or items are needed, please let me know. This is my first issue post.

It's a nice first issue 👍 sorry for the answer delay :)

[MDugan09er]

If I upload a repo with all the data, is there a preferred zipping method (windows, 7zip, etc)?

[alexfauquette]

If I upload a repo with all the data, is there a preferred zipping method (windows, 7zip, etc)?

The easiest is to create a github repository such that we can create branches with multiple version if needed to discuss solutions with the rest of the team

[MDugan09er]

Gotcha. Well, after putting together a test repo and installing the packages again, the charts worked as expected. I played it safe and copied an example straight from the documentation online to see if I got the error. I did not, everything worked as expected.

So then I copied the working chart into my current project, still using the same information, and it worked as well. Tried the same concept with another graph type and it worked as well.

I've played around with my current data and I can get the graphs to render with my data.

In terms of errors, if I go to the Bar Chart or Pie Chart .js files, I still see the same warnings about @babel as I saw before so those don't appear to be the real issue despite the error trail leading to those files.

Since it's now working, my best guess is that the parsing error was related to the data being passed to the chart vs the chart's js files themselves. In the first attempt, I was trying to pass an array of data and was expecting the graph to aggregate the data based on the dataKeys that were being supplied, like PowerBI or Tableau, so it may have disliked the format of that data. If I pass the same data that I was passing before, it still renders but shows nothing so there could have been an update that fixed things, but I'm not sure. My best guess is still the data format.

After reading more of the documentation, it seems like x-charts is just a display piece vs a charting function so the data needs to be structured to go straight into the chart format, like Excel. Although it might have been user-error on my part, I think it would be a good addition to the documentation to include an example aggregating larger datasets prior to putting the data in a chart as well as some strategies to manage performance when doing so to help clarify that point. It would also serve as a nice example and direction for dashboarding with x-charts.

I appreciate your help and patience with my issue!

[alexfauquette]

it seems like x-charts is just a display piece vs a charting function so the data needs to be structured to go straight into the chart format

For me this part is obvious, it's a charting library so it support a given format. Do you remember a specific part of the docs/branding pages that miss lead you and we could fix?

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@MDugan09er: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.