Since 1.0, this plugin is incompatible with vite-tsconfig-paths

[dhess]

Hi,

The vite-tsconfig-paths plugin allows you to use TypeScript's path mapping feature without any additional vite.config.ts configuration. In other words, you can use nice "@/foo/bar" style imports with just the tsconfig.json configuration shown here in your own example:

vite-plugin-dts/example/tsconfig.json

Line 16 in 26c6ffe

"@/*": ["./*"],

and with the vite-tsconfig-paths plugin, you can remove the redundant alias configuration in vite.config.ts; i.e., this bit can be removed:

vite-plugin-dts/example/vite.config.ts

Line 10 in 26c6ffe

resolve: {

Prior to version 1.0 of this plugin, this plugin and the vite-tsconfig-paths plugin worked together.

Since version 1.0 of this plugin, this combination no longer works. None of my "@/foo/bar" imports resolve in the .d.ts files generated by this plugin, and it's necessary to add the alias configuration again in vite.config.ts, which defeats the point of the vite-tsconfig-paths plugin.

[qmhc]

Only one different (a breaking change) between v1.0 and v0.9.10: extract a entryRoot option from 'root' option of calculating relative paths when write files.

About the limitation of working together with vite-tsconfig-paths see #60. The dts plugin cannot transform the alias paths in the emitted files when without resolve.alias options (version independent).

It may be some other reasons to make this issue, could you provide a reproduce repo? We can discuss some others workaround.

This also bothers me in recent period that how to get aliases info and transform the alias paths outside the resolve.alias options.

[dhess]

I see. I suppose, then, that our configuration "just worked" (by happy coincidence) prior to 1.0 because vite-plugin-dts was putting the generated .d.ts files from our src into dist/src, whereas after 1.0 it puts them in dist.

I confess that I don't understand the documentation for entryRoot. How can I use it to put the .d.ts files into dist/src again? The relevant bit of package.json is:

  "module": "./dist/index.es.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.es.js"
    },
    "./style.css": "./dist/style.css"
  },

Our tsconfig.json is:

{
  "compilerOptions": {
    "composite": true,
    "declaration": true,
    "declarationDir": "./dist",
    "declarationMap": true,
    "sourceMap": true,
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "allowUnreachableCode": false,
    "allowUnusedLabels": false,
    "alwaysStrict": true,
    "exactOptionalPropertyTypes": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitOverride": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noPropertyAccessFromIndexSignature": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "plugins": [
      {
        "name": "typescript-eslint-language-service"
      }
    ],
    "types": ["@honkhonk/vite-plugin-svgr/client"],
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["./src"]
}

and our vite.config.ts is:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "@honkhonk/vite-plugin-svgr";
import checker from "vite-plugin-checker";
import dts from "vite-plugin-dts";
import path from "path";
import tsconfigPaths from "vite-tsconfig-paths";
import OptimizationPersist from "vite-plugin-optimize-persist";
import PkgConfig from "vite-plugin-package-config";
import { name, version } from "./package.json";

// https://vitejs.dev/config/
export default defineConfig({
  // Recent versions of the vite-plugin-dts plugin require this. See:
  // https://github.com/qmhc/vite-plugin-dts/issues/70
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    }
  },
  plugins: [
    checker({
      typescript: true,
    }),
    dts({
      insertTypesEntry: true,
    }),
    react(),
    svgr(),
    tsconfigPaths(),
    PkgConfig(),
    OptimizationPersist(),
  ],

  // Don't write to node_modules, in case someday we can get it from Nix.
  cacheDir: ".vite",

  // This is a workspace, so we need to be able to serve node_modules
  // from the project root in dev mode.
  server: {
    fs: {
      allow: ["../.."],
    },
  },

  build: {
    sourcemap: true,

    // Library mode settings.
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: name,
      formats: ["es"],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      // XXX dhess: do we need to add Tailwind UI deps here?
      external: ["react", "react-dom", "react-router-dom"],
    },
  },

  define: {
    pkgJson: { name, version },
  },
});

The resolve: {...} config in vite.config.ts is the bit that we did not need before 1.0.

[qmhc]

You can try to add entryRoot option if your dir structure like the following:

root(entryRoot)/
 ├ src/
 └ vite.config.ts

dts({
  entryRoot: path.resolve(__dirname),
  insertTypesEntry: true
})

For example, here is a emitted file {entryRoot}/src/foo/baz.d.ts (entryRoot is be included in root before v1.0), outputDir is {root}/dist, when calculating the output path, the relative path of emitted file and entryRoot will be calculated first (./src/foo/baz.d.ts), and then resolve the relative path with output dir ({root}/dist/src/foo/baz.d.ts).

After v1.0, if entryRoot not set, the plugin will parse the shortest public path as its value (if all emitted file paths are under src, the src will be the entryRoot), see #59.

[dhess]

Ahh, thanks. I was using just plain "src" but that was resolving from the root of the monorepo. I will try this and report back.

[danielkv]

any update on this? Could not make it work. It's still generating the declarations like this:

export { default as Filter } from '@templates/Filter';
export type { IFilter, IFilterPayload } from '@common/interfaces/filter';

the @common and @templates should be resolved

[SupremeTechnopriest]

Just ran into this issue as well. Has anyone found a work around?

[qmhc]

Could try https://github.com/DerYeger/yeger/tree/main/packages/vite-plugin-lib.

[Jack-Barry]

I got this to work in our project with the following settings:

viteDts({
  entryRoot: 'src',
  tsconfigPath: resolve(__dirname, 'tsconfig.build.json'),
  // was already using the above settings
  compilerOptions: {
    baseUrl: '.' // secret sauce, could go in your actual tsconfig too probably
  }
})

Figured out this was missing by taking a peek here:

vite-plugin-dts/src/plugin.ts

Lines 284 to 300 in 9262d01

	if (pathsToAliases && baseUrl && paths) {
	const basePath = ensureAbsolute(baseUrl, configPath ? dirname(configPath) : root)
	const existsFinds = new Set(
	aliases.map(alias => alias.find).filter(find => typeof find === 'string')
	)
	for (const [findWithAsterisk, replacements] of Object.entries(paths)) {
	const find = findWithAsterisk.replace('/*', '')
	if (!replacements.length || existsFinds.has(find)) continue
	aliases.push({
	find,
	replacement: ensureAbsolute(replacements[0].replace('/*', ''), basePath)
	})
	}
	}

This plugin won't write the updated aliased paths without baseUrl being present.