[charts] Error Encountered When Importing MUI X-Charts Components in CommonJS Environment.

[Subhalaxmi-SPM-DealDox]

Steps to reproduce

Import any chart component from @mui/x-charts, e.g., LineChart or BarChart.

Run the application.

Observe the module resolution errors related to @mui/material/styles.

Current behavior

Expected behavior

Chart components from @mui/x-charts (e.g., LineChart, BarChart, etc.) should import and render successfully without any module resolution errors in a project using CommonJS modules with React and Webpack. The package should properly resolve all internal dependencies (like @mui/material/styles) without requiring manual intervention or ESM-specific configurations.

Context

Node Version i am using v20.18.1

I’m building a React application using Webpack and CommonJS modules (not ESM). I integrated @mui/x-charts to visualize data, and it previously worked without issues. However, after recent package updates (possibly related to @mui/x-charts or MUI core), importing chart components now fails. I'm looking to retain CommonJS compatibility in this project without migrating everything to ESM.

Your environment

npx @mui/envinfo

Google Chrome

System:
OS: Microsoft Windows 11 Pro 10.0.26100
Binaries:
Node: 20.18.1 - /usr/local/opt/node@20/bin/node
npm: 10.8.2 - /usr/local/opt/node@20/bin/npm
pnpm: Not Found
Browsers:
Chrome: 135.0.7049.96
Edge: Not Found
Safari: 18.0.1
npmPackages:
@emotion/react: ^11.14.0 => 11.14.0
@emotion/styled: ^11.14.0 => 11.14.0
@mui/core-downloads-tracker: 6.4.11
@mui/icons-material: ^6.3.0 => 6.4.4
@mui/material: ^6.4.11 => 6.4.11
@mui/private-theming: 6.4.9
@mui/styled-engine: 6.4.11
@mui/system: 6.4.11
@mui/types: 7.4.1
@mui/utils: 6.4.9
@mui/x-charts: ^8.0.0-beta.3 => 8.0.0-beta.3
@mui/x-charts-vendor: 8.0.0-beta.3
@mui/x-data-grid: 7.26.0
@mui/x-data-grid-premium: ^7.22.3 => 7.26.0
@mui/x-data-grid-pro: 7.26.0
@mui/x-date-pickers: 7.26.0
@mui/x-date-pickers-pro: ^7.23.3 => 7.26.0
@mui/x-internals: 7.26.0
@mui/x-license: 7.26.0
@types/react: 19.0.8
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
styled-components: 6.1.15
typescript: 4.9.5

Search keywords: MUI X-Charts import error, @mui/material/styles not resolved, esm module resolution error, CommonJS compatibility, MUI webpack error, ChartsWrapper.js can't resolve, consumeThemeProps.js error, @mui/x-charts esm issue, breaking change fully specified module, MUI ESM vs CJS issue

[bernardobelchior]

Hey, @Subhalaxmi-SPM-DealDox! Thanks for your report. Do you have a reproduction using CodeSandbox or StackBlitz? It would help us investigate the issue faster. I'll take a look nevertheless.

Using Material UI v6 with MUI X v8 might require some changes (docs). Have you followed these?

[Subhalaxmi-SPM-DealDox]

Hey, @Subhalaxmi-SPM-DealDox! Thanks for your report. Do you have a reproduction using CodeSandbox or StackBlitz? It would help us investigate the issue faster. I'll take a look nevertheless.

Using Material UI v6 with MUI X v8 might require some changes (docs). Have you followed these?

Hi @bernardobelchior
I've tried reproducing the issue in CodeSandbox and StackBlitz, but since they default to using Vite-based React setups, the problem doesn’t occur there. My actual project is built using Create React App (CRA) with Webpack and CommonJS modules, which seems to be the root of the compatibility issue.

I’ve already attached the related error logs in the original ticket, but since this issue doesn’t show up in Vite environments, is there a way I can share a zip file or GitHub repo of the CRA project for a more accurate reproduction?

Thanks again for looking into this!

[michelengelen]

I’ve already attached the related error logs in the original ticket, but since this issue doesn’t show up in Vite environments, is there a way I can share a zip file or GitHub repo of the CRA project for a more accurate reproduction?

Hey @Subhalaxmi-SPM-DealDox a github repo with a minimal reproduction would be nice. 👍🏼