`error TS2307: Cannot find module` error in vue3 + vite while type checking (`vue-tsc --build`)

[AnkurAgrawal]

Summary

I am getting the following error while type checking a vue3 + vite project. The configs are default as generated by pnpm create vue@latest. Even though type checking via vue-tsc results in an error the build complete successfully. Also the app runs fine in both dev and production mode.

src/main.ts:9:35 - error TS2307: Cannot find module 'vue-auth3/drivers/auth/bearer-token' or its corresponding type declarations.

9 import driverAuthBearerToken from 'vue-auth3/drivers/auth/bearer-token'
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/main.ts:10:29 - error TS2307: Cannot find module 'vue-auth3/drivers/http/fetch' or its corresponding type declarations.

10 import driverHttpAxios from 'vue-auth3/drivers/http/fetch'
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Repro Steps:

1. Open the project - vue-auth3-bug-repro.zip.
2. Run pnpm install.
3. Run pnpm build. Notice that the build succeed.
4. Run pnpm type-check.
5. Observe the errors.

Expected: No error in type checking Observed: Type checking fails with error.

Is there something missing from the config?

[codeautopilot[bot]]

Potential solution

The plan to solve the bug involves creating type declaration files for the missing modules and updating the tsconfig.json file to include these new type declarations. This will inform TypeScript about the types used in these modules, allowing it to pass the type checking phase without errors.

What is causing this bug?

The bug is caused by the absence of type declarations for the modules 'vue-auth3/drivers/auth/bearer-token' and 'vue-auth3/drivers/http/fetch'. TypeScript cannot find these modules or their corresponding type declarations, resulting in the TS2307 error during type checking. This issue does not affect the build process or the runtime behavior of the application, which is why the build completes successfully and the app runs fine in both dev and production modes.

Code

Type Declaration Files

Create the following type declaration files to resolve the missing module errors:

src/types/vue-auth3/drivers/http/fetch.d.ts

declare module 'vue-auth3/drivers/http/fetch' {
  // Example type declarations
  export interface FetchOptions {
    method: string;
    headers?: Record<string, string>;
    body?: string;
  }

  export function fetch(url: string, options?: FetchOptions): Promise<Response>;
}

src/types/vue-auth3/drivers/auth/bearer-token.d.ts

declare module 'vue-auth3/drivers/auth/bearer-token' {
  // Example type declarations
  export interface BearerTokenOptions {
    token: string;
    refreshToken?: string;
  }

  export default function driverAuthBearerToken(options: BearerTokenOptions): void;
}

Update tsconfig.json

Modify the tsconfig.json file to include the new type declaration files:

{
  "compilerOptions": {
    "target": "ESNEXT",
    "module": "ESNext",
    "declaration": true,
    "strict": true,
    "declarationDir": "types",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": false
  },
  "include": ["src", "src/types/**/*.d.ts"],
  "exclude": ["node_modules", "test"]
}

How to replicate the bug

1. Open the project - vue-auth3-bug-repro.zip.
2. Run pnpm install.
3. Run pnpm build. Notice that the build succeeds.
4. Run pnpm type-check.
5. Observe the errors:

   src/main.ts:9:35 - error TS2307: Cannot find module 'vue-auth3/drivers/auth/bearer-token' or its corresponding type declarations.
   
   9 import driverAuthBearerToken from 'vue-auth3/drivers/auth/bearer-token'
                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   
   src/main.ts:10:29 - error TS2307: Cannot find module 'vue-auth3/drivers/http/fetch' or its corresponding type declarations.
   
   10 import driverHttpAxios from 'vue-auth3/drivers/http/fetch'
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   

Task

User input/request

Ticket title: error TS2307: Cannot find module error in vue3 + vite while type checking (vue-tsc --build)

Ticket Description:

Summary

I am getting the following error while type checking a vue3 + vite project. The configs are default as generated by pnpm create vue@latest. Even though type checking via vue-tsc results in an error the build complete successfully. Also the app runs fine in both dev and production mode.

src/main.ts:9:35 - error TS2307: Cannot find module 'vue-auth3/drivers/auth/bearer-token' or its corresponding type declarations.

9 import driverAuthBearerToken from 'vue-auth3/drivers/auth/bearer-token'
                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/main.ts:10:29 - error TS2307: Cannot find module 'vue-auth3/drivers/http/fetch' or its corresponding type declarations.

10 import driverHttpAxios from 'vue-auth3/drivers/http/fetch'
                               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Repro Steps:

1. Open the project - vue-auth3-bug-repro.zip.
2. Run pnpm install.
3. Run pnpm build. Notice that the build succeed.
4. Run pnpm type-check.
5. Observe the errors.

Expected: No error in type checking Observed: Type checking fails with error.

Is there something missing from the config?

Click here to create a Pull Request with the proposed solution

Files used for this task:

Changes on src/types/vue-auth3/drivers/http/fetch.d.ts

Analysis Report

File: src/types/vue-auth3/drivers/http/fetch.d.ts

Current State

The file is currently empty.

Issue

The error message indicates that TypeScript cannot find the module 'vue-auth3/drivers/http/fetch' or its corresponding type declarations. This suggests that TypeScript is looking for type definitions for this module but cannot find any.

Cause of the Bug

The absence of type declarations for the module 'vue-auth3/drivers/http/fetch' is causing TypeScript to throw the error TS2307: Cannot find module 'vue-auth3/drivers/http/fetch' or its corresponding type declarations. during type checking.

Solution

To resolve this issue, we need to create a type declaration file that exports the necessary types for the 'vue-auth3/drivers/http/fetch' module. This will inform TypeScript about the types used in this module and prevent the TS2307 error.

Suggested Implementation

Here is a basic example of what the type declaration file might look like. You will need to adjust the types according to the actual implementation of the module.

declare module 'vue-auth3/drivers/http/fetch' {
  // Example type declarations
  export interface FetchOptions {
    method: string;
    headers?: Record<string, string>;
    body?: string;
  }

  export function fetch(url: string, options?: FetchOptions): Promise<Response>;
}

Next Steps

1. Verify the Actual Types: Ensure that the types declared in this file match the actual implementation of the 'vue-auth3/drivers/http/fetch' module.
2. Update the tsconfig.json: Make sure that the tsconfig.json file includes this type declaration file in its compilation.

Conclusion

Creating a type declaration file for the 'vue-auth3/drivers/http/fetch' module should resolve the TS2307 error during type checking. Ensure that the types are accurate and included in the TypeScript compilation process.

Changes on src/types/vue-auth3/drivers/auth/bearer-token.d.ts

Analysis Report

File: src/types/vue-auth3/drivers/auth/bearer-token.d.ts

Current State

The file is currently empty.

Issue

The error message error TS2307: Cannot find module 'vue-auth3/drivers/auth/bearer-token' or its corresponding type declarations indicates that TypeScript cannot find type declarations for the module 'vue-auth3/drivers/auth/bearer-token'. This is likely because the type declaration file for this module is missing or not correctly set up.

Cause of the Bug

The absence of type declarations for the module 'vue-auth3/drivers/auth/bearer-token' is causing TypeScript to throw an error during type checking. This is why the build succeeds (as it doesn't require type information) but type checking fails.

Solution

To resolve this issue, we need to create a type declaration file that exports the necessary types for the 'vue-auth3/drivers/auth/bearer-token' module. This will inform TypeScript about the types used in this module, allowing it to pass the type checking phase.

Proposed Type Declaration File

Here is a basic example of what the type declaration file might look like. You will need to adjust the types according to the actual implementation of the module.

// src/types/vue-auth3/drivers/auth/bearer-token.d.ts

declare module 'vue-auth3/drivers/auth/bearer-token' {
  // Example type declarations
  export interface BearerTokenOptions {
    token: string;
    refreshToken?: string;
  }

  export default function driverAuthBearerToken(options: BearerTokenOptions): void;
}

Next Steps

1. Create the Type Declaration File: Add the above content to the src/types/vue-auth3/drivers/auth/bearer-token.d.ts file.
2. Update tsconfig.json: Ensure that the tsconfig.json file includes the src/types directory in its include section to make sure TypeScript picks up the new type declarations.

Conclusion

By creating the type declaration file and updating the tsconfig.json, we should be able to resolve the type checking errors related to the 'vue-auth3/drivers/auth/bearer-token' module. This will allow the project to pass type checking without errors.

Changes on tsconfig.json

Analysis Report

Overview

The tsconfig.json file is a TypeScript configuration file that specifies the compiler options and the files to be included and excluded in the TypeScript compilation process. The issue reported involves TypeScript not being able to find modules vue-auth3/drivers/auth/bearer-token and vue-auth3/drivers/http/fetch during type checking, even though the build completes successfully and the application runs fine.

Observations

1. Compiler Options:

   • The compilerOptions section is well-defined with options like target, module, declaration, strict, declarationDir, moduleResolution, skipLibCheck, and allowSyntheticDefaultImports.
   • The declarationDir is set to "types", which means the generated declaration files will be placed in the types directory.

2. Include and Exclude:

   • The include section currently includes only the src directory.
   • The exclude section excludes node_modules and test.

Potential Cause of the Bug

The issue likely arises because the TypeScript compiler is not aware of the type declaration files for the modules vue-auth3/drivers/auth/bearer-token and vue-auth3/drivers/http/fetch. These modules are not standard TypeScript modules and may not have type declarations available in the node_modules directory.

Solution

To resolve this issue, we need to:

1. Create type declaration files for the missing modules.
2. Ensure that these type declaration files are included in the TypeScript compilation process.

Steps to Fix

1. Create Type Declaration Files:

   • Create a directory structure under src/types to match the module paths.
   • Create bearer-token.d.ts and fetch.d.ts files with the necessary type declarations.

2. Update tsconfig.json:

   • Modify the include section to include the new type declaration files.

Updated tsconfig.json

{
  "compilerOptions": {
    "target": "ESNEXT",
    "module": "ESNext",
    "declaration": true,
    "strict": true,
    "declarationDir": "types",
    "moduleResolution": "node",
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": false
  },
  "include": ["src", "src/types/**/*.d.ts"],
  "exclude": ["node_modules", "test"]
}

Conclusion

The tsconfig.json file needs to be updated to include the new type declaration files. This should resolve the TS2307: Cannot find module errors during type checking. The next step is to create the type declaration files as specified in the plan.

Disclaimer: This comment was entirely generated using AI. Be aware that the information provided may be incorrect.

Current plan usage: 30.57%

Have feedback or need help? Discord Documentation [email protected]

[tachibana-shin]

I believe this problem is due to your tsconfig configuration. I downloaded your code and used default tsconfig without any problems

[obrte]

I have same problem, the problem is in tsconfig moduleResolution, the package is not support "bundler" and must set "Node10", but tsconfig's docs says "bundler" is best chooise over "Node10" (node).

[nowrap]

What can I do if I have to leave the moduleResolution on bundler?

[pashata]

I have the same issue with this tsconfig

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "node_modules/preact/src/internal.d.ts"
  ],
  "exclude": ["node_modules"]
}

[tachibana-shin]

I have the same issue with this tsconfig

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "node_modules/preact/src/internal.d.ts"
  ],
  "exclude": ["node_modules"]
}

Can you share the file you import vue-auth3. Actually this plugin has 2 ways to import driver each way will be suitable for 1 type of tsconfig

[pashata]

i'm pretty much following the instructions in the docs... https://vue-auth3.js.org/introduction.html

i already have websanova package, i'm was trying to replace it with this one...

what are the two ways if importing ?

[tachibana-shin]

i'm pretty much following the instructions in the docs... https://vue-auth3.js.org/introduction.html

i already have websanova package, i'm was trying to replace it with this one...

what are the two ways if importing ?

You have use

import driverAuthBearer from 'vue-auth3/drivers/auth/bearer'

or

import driverAuthBearer from 'vue-auth3/dist/drivers/auth/bearer'

[maximemoreillon]

Hello

i'm pretty much following the instructions in the docs... https://vue-auth3.js.org/introduction.html i already have websanova package, i'm was trying to replace it with this one... what are the two ways if importing ?

You have use

import driverAuthBearer from 'vue-auth3/drivers/auth/bearer'

or

import driverAuthBearer from 'vue-auth3/dist/drivers/auth/bearer'

Both of those ways result in errors

Cannot find module 'vue-auth3/dist/drivers/auth/bearer' or its corresponding type declarations.

Cannot find module 'vue-auth3/drivers/auth/bearer' or its corresponding type declarations.ts(2307)

[tachibana-shin]

Hello

i'm pretty much following the instructions in the docs... https://vue-auth3.js.org/introduction.html i already have websanova package, i'm was trying to replace it with this one... what are the two ways if importing ?

You have use import driverAuthBearer from 'vue-auth3/drivers/auth/bearer' or import driverAuthBearer from 'vue-auth3/dist/drivers/auth/bearer'

Both of those ways result in errors

Cannot find module 'vue-auth3/dist/drivers/auth/bearer' or its corresponding type declarations.

Cannot find module 'vue-auth3/drivers/auth/bearer' or its corresponding type declarations.ts(2307)

Can you create 1 minimal reproducible example? Surprisingly, I never had this problem. I"m currently using TypeScript 5

[maximemoreillon]

Sure, here's some sample code: https://github.com/maximemoreillon/vue-auth3-test

These are the steps to reproduce:

1. npm create vue@latest, select Typescript and Router
2. npm i vue-auth3
3. Copy paste https://vue-auth3.js.org/guide/getting-started.html#typescript

[tachibana-shin]

Sure, here's some sample code: https://github.com/maximemoreillon/vue-auth3-test

These are the steps to reproduce:

1. npm create vue@latest, select Typescript and Router
2. npm i vue-auth3
3. Copy paste https://vue-auth3.js.org/guide/getting-started.html#typescript

I just released 1.1.1 to completely remove this bug on any configuration

[maximemoreillon]

Thank you very much for the release! I can confirm that the Typescript errors are no longer showing with v1.1.1

[obrte]

same for me, it's work pretty fine, tnx