I’m migrating this monorepo app from React 16 to React 17 and also MUI 4 to MUI 5. Everything is working just fine, but I just hit a wall when trying to use the MUI 5 date picker. I’m getting this error:
../node_modules/@mui/x-date-pickers/LocalizationProvider/LocalizationProvider.js 36:50
Module parse failed: Unexpected token (36:50)
File was processed with these loaders:
* ../../node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| utils: parentUtils,
| localeText: parentLocaleText
> } = React.useContext(MuiPickersAdapterContext) ?? {
| utils: undefined,
| localeText: undefined
and this is my package.json
{
"name": "miret-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",
"storybook:build": "npm run build",
"storybook:watch": "babel src --out-dir lib --extensions ".ts,.js,.tsx" --watch --source-maps both --copy-files",
"storybook:web": "start-storybook -s ./src/stories/static -p 6006",
"jenkins-build": "npm run build",
"jenkins-tsc": "tsc --noEmit --skipLibCheck",
"jenkins-tslint": "tslint -c tslint.json --project tsconfig.json 'src/**/*.ts*'",
"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/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",
"@ret/retde-icons": "^1.7.0",
"@ret/retde-iconsv2": "^1.6.5",
"@ret/retde-iconsv3": "^5.1.0",
"@ret/rivr-core": "2.0.42",
"@ret/rivr-recorder": "2.0.42",
"@ret/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",
"miret-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"
}
}
I’ve tried everything I’ve found, including updating Babel to the newest version and TypeScript, but I still encounter the same problem. Then I noticed it could be due to webpack:
├─ [email protected]
│ └─ [email protected]
└─ [email protected]
✨ Done in 0.65s.
I updated react-scripts from version 3 to 5, but then I get a bunch of errors from node_modules about some imports not existing.
It seems this app is using react-app-rewired. Here’s the config-overrides.js:
module.exports = function override(webpackConfig) {
webpackConfig.module.rules.push({
test: /.mjs$/,
include: /node_modules/,
type: 'javascript/auto',
});
return webpackConfig;
};
and this is my .babelrc
{
"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",
["module-resolver", {
"alias": {
"ux": "./src/ux",
"components": "./src/components",
"pages": "./src/pages"
}
}]
],
"ignore": [
"src/static/pdfjs-2.0.943-dist"
]
}
I tried adding all the Babel plugins, like @babel/plugin-transform-nullish-coalescing-operator, but to no avail. Any ideas to try would be welcome. Thanks!