'Rollup & Typescript type declarations with absolute imports

I'm making React component library. Project structure is something like:

src/
   components/
   utils/
   hooks/

Now I'm trying to generate types (.d.ts.) files using rollup. Types are generated but e.g. my component NumberInput is using absolute import from Input component like so:

import Input from "components/Input/Input";

Now imports in NumberInput.d.ts look exactly the same:

import Input from "components/Input/Input";

But now those imports in d.ts files are not gonna be resolved since there is no tsconfig.json for generated code (I Guess).

tsconfig.json

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "declaration": true,
    "esModuleInterop": true,
    "baseUrl": "src/",
    "paths": {
      "components/*": ["components/*"],
      "models/*": ["hooks/*"],
      "utils/*": ["utils/*"]
    }
  },
  "exclude": ["node_modules", "build", "dist", "scripts", "acceptance-tests", "webpack", "jest"],
  "types": ["typePatches"]
}

rollup.config.js

export default {
  input: [
    "./src/index.ts",
    ...getFiles("./src/components", extensions),
    ...getFiles("./src/hooks", extensions),
    ...getFiles("./src/utils", extensions)
  ],
  output: [
    {
      dir: "dist",
      format: "esm",
      sourcemap: true
    }
  ],
  external: ["react", "react-dom", "styled-components"],
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      tsconfig: "./tsconfig.build.json",
      declaration: true,
      declarationDir: "dist"
    }),
    image(),
    url({
      include: ["**/*.woff2"],
      limit: Infinity
    }),
    css(),
    terser()
  ],
  external: ["react", "react-dom", "styled-components"]
};

Is there any way I can control absolute imports when types are being generated? I wanna use absolute imports inside my project, but when types are generated I rly don't care how they look as long as they work.

Solution 1:^[1]

The best working solution imo is nicely summed up in this article by using rollup-plugin-dts.

In plugin you can pass compilerOptions parameter, with basePath and paths so it will correctly resolve absolute imports of type declarations.
rollup.config.ts file:

...
 plugins: [
      dts({
        compilerOptions: {
          baseUrl: tsConfig.compilerOptions.baseUrl,
          paths: tsConfig.compilerOptions.paths,
        },
      }),
    ],
...

Solution 2:^[2]

You have told typescript for files, but rollup does not know how to actually resolve rollup will look in home folder if you write components/a.ts

There is a plugin for rollup @rollup/plugin-alias

plugins: [
    alias({
      entries: [
        { find: 'components', replacement: 'your path to components folder' },
      ]
    })
  ]

EDIT

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2

'Rollup & Typescript type declarations with absolute imports

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]