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?

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