[Vuejs]-Wrong linkin when import index.ts file without specifying the file extension, when another index.vue file is in the same folder, using vue 3 and vite?

by

0👍

✅

You can import the files without specifying the extensions, thanks to Vite. However, as you mentioned both of your files have the same names under the same folder, so you might face confusion while importing any of them. The good idea is to use different names for the files and import them with that respected names.

However, if there is any specific requirement to use the same name of Vue and TS files then one way would be to use Vite’s path aliasing feature. What you need to do is-

In your vite.config.ts file define the path alias for these files-

resolve: {
  alias: {
    'IndexTs': 'Path to index.ts file',
    'IndexVue': 'Path to index.vue file
  }
},

Inside your tsconfig.json, modify the compilerOptions section to include the paths mapping for your alias-

{
  "compilerOptions": {
    ...,
    "paths": {
      ...,
      "@indexTs": ["Path to index.ts file"],
      "@indexVue": ["Path to index.vue file"]
    }
  }
}

Now, you can easily import those files like that-

import something from '@indexTs';
import IndexVueComponent from '@IndexVue'

Leave a comment