[license] cannot be installed in my project

[tomermaz]

The problem in depth

Hello, im using react with babel and webpack , im a pro user

but when im installing @mui/x-license library (already tried every version above 7.0.0)

this is the error i get

ERROR in ./node_modules/@mui/x-license/useLicenseVerifier/useLicenseVerifier.js 14:35
Module parse failed: Unexpected token (14:35)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   } = React.useContext(MuiLicenseInfoContext);
|   return React.useMemo(() => {
>     const licenseKey = contextKey ?? LicenseInfo.getLicenseKey();
| 
|     // Cache the response to not trigger the error twice.
 @ ./node_modules/@mui/x-license/useLicenseVerifier/index.js 1:0-58 1:0-58
 @ ./node_modules/@mui/x-license/index.js
 @ ./src/components/therapist/therapistApp2.js
 @ ./src/components/therapist/main.js
 @ multi react-hot-loader/patch @babel/polyfill/noConflict ./src/assets/js/global-config.js ./src/assets/js/scripts.js ./src/assets/js/jwplayer.js ./src/assets/js/freshdesk.js ./src/assets/js/vtFacebookAnalytics.js ./src/components/therapist/main.js

i know we are using in our react app very old versions of webpack and babel

Your environment

`npx @mui/envinfo`

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

Search keywords: babel, web Order ID: 94836

[michelengelen]

Hey @tomermaz this is due to the compiler not being able to compile the ?? operator. Are you on webpack 4 by any chance? We did drop support for that (migration doc section)

[tomermaz]

Hey @michelengelen, i have tried to follow doc result:

[LukasTy]

@tomermaz what version is your @babel/preset-env dependency at? It would be ideal if you could provide a minimal reproduction example, for example: a small repo with your dependency versions and babel/Webpack setup. It would help a lot in understanding the root cause. 🙏

[tomermaz]

Hey @LukasTy, thanx for your quick response

this is part of my package.json :

"dependencies": {
    "@babel/polyfill": "^7.12.1",
    "@emotion/react": "^11.10.6",
    "@emotion/styled": "^11.10.6",
    "@material-ui/core": "^4.12.4",
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.15.6",
    "@mui/styles": "^5.11.2",
    "@mui/x-data-grid": "^6.20.4",
    "@mui/x-data-grid-pro": "^7.11.0",
    "@mui/x-date-pickers": "^6.19.6",
    "@mui/x-license": "^7.0.0",
    "axios": "^0.27.2",
    "create-react-class": "^15.7.0",
    "es6-promise": "^4.0.5",
    "firebase": "^9.6.10",
    "flux": "^2.1.1",
    "formik": "^2.4.5",
    "formsy-react": "^1.1.4",
    "fuse.js": "^6.6.2",
    "history": "^4.9.0",
    "jquery": "^3.6.0",
    "json-loader": "^0.5.7",
    "keymirror": "^0.1.1",
    "libphonenumber-js": "^1.10.58",
    "lodash": "^4.17.21",
    "material-ui": "^0.20.2",
    "mobile-detect": "^1.3.3",
    "moment": "^2.11.2",
    "moment-timezone": "^0.5.5",
    "moment-weekday-calc": "^1.1.4",
    "object-assign": "^4.0.1",
    "prop-types": "^15.7.2",
    "pusher-js": "^3.2.1",
    "react": "^17.0.2",
    "react-addons-css-transition-group": "^15.6.2",
    "react-autocomplete": "^1.7.2",
    "react-beautiful-dnd": "^13.0.0",
    "react-date-picker": "^6.5.0",
    "react-datepicker": "^0.60.2",
    "react-dom": "^17.0.2",
    "react-dotdotdot": "^1.0.17",
    "react-dropzone-component": "^3.2.0",
    "react-hook-form": "^7.51.0",
    "react-hot-loader": "^4.3.12",
    "react-input-range": "^1.3.0",
    "react-intl-tel-input": "^8.0.4",
    "react-loader-advanced": "^1.7.1",
    "react-modal": "^3.8.1",
    "react-phone-input-2": "^2.14.0",
    "react-phone-number-input": "^3.3.12",
    "react-product-fruits": "^2.1.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^5.0.0",
    "react-spinkit": "^3.0.0",
    "react-telephone-input": "^4.73.4",
    "react-toastr": "^2.8.2",
    "react-toggle-display": "^2.2.0",
    "react-tooltip": "^3.1.3",
    "recharts": "^1.0.0-beta.6",
    "redux": "^3.7.2",
    "redux-axios-middleware": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "toastr": "^2.1.2",
    "url-search-params-polyfill": "^5.0.0",
    "validator": "^9.4.1",
    "yup": "^0.28.5",
    "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@babel/plugin-proposal-decorators": "^7.4.4",
    "@babel/plugin-proposal-export-namespace-from": "^7.5.2",
    "@babel/plugin-proposal-json-strings": "7.2.0",
    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/plugin-syntax-import-meta": "7.2.0",
    "@babel/plugin-transform-react-constant-elements": "^7.2.0",
    "@babel/plugin-transform-react-inline-elements": "^7.2.0",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "autoprefixer": "^9.1.2",
    "babel-loader": "^8.0.0-beta.3",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
    "babel-plugin-transform-remove-console": "^6.9.4",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "6.4",
    "css-loader": "^2.1.1",
    "dotenv-webpack": "^1.5.7",
    "eslint": "^8.9.0",
    "eslint-plugin-react": "^7.28.0",
    "expose-loader": "^0.7.5",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "prettier": "^1.16.4",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.22.1",
    "svg-sprite-loader": "^3.8.0",
    "terser-webpack-plugin": "^1.2.3",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }

[LukasTy]

@tomermaz I can see that your version of @babel/preset-env is pretty ancient. 🤔

What is the resolved/installed version as per node_modules or lock file? I hope you understand, that without a minimal reproduction example it is hard and very time consuming to debug such setup problems. 🙈

A few other notes:

1. I see that you have mixed versions of @mui/x-data-grid and @mui/x-data-grid-pro. Is that necessary for something? Isn't it causing problems? 🤔
2. I see that you have both @material-ui/core and @mui/material in your dependencies. Is part of your app still using @material-ui/core?
3. Most of your setup/infra dependencies are quite significantly outdated. I hope you understand that it is not our responsibility to ensure support with versions of dependencies that we have explicitly deprecated. 🙏

[github-actions[bot]]

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