[pickers] Babel failed to compile

[gitramro]

Steps to reproduce

Link to live example: (required)

Steps:
1.
2.
3.

Current behavior

I'm migrating from material ui core to muiv5, but im getting an issue with one of the date pickers of muix, Im getting a compile error:

Ive checked my .babelrc file and I added the missing plugin (@babel/plugin-transform-nullish-coalescing-operator) but still its not working

{
  "presets": [
    ["@babel/preset-env", {"modules": false}],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }], 
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-proposal-export-default-from",
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-transform-nullish-coalescing-operator",
    ["module-resolver", {
      "alias": {
        "ux": "./src/ux",
        "components": "./src/components",
        "pages": "./src/pages"
      }
    }]
  ],
  "ignore": [
    "src/static/pdfjs-2.0.943-dist"
  ]
}

this is my package.json

{
  "name": "mieog-ui",
  "version": "1.0.0",
  "description": "",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src --delete-dir-on-start --out-dir lib --extensions \".ts,.js,.tsx\" --source-maps both --copy-files --ignore \"src/static/pdfjs-2.0.943-dist\" ",
    "start": "babel src --out-dir lib --extensions \".ts,.js,.tsx\" --watch --source-maps both --copy-files",
    "test-watch": "yarn run build & jest --watch",
    "build-storybook": "build-storybook",
    "tsc": "tsc",
    "deploy-storybook": "storybook-to-ghpages",
    "scss": "node-sass --watch src/ux/CalendarPage/BigCalendar/sass -o src/ux/CalendarPage/BigCalendar/css"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.0.0-0",
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-proposal-class-properties": "^7.0.0-0",
    "@babel/plugin-proposal-decorators": "^7.1.0",
    "@babel/plugin-proposal-export-default-from": "^7.0.0",
    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.1",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0-0",
    "@babel/preset-typescript": "^7.7.7",
    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-knobs": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addon-options": "^5.0.11",
    "@storybook/addon-viewport": "^5.0.11",
    "@storybook/react": "^5.0.11",
    "@storybook/storybook-deployer": "^2.8.1",
    "@storybook/theming": "^5.0.11",
    "@types/classnames": "^2.2.6",
    "@types/d3": "^5.0.1",
    "@types/d3-color": "^1.2.1",
    "@types/invariant": "^2.2.29",
    "@types/jest": "^23.3.2",
    "@types/lodash-es": "^4.17.1",
    "@types/mousetrap": "^1.6.0",
    "@types/react-beautiful-dnd": "^12.1.2",
    "@types/react-big-calendar": "^0.36.1",
    "@types/react-helmet": "^6.1.5",
    "@types/react-resize-detector": "^3.1.0",
    "@types/react-router-dom": "^5.1.7",
    "@types/react-transition-group": "^4.2.3",
    "@types/recharts": "^1.1.1",
    "@types/recompose": "^0.30.2",
    "@types/storybook-readme": "^4.0.0",
    "@types/storybook__addon-actions": "^3.4.1",
    "@types/storybook__addon-knobs": "^3.4.1",
    "@types/storybook__addon-links": "^3.3.2",
    "@types/storybook__react": "^3.0.9",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-module-resolver": "^4.1.0",
    "css-loader": "^2.0.0",
    "file-loader": "^2.0.0",
    "jest": "^23.6.0",
    "prettier": "^1.19.1",
    "storybook-readme": "^4.0.2",
    "style-loader": "^0.23.1",
    "tslint": "^5.11.0",
    "tslint-config-airbnb": "^5.11.0",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.0.1",
    "tslint-react": "^3.6.0",
    "typescript": "^3.7.4"
  },
  "dependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
    "@babel/preset-typescript": "^7.7.7",
    "@babel/runtime": "^7.2.0",
    "@date-io/moment": "^1.3.5",
    "@devexpress/dx-react-core": "^4.0.8",
    "@devexpress/dx-react-grid": "^4.0.8",
    "@devexpress/dx-react-grid-material-ui": "^4.0.8",
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@eog/geode-icons": "^1.7.0",
    "@eog/geode-iconsv2": "^1.6.5",
    "@eog/geode-iconsv3": "^5.1.0",
    "@eog/rivr-core": "2.0.42",
    "@eog/rivr-recorder": "2.0.42",
    "@eog/screenshot": "^1.0.0-beta.4",
    "@material-ui/core": "^4.9.11",
    "@material-ui/icons": "^4.9.1",
    "@material-ui/lab": "^4.0.0-alpha.60",
    "@material-ui/pickers": "^3.3.10",
    "@material-ui/styles": "^4.9.14",
    "@mui/icons-material": "^5.15.15",
    "@mui/lab": "^5.0.0-alpha.170",
    "@mui/material": "^5.15.15",
    "@mui/styles": "^5.15.15",
    "@mui/x-date-pickers": "^7.2.0",
    "@types/babel__core": "^7.1.3",
    "@types/babel__template": "^7.0.2",
    "@types/react-infinite-scroller": "^1.2.1",
    "@types/react-virtualized-auto-sizer": "^1.0.0",
    "@types/react-window": "^1.8.2",
    "@types/react-window-infinite-loader": "^1.0.3",
    "@u-wave/react-vimeo": "^0.8.3",
    "apexcharts": "^3.28.1",
    "autosuggest-highlight": "^3.1.1",
    "bricks.js": "^1.8.0",
    "classnames": "^2.2.6",
    "cloudinary-react": "^1.1.0",
    "crypto-js": "^4.1.1",
    "csvtojson": "^2.0.8",
    "d3": "^5.7.0",
    "d3-array": "^2.0.2",
    "d3-color": "^1.2.3",
    "date-fns": "^1.30.1",
    "dompurify": "^1.0.9",
    "html2pdf.js": "^0.10.1",
    "invariant": "^2.2.4",
    "is-url-external": "^1.0.3",
    "lodash": "^4.17.11",
    "material-ui-dropzone": "^3.5.0",
    "mieog-core": "^1.0.0",
    "moment": "^2.24.0",
    "mousetrap": "^1.6.2",
    "node-sass": "^8.0.0",
    "number-to-words": "^1.2.4",
    "plotly.js": "^1.54.0",
    "react": "^17.0.2",
    "react-apexcharts": "^1.3.9",
    "react-autosuggest": "^9.4.3",
    "react-beautiful-dnd": "^13.0.0",
    "react-big-calendar": "^0.22.1",
    "react-calendar": "^2.19.1",
    "react-day-picker": "^7.3.2",
    "react-dom": "^17.0.2",
    "react-helmet": "^5.2.0",
    "react-hexagon": "^1.1.3",
    "react-infinite-scroller": "^1.2.4",
    "react-items-carousel": "^2.8.0",
    "react-lazy-load": "^3.0.13",
    "react-markdown": "^4.2.2",
    "react-masonry-component": "^6.2.1",
    "react-multi-carousel": "^2.5.5",
    "react-papaparse": "^3.11.0",
    "react-pdf": "^4.1.0",
    "react-plotlyjs": "^0.4.4",
    "react-resize-detector": "^6.6.3",
    "react-router-dom": "^5.1.2",
    "react-scroll": "^1.7.10",
    "react-sizeme": "^2.5.2",
    "react-slick": "^0.23.2",
    "react-spinners": "^0.4.8",
    "react-step-progress-bar": "^1.0.3",
    "react-text-mask": "^5.4.3",
    "react-to-print": "^2.0.0-alpha-6",
    "react-transition-group": "^4.3.0",
    "react-virtualized": "^9.21.2",
    "react-virtualized-auto-sizer": "^1.0.2",
    "react-visibility-sensor": "^5.1.1",
    "react-window": "^1.8.5",
    "react-window-infinite-loader": "^1.0.5",
    "recharts": "^1.4.0",
    "recompose": "^0.30.0",
    "recyclerlistview": "^1.3.4",
    "reflect-metadata": "^0.1.12",
    "remark-breaks": "^1.0.3",
    "reselect": "^4.0.0",
    "slick-carousel": "^1.8.1",
    "typescript": "^3.7.4",
    "vh-check": "^2.0.5",
    "video-react": "^0.13.6"
  }
}

this is what im trying to run with no luck

import React from 'react';
import { withProps } from '../../ux/Props/withProps';
import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '@mui/x-date-pickers/DatePicker';

const Home = (props: any) => {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={['DatePicker']}>
        <DatePicker />
      </DemoContainer>
    </LocalizationProvider>
  );
};

export default withProps('HomeProps')(React.memo(Home));

however, using the old one this way, it works

import React from 'react';
import { withProps } from '../../ux/Props/withProps';
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker,
} from '@material-ui/pickers';
import DateFnsUtils from '@date-io/date-fns';


const Home = (props: any) => {
  const [selectedDate, setSelectedDate] = React.useState<Date | null>(
    new Date('2014-08-18T21:11:54'),
  );

  const handleDateChange = (date: Date | null) => {
    setSelectedDate(date);
  };

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
        <KeyboardDatePicker
          disableToolbar
          variant="inline"
          format="MM/dd/yyyy"
          margin="normal"
          id="date-picker-inline"
          value={selectedDate}
          onChange={handleDateChange}
          label="Date picker inline"
          KeyboardButtonProps={{
            'aria-label': 'change date',
          }}
        />
        </MuiPickersUtilsProvider>
  );
};

export default withProps('HomeProps')(React.memo(Home));

Am I missing another plugin or some misconfiguration of Babel, maybe there is a version issue?

Expected behavior

No response

Context

Migrate material ui v4 to muiv5

Your environment

npx @mui/envinfo

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

Search keywords: babel date pickers

[michelengelen]

@LukasTy seems like a babel configuration issue.

@gitramro where does your file sit in your folders? Does it properly get picked up by babel?

[LukasTy]

@michelengelen Yes, it indeed must be a problem with babel/webpack.
@gitramro Are you using webpack? If yes, then could you check this preview documentation section (it is not released yet)?
If not, try upgrading babel configuration first as it seems "slightly" old. 🙈

[github-actions]

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