`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. ```typescript declare module 'vue-auth3/drivers/http/fetch' { // Example type declarations export interface FetchOptions { method: string; headers?: Record; body?: string; } export function fetch(url: string, options?: FetchOptions): Promise; } ``` ### 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. ```typescript // 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` ```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](https://discord.gg/r72ykfvyx7) [Documentation](https://docs.codeautopilot.com/) [support@codeautopilot.com](mailto:support@codeautopilot.com)

[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).