vite alias can be used, but vetur suggest error

[franck-lynn]

in vite,coniig.ts

const config: UserConfig = {
    resolve: {
        alias: {
            '@': path.resolve(__dirname, './packages/'),
            'data': path.resolve(__dirname, './data/')
        },

    },
}

when I import the data in index.vue,

it can work, but display an error:

Cannot find module 'data/carousel' or its corresponding type declarations.Vetur(2307)

The project is a lerna project.

package.json:

{
  "name": "vite-components",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "main": "index.js",
  "workspaces": [
    "packages/*"
  ],
  "scripts": {
    "bootstrap": "npx lerna bootstrap",
    "dev": "vite",
    "build": "vite build",
    "gc": "node -r esm ./scripts/gc.sh.js"
  },
  "author": "",
  "license": "ISC"
}

tsconfig.json:

{
  "compilerOptions": {

    "target": "esnext", 
   
    "module": "esnext",
    "lib": [
      "esnext",
      "dom"
    ], 
    "jsx": "preserve", 
    "declaration": true 
    
    "removeComments": true,  
 
    "strict": true, 
   
    "moduleResolution": "node",      
    "baseUrl": ".",        
    "paths": {
      "@/*": [ "./packages/*" ], 
      "data/": ["./data/*"],
    }, 
    "types": [ "vite/client" ], 
    "allowSyntheticDefaultImports": true, 
    "esModuleInterop": true, 
 
    "skipLibCheck": true, 
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "packages/**/*.ts",
    "packages/**/*.d.ts",
    "packages/**/*.tsx",
    "packages/**/*.vue"
  ]
}

[CHOYSEN]

Alias is a special feature that is handled by Vite before it is used by the browser. Unless Vetur specifically supports Vite, but that will be a bit expensive.

[franck-lynn]

@CHOYSEN thank you for reply.
I had comment the vetur validate in setting.json. and use eslint check the code. it works well.
setting.json

"vetur.validation.script": false,
"vetur.validation.interpolation": false, 
"vetur.validation.template": false,

[tamish-max]

The runtime alias and TS path alias need to match exactly.

In tsconfig.json, use the wildcard form:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["packages/*"],
      "data/*": ["data/*"]
    }
  }
}

A couple of extra notes:

• "data/" won’t match data/carousel; it should be "data/*".
• If you want editor indexing, include the data folder too.
• If this is Vue 3 + TS, Volar usually behaves better than Vetur for path resolution/type support.