An alias in vite.config.ts results in "error TS2307: Cannot find module", but it works.

[tadashi-oya]

An alias in vite.config.ts results in "error TS2307: Cannot find module", but it works.
I want to turn this error off if possible.
Any advice would be appreciated, please.

The first step was to create a vanilla TypeScript Vue3 project by executing npm init vue@latest.

node@c9674c567144:~/work$ npm init vue@latest

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue3-vite
✔ Add TypeScript? … No / Yes (Yes)
✔ Add JSX Support? … No / Yes (No)
✔ Add Vue Router for Single Page Application development? … No / Yes (No)
✔ Add Pinia for state management? … No / Yes (No)
✔ Add Vitest for Unit Testing? … No / Yes (No)
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes (No)
✔ Add ESLint for code quality? … No / Yes (No)

Scaffolding project in /home/node/work/vue3-vite...

Done. Now run:

  cd vue3-vite
  npm install
  npm run dev

And I have set an alias as follows.

vite.config.ts:

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
        'envConfig': fileURLToPath(new URL(`./src/configs/${mode}.ts`, import.meta.url)),
      }
    },
    server: {
      host: true,
    },
  }
})

src/configs/development.ts | staging.ts | production.ts:

export default {
    test: {
        msg: "This is development." (or "This is staging." or "This is production."),
    },
};

src/App.vue:

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'

import cfg from 'envConfig'
console.log(cfg.test.msg)
</script>

<template ...

Files:

vue3-vite
├── README.md
├── env.d.ts
├── index.html
├── node_modules
│   ├── @babel
│   ├── @types
│   ├── ...
├── package-lock.json
├── package.json
├── public
│   └── favicon.ico
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── base.css
│   │   └── logo.svg
│   ├── components
│   │   ├── HelloWorld.vue
│   │   ├── TheWelcome.vue
│   │   ├── WelcomeItem.vue
│   │   └── icons
│   ├── configs
│   │   ├── development.ts
│   │   ├── production.ts
│   │   └── staging.ts
│   └── main.ts
├── tsconfig.json
├── tsconfig.vite-config.json
└── vite.config.ts

It works as I expected.

npm run dev

npx vite --mode staging

npx vite --mode production

But TypeScript says

node@c9674c567144:~/work/vue3-vite$ npx vue-tsc --noEmit
src/App.vue:5:17 - error TS2307: Cannot find module 'envConfig' or its corresponding type declarations.

5 import cfg from 'envConfig'
                  ~~~~~~~~~~~


Found 1 error in src/App.vue:5

In VSCode:

[sapphi-red]

For type check, you need to set paths in tsconfig.json.
https://www.typescriptlang.org/tsconfig#paths

[tadashi-oya]

Thank you for your comment.
I was able to achieve my goal without editing tsconfig.json.

[tadashi-oya]

"declare" statement is needed in env.d.ts file.

$ cat env.d.ts
/// <reference types="vite/client" />
declare module "envConfig";

[pedroSoaresll]

@tadashi-oya what is the envConfig module and where can I find it in the documentation?

[yanickrochon]

For those getting to this page from Google (or whatever SE you use), the solution is:

import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
    base: "./",
    resolve: {
        alias: {
            "~": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },
    plugins: [/* ... */],
    // ...
});

and your tsconfig.json

{
    "compilerOptions": {
        // ...

        /* Path Aliases */
        "baseUrl": ".",
        "paths": {
            "~/*": ["./src/*"]
        }
    },

    // ...
}

[mikekoetter]

For me the fix was to put it in compilerOptions of tsconfig.app.json not tsconfig.json

    "types": [
        "node"
      ],
      "baseUrl": ".",
      "paths": {
        "~/*": [
          "./src/*"
        ]
      }

[t-Oil]

Thank you work for me