Unable to use the the mui/x-chart after install

[Vicky-Feng]

Steps to reproduce

Link to live example: (required)

Steps:

1. npm install @mui/x-charts
2. import { BarChart } from '@mui/x-charts/BarChart';

Current behavior

The install with "npm install @mui/x-charts" has no problem.
But when I try to use [BarChart]
import { BarChart } from '@mui/x-charts/BarChart';
it gets the error:

(6:5) start value has mixed support, consider using flex-start instead
Failed to compile.                                                           
                                                                             
./node_modules/@react-spring/core/dist/react-spring_core.legacy-esm.js 106:11
Module parse failed: Unexpected token (106:11)                               
File was processed with these loaders:                                       
 * ./node_modules/babel-loader/lib/index.js                                  
You may need an additional loader to handle the result of these loaders.     
| }                                                                          
| function detachRefs(ctrl, ref) {                                           
>   ctrl.ref?.delete(ctrl);                                                  
|   ref?.delete(ctrl);                                                       
| }

My package.json looks like:

{
  "name": "application",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@date-io/date-fns": "^1.3.13",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@mui/icons-material": "^5.10.9",
    "@mui/x-charts": "^6.19.5",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "immutability-helper": "^3.1.1",
    "material-ui-dropzone": "^3.5.0",
    "print-js": "^1.2.0",
    "react": "^17.0.0",
    "react-circular-progressbar": "^2.0.3",
    "react-dnd": "^11.1.3",
    "react-dnd-html5-backend": "^11.1.3",
    "react-dom": "^17.0.0",
    "react-pdf": "^5.0.0",
    "react-qr-code": "^2.0.2",
    "react-router-dom": "^5.2.0",
    "react-script-tag": "^1.1.2",
    "react-scripts": "^3.4.3",
    "react-to-print": "^2.14.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "make-pretty-jsx": "prettier --write \"**/*.{css,js,json,jsx,md}\" \"!package*.json\" \"!build/**/*\" \"!dist/**/*\"",
    "make-pretty-css": "prettier-stylelint --write \"**/*.css\" \"!package*.json\"",
    "make-everything-pretty": "npm run make-pretty-jsx",
    "lint-everything": "lerna run --concurrency 1 --stream lint:quiet",
    "lint-everything:fix": "lerna run --concurrency 1 --stream lint:fix",
    "precommit": "lint-staged"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "lint-staged": {
    "linters": {
      "*.{js,jsx}": [
        "prettier --write",
        "eslint --quiet",
        "git add"
      ],
      "*.{json,md}": [
        "prettier --write",
        "git add"
      ],
      "*.css": [
        "prettier-stylelint --write",
        "stylelint",
        "git add"
      ]
    },
    "ignore": [
      "**/flow-typed/**/*",
      "**/build/**/*",
      "package*.json",
      "README.md"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "lerna run --concurrency 1 --stream precommit"
    }
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.12.1",
    "@babel/plugin-proposal-optional-chaining": "^7.12.1",
    "@babel/plugin-transform-react-constant-elements": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.1",
    "@material-ui/core": "^4.9.9",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.56",
    "@material-ui/pickers": "^3.2.10",
    "@mui/material": "^5.9.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "@react-pdf/renderer": "^1.6.11",
    "babel-eslint": "^10.1.0",
    "babel-plugin-hoist-facc": "^0.2.3",
    "babel-plugin-minify-constant-folding": "^0.5.0",
    "babel-plugin-react-css-modules": "^5.2.6",
    "babel-preset-react-app": "^10.0.0",
    "bootstrap": "^4.4.1",
    "bson-objectid": "^1.3.1",
    "copy-to-clipboard": "^3.3.1",
    "cross-env": "^7.0.2",
    "css-loader": "^5.0.1",
    "env-cmd": "^10.1.0",
    "eslint": "^6.6.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-config-react-app": "^6.0.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-unicorn": "^23.0.0",
    "husky": "^4.2.5",
    "lerna": "^3.22.1",
    "lint-staged": "^10.2.2",
    "material-ui": "^0.20.2",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "password-generator": "^2.3.2",
    "postcss": "^8.1.7",
    "postcss-load": "^0.1.6",
    "postcss-loader": "^4.0.4",
    "postcss-modules-values": "^4.0.0",
    "prettier": "^2.0.5",
    "prettier-stylelint": "^0.4.2",
    "prop-types": "^15.7.2",
    "react-datepicker": "^3.2.2",
    "react-material-ui-datatable": "^2.0.0-alpha.30",
    "react-redux": "^7.2.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "redux": "^4.0.5",
    "redux-devtools": "^3.5.0",
    "redux-persist": "^6.0.0",
    "redux-saga": "^1.1.3",
    "reselect": "^4.0.0",
    "sockjs-client": "^1.4.0",
    "stompjs": "^2.3.3",
    "stylelint": "^13.7.2",
    "stylelint-config-css-modules": "^2.2.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-prettier": "^1.1.2",
    "uuid": "^7.0.3"
  }
}

Expected behavior

According to the documentation, this one should work.

Does any one know what cause this issue and how to resolve it?

Thank you so much!

Context

No response

Your environment

npx @mui/envinfo

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

Search keywords: dependencies

Search keywords:

[alexfauquette]

I tried by running the following command in a stackblitz project

npm install @mui/x-charts @mui/material @emotion/react @emotion/styled

https://stackblitz.com/edit/vitejs-vite-p9ng21?file=src%2FApp.tsx

Without a reproduction of the issue, we could not help you

[github-actions]

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

[rhy2781]

https://stackoverflow.com/questions/78189728/unable-to-use-the-the-mui-x-chart-after-install/78416094#78416094