Declaration generated in wrong folder when using object as `input` (multi-entry)

What happens and why it is wrong

Possibly this is a misconfiguration on my end, but it looks like a bug. When you use an object as the input property for the rollup configuration, the typings file for the input files are generated in the root folder of the repo (same folder as the rollup config file) and not the target output directory (here, ./dist) along with the bundled JS file.

Versions

• typescript: 3.2.4
• rollup: 1.1.2
• rollup-plugin-typescript2: 0.19.2

rollup.config.js

{
    ...
    input: {
        Lib1: './src/Lib1.tsx',
        Lib2: './src/Lib2.tsx'
    },
    output: {
        dir: './dist',
        format: 'cjs',
        sourcemap: true,
        entryFileNames: '[name].js'
    }
}

tsconfig.json

{
  ...
  "compilerOptions": {
    "outDir": "./dist"
  },
}

Result:

// These files are created
./Lib1.d.ts
./Lib2.d.ts

// instead of (expected):
./dist/Lib1.d.ts
./dist/Lib2.d.ts

Curiously, if you enter entryFileNames: 'dist/[name].js' it creates a superfluous subfolder called dist within the dist folder and creates them there.

[maranomynet]

Yup. that seems to be the only way unless you let tsc do the bundling end-to-end. These rollup plugins seem to be effecively asking tsc to do two different tasks:

1. “Type-check and convert all these individual modules to JavaScript” and let me (i.e. Rollup) do the bundling and writing to disk.
2. “Make all the declarations for this TS project folder and dump them over there.”

The results of 1 and 2 don’t, and can’t match when you’re using an “input map” and code-splitting, etc. – AFAICT.

…unless you make the rollup plugin a whole lot more involved in the type-declaration generation process.

[waleeedahmed]

For any struggling soul out there that has the same src folder structure as @maranomynet and me.

I came across a quick fix for it, may be another ugly way but works for me.

I’m using rollup-plugin/typescript2 so I’ll go with its config in this answer: Define your own declarationDir in your tsconfig.json so your project can dump all *.d.ts files in its own path in the bundled dist. And make sure to set the useTsConfigDeclarationDir to true in your typescript plugin in rollup config file. Also, where you define the output paths for your individual component bundles in your rollup.config.js (and package.json), change those paths to be the same as your ‘declarationDir’ + ‘how your src component route is’. So if your component in src is like:

src/homepage/foo.tsx

And your declarationDir is:

dist/MyDeclarationDir

So your output path needs to be like:

dist/MyDeclarationDir/homepage/foo.js

This way, rollup will include your types in the same directory as your component main.js and your TS consumer project will pick up the typings.

So the bundle will look something like:

dist/

    declarationDirPath/
                  component1/
                        foo.js/
                              foo.js
                              foo.map.js
                        foo.d.ts
                   component2/
                        bar.js/
                               bar.js
                               bar.map.js
                        bar.d.ts