Try implementing path aliases again

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     browser: true,
     commonjs: true,
     es6: true,
+    node: true,
   },
 
   // Base config

package.json

@@ -99,6 +99,7 @@
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "^3.4.1",
     "tailwindcss-animate": "^1.0.7",
+    "tsc-alias": "^1.8.8",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
     "vite": "^4.5.1"

rollup.config.mjs

@@ -1,15 +1,24 @@
 import { babel } from "@rollup/plugin-babel"
 import commonjs from "@rollup/plugin-commonjs"
-import resolve from "@rollup/plugin-node-resolve"
+import { nodeResolve } from "@rollup/plugin-node-resolve"
 import terser from "@rollup/plugin-terser"
 import typescript from "@rollup/plugin-typescript"
 import { createRequire } from "node:module"
 import { dts } from "rollup-plugin-dts"
 import peerDepsExternal from "rollup-plugin-peer-deps-external"
+import { exec } from "node:child_process"
+import { promisify } from "node:util"
 
 const requireFile = createRequire(import.meta.url)
 const packageJson = requireFile("./package.json")
 
+// Resolve typescript aliases
+const tscAlias = () => ({
+  buildStart: async () => {
+    await promisify(exec)("tsc-alias")
+  },
+})
+
 export default [
   {
     input: "src/index.ts",
@@ -28,10 +37,10 @@ export default [
     ],
     plugins: [
       peerDepsExternal(),
-      resolve(),
+      typescript(),
+      nodeResolve(),
       commonjs(),
       terser(),
-      typescript(),
       babel({
         babelHelpers: "bundled",
         extensions: [".ts", ".tsx"],
@@ -43,6 +52,6 @@ export default [
   {
     input: "dist/index.d.ts",
     output: [{ file: "dist/index.d.ts", format: "es" }],
-    plugins: [dts()],
+    plugins: [tscAlias(), dts()],
   },
 ]

src/ui/AvatarGroup/AvatarGroup.tsx

@@ -1,11 +1,11 @@
 import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from "react"
 import { forwardRef } from "react"
 
-import type { AvatarElement, AvatarProps } from "../Avatar"
-import { Avatar } from "../Avatar"
-import type { avatarVariants } from "../Avatar/Avatar.variants"
-import { type VariantProps, cx } from "../../shared/cva"
-import { isReactElement } from "../../shared/helpers"
+import { type VariantProps, cx } from "~/shared/cva"
+import { isReactElement } from "~/shared/helpers"
+import type { AvatarElement, AvatarProps } from "~/ui/Avatar"
+import { Avatar } from "~/ui/Avatar"
+import type { avatarVariants } from "~/ui/Avatar/Avatar.variants"
 
 import { avatarGroupItemVariants, avatarGroupVariants } from "./AvatarGroup.variants"
 

src/ui/AvatarGroup/AvatarGroup.variants.ts

@@ -1,4 +1,4 @@
-import { cva } from "../../shared/cva"
+import { cva } from "~/shared/cva"
 
 export const avatarGroupVariants = cva({
   base: "flex flex-wrap items-center gap-y-1",

tsconfig.json

@@ -20,7 +20,12 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "~/*": [
+        "./src/*"
+      ]
+    }
   },
   "include": [
     "src"

vite.config.js

@@ -1,10 +1,12 @@
 import react from "@vitejs/plugin-react"
 import { defineConfig } from "vite"
+import path from "path"
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   resolve: {
+    alias: { "~": path.resolve(__dirname, "./src") },
     extensions: [".mdx", ".mjs", ".ts", ".tsx", ".js", ".jsx"],
   },
 })