Pickers | LocalizationProvider | Cannot use AdapterDayjs with Luxon

Question

Pickers | LocalizationProvider | Cannot use AdapterDayjs with Luxon

jtaylor3rd opened this issue 2 years ago · 2 comments

I'm pretty sure I what I'm trying to do is not allowed, but wanted to get confirmation from the source.

I'm currently using "@mui/x-date-pickers": "^5.0.0-alpha.5", with Luxon as my date library and everything works, however I don't like how luxon abides by the ISO standard of the first day of the week for en-US being Monday. I discovered that using AdapterDayjs gives me the intended first day of the week, so I want to use that as the adapter for the LocalizationProvider that wraps the DatePicker. Problem is, when I attempt to build the project, I get the following errors:

node_modules/@date-io/dayjs/type/index.d.ts(4,15): error TS2300: Duplicate identifier 'DateType'. 
node_modules/@date-io/luxon/type/index.d.ts(4,15): error TS2300: Duplicate identifier 'DateType'.

What I think this tells me is that I cannot use 2 different date libraries. Is this correct? If it is possible to use 2 different date libraries, can you help me figure out how to do so?

The reason I want to use 2 date libs is that replacing luxon with dayjs will require refactoring other parts of the code that is beyond the scope of the ticket I'm working on, so I would like to avoid making unnecessary changes.

here is my package.json for reference:

{
  "name": "",
  "version": "",
  "description": "",
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "types": "dist/types/index.d.ts",
  "fonts": "dist/fonts/index.d.ts",
  "sideEffects": false,
  "author": "",
  "license": "Unlicense",
  "peerDependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.9.2",
    "@emotion/cache": "^11.9.3",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^11.3.0",
    "@fontsource/material-icons": "^4.5.4",
    "@fontsource/material-icons-outlined": "^4.5.4",
    "@formatjs/ecma402-abstract": "^1.11.8",
    "@formatjs/intl-numberformat": "^8.0.4",
    "@juggle/resize-observer": "^3.3.0",
    "@mui/icons-material": "^5.8.4",
    "@mui/lab": "^5.0.0-alpha.84",
    "@mui/material": "5.8.2",
    "@mui/system": "5.8.2",
    "@mui/x-date-pickers": "^5.0.0-alpha.5",
    "@rehooks/local-storage": "^2.4.3",
    "@types/classnames": "^2.2.11",
    "@types/d3-array": "^2.9.0",
    "@types/js-cookie": "^2.2.6",
    "@types/react-dom": "^17.0.0",
    "@types/uuid": "^8.3.0",
    "@visx/axis": "^2.12.2",
    "@visx/curve": "^2.1.0",
    "@visx/event": "^2.6.0",
    "@visx/group": "^2.10.0",
    "@visx/scale": "^2.2.2",
    "@visx/shape": "^2.12.2",
    "@visx/text": "^2.12.2",
    "@visx/tooltip": "^2.10.0",
    "background-color-recursive": "^1.1.2",
    "classnames": "^2.2.6",
    "core-js": "^3",
    "d3-array": "^2.12.1",
    "dayjs": "^1.11.7",
    "deepmerge": "^4.2.2",
    "fast-deep-equal": "^3.1.3",
    "highlight.js": "^11.5.1",
    "js-cookie": "^2.2.1",
    "lodash": "^4.17.21",
    "luxon": "3.0.1",
    "notistack": "^2.0.3",
    "react-cookie": "^4.1.1",
    "react-dnd": "^11.1.3",
    "react-dnd-html5-backend": "^11.1.3",
    "react-lines-ellipsis": "^0.15.0",
    "react-string-replace": "^1.1.0",
    "react-use-measure": "^2.0.4",
    "react-virtualized-auto-sizer": "^1.0.6",
    "react-window": "^1.8.7",
    "use-overflow": "^1.1.0",
    "uuid": "^7.0.3"
  },
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/plugin-proposal-class-properties": "^7.16.7",
    "@babel/plugin-proposal-private-methods": "^7.16.11",
    "@babel/plugin-transform-react-jsx": "^7.9.4",
    "@babel/plugin-transform-runtime": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-typescript": "^7.9.0",
    "@reduxjs/toolkit": "^1.5.0",
    "@storybook/addon-actions": "6.5.9",
    "@storybook/addon-essentials": "6.5.9",
    "@storybook/addon-interactions": "6.5.9",
    "@storybook/addon-links": "6.5.9",
    "@storybook/addon-storysource": "6.5.9",
    "@storybook/addons": "6.5.9",
    "@storybook/jest": "^0.0.10",
    "@storybook/react": "6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@types/luxon": "^3.0.0",
    "@types/react": "^17.0.0",
    "@types/react-router-dom": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.1.0",
    "@typescript-eslint/parser": "^4.1.0",
    "aws-sdk": "^2.795.0",
    "babel-loader": "^8.2.1",
    "babel-plugin-import": "^1.13.5",
    "babel-plugin-lodash": "^3.3.4",
    "chromatic": "6.10.1",
    "css-loader": "^4.2.1",
    "cypress": "^5.2.0",
    "dedent": "^0.7.0",
    "eslint": "^7.5.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-mdx": "^1.16.0",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^4.0.8",
    "fontsource-material-icons": "^4.0.0",
    "fs-extra": "^9.0.0",
    "http-server": "^0.12.3",
    "icon-font-buildr": "^1.3.4",
    "jest": "^26.4.0",
    "ligatures": "^0.0.3",
    "mini-css-extract-plugin": "^0.10.0",
    "msw": "0.35.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^2.0.5",
    "puppeteer": "^5.2.1",
    "react": "^17.0.0",
    "react-docgen-typescript": "^1.16.4",
    "react-dom": "^17.0.0",
    "react-hook-form": "7.31.2",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-test-renderer": "^16.13.1",
    "redux": "^4.0.5",
    "rimraf": "^3.0.2",
    "source-map-loader": "^0",
    "standard-version": "^9.5.0",
    "start-server-and-test": "^1.11.4",
    "storybook-addon-locale": "^0.3.6",
    "storybook-dark-mode": "^1.0.3",
    "style-loader": "^1.2.1",
    "typescript": "^4.7.4",
    "url-loader": "^4.1.0",
    "webpack": "^4",
    "webpack-cli": "^4.10.0",
    "webpack-filter-warnings-plugin": "^1.2.1"
  },
  "resolutions": {
    "@types/react": "^17.0.0",
    "@types/react-router-dom": "^5.1.7"
  }
}

Answer 1 · 2023-05-15T06:54:39.000Z

Hello @jtaylor3rd
Just want to confirm if I understand your plan correctly.
Is this something that you want to achieve?
If that's the case, it seems to work without issues.
In regards to the error you are seeing—it's the problem with the @date-io library itself. The author was probably not expecting anyone to use more than one adapter at a time.

There are a few options of how to solve the issue:

is upgrading to v6 a feasible option? We have removed the dependency on the @date-io package on v6.3.0.
you can consider using the same solution as we did initially if upgrading is not an option: use patch-package to fix the duplicate type declaration: https://github.com/mui/mui-x/blob/v6.2.0/patches/%40date-io%2Bluxon%2B2.16.1.patch

P.S. Please consider opening issue on the mui-x repository instead as this one is related to legacy versions of the material-pickers, which are no longer maintained.

Answer 2 · 2023-05-16T16:59:41.000Z

Hello @jtaylor3rd Just want to confirm if I understand your plan correctly. Is this something that you want to achieve? If that's the case, it seems to work without issues. In regards to the error you are seeing—it's the problem with the @date-io library itself. The author was probably not expecting anyone to use more than one adapter at a time.

There are a few options of how to solve the issue:

is upgrading to v6 a feasible option? We have removed the dependency on the @date-io package on v6.3.0.

you can consider using the same solution as we did initially if upgrading is not an option: use patch-package to fix the duplicate type declaration: https://github.com/mui/mui-x/blob/v6.2.0/patches/%40date-io%2Bluxon%2B2.16.1.patch

P.S. Please consider opening issue on the mui-x repository instead as this one is related to legacy versions of the material-pickers, which are no longer maintained.

Thank you @LukasTy. This was helpful. Upgrading at this time isn't desired, so we've opted to use the patch, which worked just fine. I'll be sure to log any future requests to the proper repo.