Npm @babel/types error in react typescript

Question

I am getting the error below for types.

I tried npm install @types/babel_types but that didn't fix it.

How do I go about fixing it? I am trying to compile a react project for electron.

Here is my package.json

{
    "name": "abc",
    "description": "abc",
    "author": "abc",
    "version": "1.4.11",
    "main": "public/electron.ts",
    "resolutions": {
        "apollo-client": "2.6.3"
    },
    "dependencies": {
        "@aws-amplify/cli": "^4.46.1",
        "@types/react": "^16.9.43",
        "@types/react-dom": "^16.9.8",
        "@types/react-modal": "^3.12.0",
        "@types/react-router-dom": "^5.1.7",
        "@types/socket.io-client": "^1.4.36",
        "@types/yup": "^0.29.11",
        "aws-amplify": "^3.3.26",
        "aws-amplify-react": "^4.2.30",
        "aws-appsync": "^4.0.3",
        "date-fns": "^2.22.1",
        "electron-is-dev": "^2.0.0",
        "electron-log": "^4.3.5",
        "electron-updater": "^4.3.9",
        "graphql-tag": "^2.12.4",
        "node-sass": "^4.14.1",
        "node-thermal-printer": "^4.1.2",
        "npm": "^6.14.7",
        "react": "^16.13.1",
        "react-apollo-hooks": "^0.4.5",
        "react-async": "^10.0.1",
        "react-axios": "^2.0.5",
        "react-dates": "^21.8.0",
        "react-dom": "^16.13.1",
        "react-load-script": "0.0.6",
        "react-modal": "^3.12.1",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0",
        "react-script-hook": "^1.4.1",
        "react-scripts": "^4.0.3",
        "react-toastify": "^7.0.4",
        "reshake": "^1.2.3",
        "save": "^2.4.0",
        "socket.io": "^4.1.2",
        "socket.io-client": "^4.1.2",
        "start": "^5.1.0",
        "styled-components": "^5.3.0",
        "typescript": "^3.9.7",
        "yup": "^0.32.9"
    },
    "scripts": {
        "start": "react-scripts start",
        "start:web": "react-scripts start",
        "build:web": "PUBLIC_URL=./ react-scripts build",
        "start:desktop": "npm run build:desktop && electron ./build/electron.js",
        "build:desktop": "tsc -p electron/tsconfig.json",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "release": "electron-builder -mwl -p 'onTagOrDraft'",
        "release:windows": "electron-builder -w -p 'onTagOrDraft'",
        "electron-dev": "concurrently \"BROWSER=none npm run start\" \"wait-on http://localhost:3000 && electron .\""
    },
    "eslintConfig": {
        "extends": "react-app"
    },
    "devDependencies": {
        "concurrently": "^5.3.0",
        "electron": "^11.4.1",
        "electron-builder": "^22.11.7",
        "wait-on": "^5.2.1"
    },
    "build": {
        "appId": "com.tabin.desktop",
        "copyright": "Copyright 2021 Zeal Private Ltd",
        "publish": {
            "provider": "github"
        },
        "mac": {
            "category": "public.app-category.business",
            "icon": "build/icon.icns"
        },
        "win": {
            "icon": "build/icon.ico",
            "certificateFile": "private/electron-tabin-desktop-development.p12",
            "certificatePassword": "",
            "verifyUpdateCodeSignature": false
        },
        "linux": {
            "category": "Office",
            "icon": "build/icon.png"
        }
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

Here is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "noFallthroughCasesInSwitch": true
  },
  "include": [
    "src",
    "electron/**/*"
  ]
}

Please tell me how to get rid of this error. Do I need to create some .d.ts files?

Thanks,

Answer 1

First, try this solution. Edit your TypeScript Config file (tsconfig.json) and add a new key-value pair as

"noImplicitAny": false

If this things doesn't work then here are two other solutions

When a module is not yours - try to install types from @types:

npm install -D @types/module-name

If the above install errors - try changing import statements to require:

// import * as yourModuleName from 'module-name';
const yourModuleName = require('module-name');