search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
3.82k stars 1.14k forks source link

[pickers] Babel failed to compile #12898

Closed gitramro closed 2 weeks ago

gitramro commented 3 weeks ago

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:

image

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 commented 3 weeks ago

@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 commented 3 weeks ago

@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. 🙈 Screenshot 2024-04-25 at 12 57 29

github-actions[bot] commented 2 weeks ago

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