Resolving Absolute Paths to Relative Paths in a Library Build with Vite | Vite Land | Page 1

Hello everyone,

I'm currently working on a TypeScript library using Vite, and I'm facing an issue related to path resolution. In my source code, I'm using absolute paths,
like: @/components, @/theme/components/button.
after building the paths should look like:

import { ButtonVariantProps } from "../../theme/components/button";
import { Icon, Loading } from "../../components";
import { useButton } from "../../components/button/use-button";

However, when I build my library, these paths remained the same, which causes issues when I try to use the library in other projects because they can't resolve these paths.
Here is my build script:

import react from "@vitejs/plugin-react";
import path from "node:path";
import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import tsconfigPaths from "vite-tsconfig-paths";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      react(),
      dts({
        insertTypesEntry: true
      }),
      tsconfigPaths()
    ],
    build: {
      lib: {
        entry: path.resolve(__dirname, "src/index.tsx"),
        name: "ABJAD",
        formats: ["es", "umd"],
        fileName: (format) => `abjad.${format}.js`
      },
      rollupOptions: {
        external: ["react", "react-dom"],
        output: {
          globals: {
            react: "React",
            "react-dom": "ReactDOM"
          }
        }
      }
    }
  };
});

I need a way to have these paths resolved to relative paths when building the library.

Does anyone know how to resolve this issue, or is there a plugin that can help with this? Any help would be greatly appreciated.

Thank you!

#Resolving Absolute Paths to Relative Paths in a Library Build with Vite