Import aliasing won’t work in Vite (React, Typescript) boilerplate

  Kiến thức lập trình

I installed shadcn/ui into my vite boilerplate following the docs. But the compiler didn’t seem to recognize the aliasing.
Note: typescript has more than one config file, namely: tsconfig.json, tsconfig.app.json, and tsconfig.node.json. Initially, the “compilerOptions” option key wasn’t defined in the original tsconfig but in the other 2 files instead. So I duplicated it to include the alias config in the original file.

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "files": [],
  "references": [
    {
      "path": "./tsconfig.app.json"
    },
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

// vite.config.ts
import path from "path";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});

Theme wordpress giá rẻ Theme wordpress giá rẻ Thiết kế website

LEAVE A COMMENT