mui-x/charts error: SyntaxError: Unexpected token 'export'

Question

I am facing a problem on my @mui-x/charts library. I have a React Typescript project and when I try to plot the StackedBarChart example from https://mui.com/x/react-charts/bar-demo/ , I get this error on my screen:

SyntaxError: Unexpected token 'export'

and when I check the terminal, it shows:

error - /myproject/node_modules/@mui/x-charts/esm/index.js:1
export * from './constants';

My package.json is:

"dependencies": {
        "@emotion/react": "^11.10.0",
        "@emotion/server": "^11.10.0",
        "@emotion/styled": "^11.10.0",
        "@mui/material": "^5.9.3",
        "@mui/system": "^5.14.11",
        "@mui/x-charts": "^6.0.0-alpha.13",
        "canvas": "^2.11.2",
        "next": "12.2.3",
        "next-translate": "^1.5.0",
        "react": "18.2.0",
        "react-dom": "18.2.0",
}

I tried with nodejs 16 and nodejs 18, but no one solves, Does anybody has a clue?

Wrongly

Do you have type: module in package.jsobn – Dogberry

what do you mean? – Wrongly

I have the same issue myself (the error I am getting is on the line "export { BarPlot } from './BarPlot';"), did you find a resolution? I am using from a NextJS project – Scabble

i didnt, i think is related to the alpha project of them.. – Wrongly

Are you using NextJS framework? I had the same issue with the library, but solved it by adding transpilePackages: ['@mui/x-charts'] to my next.config.js file. nextjs.org/docs/architecture/… – Krafftebing

Answer 1

I ran into the same issue. The suggestion by Adrian worked for me. I solved it by adding the below to my next.config.js file and rebuilt

transpilePackages: ['@mui/x-charts']

Reference: https://nextjs.org/docs/architecture/nextjs-compiler#module-transpilation

Microfilm

i am sorry, on my next 12, it didnt work, i got; warn - Invalid next.config.js options detected: "params": { "additionalProperty": "transpilePackages" }, "message": "must NOT have additional properties" – Wrongly

Answer 2

I was getting this error during jest testing only, when leveraging BarChart. I had no luck with transform, ignoreTransforms, or transpile. I am on React 18, Node 18, Typescript 4.6.4, with a customized react-scripts.

I resolved it by updating my setupTests.ts:

jest.mock("@mui/x-charts", () => ({ 
  BarChart: jest.fn().mockImplementation(({ children }) => children)
}));

Embodiment

Answer 3

If you are using Next v12 then this solution worked for me. I am trying to use @mui/x-charts. Which was giving me the export token error.

You need to install this package:

npm install next-transpile-modules

And then, import and use this in your next.config.ts file. Like this:

const withTM = require('next-transpile-modules')(['@mui/x-charts']);
module.exports = withTM({
  reactStrictMode: false,
  publicRuntimeConfig: { ...baseConfig },
});

Quirt