TS2307: Module '@/*' and respective type declarations could not be located

Question

TS2307: Module '@/*' and respective type declarations could not be located

My TypeScript webpack project was struggling to resolve all custom paths today for some unknown reason. Despite trying various solutions such as re-installing packages and modifying settings, the issue persists. The same error is displayed for all files.

I have verified that my ts-config

"moduleResolution": "node"

is correctly configured.

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": {
    // List of dev dependencies...
  },
  "peerDependencies": {
    // Peer dependencies...
  },
  "dependencies": {
    // List of external dependencies...
  }
}

Have you considered any other potential causes for the sudden inability to locate all paths? I have even reverted my git status to a previous state where everything was working fine and reinstalled all the necessary packages, but the problem remains unresolved.

typescript webpack

Answer 1

Answer №1

In my opinion, the paths need to be structured in the following way:

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

It is important to note that the slash before "@*" should not be included.

Answer 2

In my opinion, the paths need to be structured in the following way:

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

It is important to note that the slash before "@*" should not be included.

Answer 3

Answer №2

Finally figured it out: turns out I forgot to include the module declaration

Vue 3

index.d.ts / vue-shims.d.ts

declare module '*.vue' {
    import type {defineComponent} from 'vue'
    const component: ReturnType<typeof defineComponent>;
    export default component
}

Vue 2

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

Answer 4

Finally figured it out: turns out I forgot to include the module declaration

Vue 3

index.d.ts / vue-shims.d.ts

declare module '*.vue' {
    import type {defineComponent} from 'vue'
    const component: ReturnType<typeof defineComponent>;
    export default component
}

Vue 2

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

Answer 5

Answer №3

I encountered a similar issue using Nextjs 14.2.8, Typescript 5.5.4, and NextAuth 5.0.0-beta.20

The error message states: Cannot find module '@/auth' or its corresponding type declarations.

{
  ...
  "include": [ ..., "app/api/**/***/**.ts"],
},

In NextAuth v5, the default API settings for OAuth2 can be found in:

<projectRoot>/app/api/auth/...nextauth/route.ts

To match the structure of the ...nextauth folder, we need to use 3 wildcards:

* represents ...
** represents nextauth

You can refer to glob patterns here: https://code.visualstudio.com/docs/editor/glob-patterns

Answer 6

I encountered a similar issue using Nextjs 14.2.8, Typescript 5.5.4, and NextAuth 5.0.0-beta.20

The error message states: Cannot find module '@/auth' or its corresponding type declarations.

{
  ...
  "include": [ ..., "app/api/**/***/**.ts"],
},

In NextAuth v5, the default API settings for OAuth2 can be found in:

<projectRoot>/app/api/auth/...nextauth/route.ts

To match the structure of the ...nextauth folder, we need to use 3 wildcards:

* represents ...
** represents nextauth

You can refer to glob patterns here: https://code.visualstudio.com/docs/editor/glob-patterns

TS2307: Module '@/*' and respective type declarations could not be located

ts-config.json

package.json

Answer №1

Answer №2

Vue 3

Vue 2

Answer №3

Similar questions

How can I properly integrate jQuery libraries, along with CSS, in a create-react-app project?

Error encountered while utilizing the Extract function to refine a union

Iterate over a collection of HTML elements to assign a specific class to one element and a different class to the remaining elements

Tips on dynamically looping the formcontrolname and implementing validation strategies

The directory cannot be removed because it is not empty: npm-react-popper-tooltip

Is it considered poor practice in TypeScript to manually set the type when the type inference is already accurate?

Eliminate the use of type assertion when verifying if a value is included in a union

What is the alternative parameter to use instead of onChange in React Router v4?

Convert the static method of a TypeScript class into a variable

Any problems with TypeLite involving generics or Enums?

The function cannot be accessed during the unit test

What role does numerical data play in Typescript?

Error: The function parentSubmit does not exist

PrismaClientInitializationError: The connector encountered an issue when attempting to establish a database connection in VScode

What is the best way to center align the placeholder in an ion-input field?

What is the best way to synchronize API definitions between the server and client using TypeScript?

React hook triggering re-render

Definition of Jasmine custom matcher type

Modify associated dropdown menus

Steps for making a "confirm" button within a modal that includes a redirect URL