Can't import the named export 'AMPMMidnightParser' from non EcmaScript module (only default export is available)

[Azmat7860]

When I update this package from v2.30.0 to v3.0.6 (latest version) then it gives this error
./node_modules/date-fns/parse/_lib/parsers.mjs
Can't import the named export 'AMPMMidnightParser' from non EcmaScript module (only default export is available)
Please look at this error or if anyone have solution about this error
please provide the solution here
Thanks

[27leaves]

Same here, I guess it's due to outdated libraries?

For reference, here is an excerpt of my package.json:

{
  "name": "goodbag-backoffice",
  "version": "0.1.0",
  "private": true,
  "scripts": {...},
  "dependencies": {
    "@dmuy/toast": "^2.0.2",
    "@material-design-icons/font": "^0.14.1",
    "@tanstack/react-query": "^4.28.0",
    "@types/jest": "^29.1.2",
    "@types/node": "^18.11.0",
    "@types/react-router-dom": "^5.3.3",
    "@zodios/core": "^10.9.0",
    "@zodios/react": "^10.4.4",
    "ag-grid-community": "^23.2.1",
    "ag-grid-react": "^23.2.1",
    "autoprefixer": "^10.4.14",
    "axios": "^1.3.4",
    "bootstrap": "^4.3.1",
    "collections": "^5.1.9",
    "d3": "^5.0.0",
    "daisyui": "^2.31.0",
    "date-fns": "^3.2.0",
    "fslightbox-react": "^1.7.3",
    "i18next-client": "^1.11.4",
    "jsonwebtoken": "^8.5.1",
    "opening_hours": "^3.5.0",
    "postcss": "^8.4.21",
    "react": "^18.2.0",
    "react-animations": "^1.0.0",
    "react-async-script-loader": "^0.3.0",
    "react-calendar-heatmap": "^1.8.1",
    "react-date-range": "^1.3.0",
    "react-dom": "^18.2.0",
    "react-error-overlay": "6.0.9",
    "react-image-crop": "^8.3.0",
    "react-paginate": "^8.1.3",
    "react-places-autocomplete": "^7.2.1",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.1",
    "react-scripts": "^3.4.1",
    "react-tailwindcss-select": "^1.8.5",
    "react-tooltip": "^3.11.1",
    "redux": "^4.0.4",
    "redux-thunk": "^2.3.0",
    "styled-components": "^5.3.9",
    "sweetalert2": "^10.15.3",
    "sweetalert2-react-content": "^3.3.1",
    "tailwindcss": "^3.2.7",
    "typescript": "^4.8.4",
    "use-debounce": "^9.0.4",
    "whatwg-fetch": "^3.0.0",
    "zod": "^3.21.4"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.6",
    "env-cmd": "^10.0.1",
    "eslint-plugin-prettier": "^3.1.4",
    "husky": "^4.2.5",
    "openapi-zod-client": "^1.6.0",
    "postcss-cli": "^10.1.0",
    "prettier": "^2.0.5",
    "pretty-quick": "^2.0.1",
    "sass": "^1.55.0"
  },
  "resolutions": {
    "react-error-overlay": "6.0.9"
  },
}

[fturmel]

These seem related to bundling problems.

@27leaves in your case, most likely it's the old CRA version and upgrading to v5 might work, see facebook/create-react-app#10356

I would consider finding a way to move off CRA if possible, as it will continue to be a pain point for you. Maybe to Vite, Parcel, NextJS or Astro depending on your needs. Worth a read: reactjs/react.dev#5487 (comment)

[27leaves]

@fturmel Thank you very much for your response. I thought that this might be the problem. I wish I could move away soon - let's see when I get time for this ;)

All the best!

[fturmel]

You're welcome! Please report back to confirm/share your solution with the community.

[27leaves]

Solution right now is to stay at v2.30