TS2307: Cannot find module '@/*' or its corresponding type declarations

Question

For whatever strange reason my ts webpack project was unable to resolve all my custom paths today. Whatever I try fails. I re-installed every package changed many settings but it still fails to load all paths and show the error above for all files.

I made sure my ts-config "moduleResolution": "node" is properly set.

ts-config.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "CommonJS",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "allowJs": true,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost",
      "es2016",
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

package.json

{
  "scripts": {
    "test": "exit 0;",
    "build": "cross-env NODE_ENV=production webpack",
    "serve": "cross-env NODE_ENV=development webpack serve"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-proposal-class-properties": "^7.18.6",
    "@babel/plugin-transform-runtime": "^7.5.5",
    "@babel/plugin-transform-typescript": "^7.18.6",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "@types/google.maps": "^3.49.2",
    "@types/jquery": "^3.5.14",
    "@types/select2": "^4.0.55",
    "@webpack-cli/serve": "^1.1.0",
    "babel-loader": "^8.0.6",
    "babel-preset-vue": "^2.0.2",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^5.2.0",
    "css-loader": "^5.1.1",
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^6.0.0",
    "eslint-plugin-prettier": "^3.1.0",
    "prettier": "^1.18.2",
    "style-loader": "^2.0.0",
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue": "^2.7.0",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.7.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.10",
    "vuex": "^3.1.1",
    "webpack": "^5.5.1",
    "webpack-bundle-analyzer": "^4.6.1",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^4.0.0-beta.1"
  },
  "peerDependencies": {
    "vue": "^2.6.10"
  },
  "dependencies": {
    "accounting-js": "^1.1.1",
    "aos": "michalsnik/aos",
    "axios": "^0.19.0",
    "babel-preset-es2015": "^6.24.1",
    "core-js": "^3.8.0",
    "flatpickr": "^4.6.9",
    "google-maps": "^4.3.3",
    "jquery": "^3.4.1",
    "macy": "^2.5.1",
    "moment": "^2.24.0",
    "moment-locales-webpack-plugin": "^1.2.0",
    "moment-timezone": "^0.5.33",
    "moment-timezone-data-webpack-plugin": "^1.5.0",
    "select2": "^4.0.12",
    "snapsvg-cjs": "^0.0.6",
    "swiper": "^6.3.5",
    "webpack-env": "^0.8.0"
  }
}

Can you think of any other reason why it might be unable to find all paths suddenly? I can even reset my git status to weeks ago and install all packages from when it definitely worked but it still fails.

Answer 1

I think the paths should be like this:

    "paths": {
      "@*": [
        "src/*"
      ]
    }

Without slash "@*"