TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".json" for /node_modules/country-flag-icons/modules/countries.json

Question

i have been working on a project for the last couple of days. it was working fine but from the previous days, it's showing me this JSON extension error. TO solve this issue I deleted the node_modules file, .next file, uninstalled the country-flag-icons from the dependency, and also deleted the yarn.lock file but still, this error is coming. For a moment I thought that maybe I did something wrong in the code so, I reset the previous commits and tried to start but still, it is the same error.

my dependencies are

 "dependencies": {
    "@babel/preset-react": "^7.16.7",
    "@date-io/date-fns": "1.3.13",
    "@emotion/cache": "^11.6.0",
    "@emotion/react": "^11.7.0",
    "@emotion/server": "^11.4.0",
    "@emotion/styled": "^11.6.0",
    "@fullcalendar/daygrid": "^5.10.1",
    "@fullcalendar/interaction": "^5.10.1",
    "@fullcalendar/list": "^5.10.1",
    "@fullcalendar/react": "^5.10.1",
    "@fullcalendar/timegrid": "^5.10.1",
    "@fullcalendar/timeline": "^5.10.1",
    "@iconify/react": "^3.1.0",
    "@material-ui/pickers": "^3.3.10",
    "@mui/icons-material": "^5.2.4",
    "@mui/lab": "^5.0.0-alpha.59",
    "@mui/material": "^5.2.2",
    "@nandorojo/swr-firestore": "^0.16.0",
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "axios": "^0.24.0",
    "change-case": "^4.1.2",
    "country-flag-icons": "^1.5.2",
    "date-fns": "^2.27.0",
    "firebase": "^9.6.1",
    "formik": "^2.2.9",
    "framer-motion": "^4.1.17",
    "jwt-check-expiration": "^1.0.5",
    "material-ui-phone-number": "^3.0.0",
    "moment": "^2.29.1",
    "next": "^12.0.7",
    "next-transpile-modules": "^9.0.0",
    "node-sass": "^4.14.1",
    "notistack": "^2.0.3",
    "nprogress": "^0.2.0",
    "otp-input-react": "^0.2.4",
    "prevent-orientation": "^2.1.0",
    "prop-types": "^15.7.2",
    "react": "17.0.2",
    "react-countdown": "^2.3.2",
    "react-dom": "17.0.2",
    "react-drag-drop-files": "^2.2.2",
    "react-intersection-observer": "^8.32.5",
    "react-lazy-load-image-component": "^1.5.1",
    "react-number-format": "^4.9.1",
    "react-otp-input": "^2.4.0",
    "react-phone-input-mui": "^2.9.4",
    "react-phone-number-input": "^3.1.44",
    "react-quill": "^2.0.0-beta.4",
    "react-screen-orientation": "^0.0.4",
    "request-ip": "^2.1.3",
    "simplebar": "^5.3.6",
    "simplebar-react": "^2.3.6",
    "stylis": "^4.0.10",
    "stylis-plugin-rtl": "^2.1.1",
    "timezone-support": "^2.0.2",
    "typescript": "^4.4.4",
    "yup": "^0.32.11"
  },

my jscongif.json file is

{
    "compilerOptions": {
      "baseUrl": "."
    },
    "include": [],
    "exclude": ["node_modules", "**/node_modules/*"]
  }
  

I'm truly stuck with this problem. it would be great if you could solve this. Thanks.

Answer 1

I've accidentally stumbled upon this thread while googling for ERR_UNKNOWN_FILE_EXTENSION. And I also happen to be the maintainer of the country-flag-icons package. I've just published [email protected] with a probable fix. You could try that one out.