export miss props type in `.d.ts` file with Vite and monorepo

[Jcanno]

What happens and why it is wrong

I am going to develop react components with vite and in monorepo mode.
When I build a react component the .d.ts file generate successfully, but the type of the component props goes any instead of what I set in component source code.
And I run tsc src/index.tsx --declaration --emitDeclarationOnly --jsx react --esModuleInterop --outDir types it works correct. here .d.ts output:

rollup-plugin-typescript2:

import React from "react";
declare function BaseSelect(props: any): React.FunctionComponentElement<any>;
export default BaseSelect;

tsc:

import React from 'react';
import { SelectProps } from 'antd/lib/select';
export declare type OptionValueType = string | number;
export interface SelectOptionType {
    key?: string;
    value?: OptionValueType;
    label?: string;
    disabled?: boolean;
    children?: React.ReactChild;
    [key: string]: any;
}
export interface BaseSelectProps<VT> extends Omit<SelectProps<VT>, 'options'> {
    optionLabelAlias?: string;
    optionValueAlias?: string;
    options: SelectOptionType[];
}
declare function BaseSelect<VT extends OptionValueType = OptionValueType>(props: BaseSelectProps<VT>): JSX.Element;
export default BaseSelect;

Versions

rollup-plugin-typescript2: ^0.30.0 => 0.30.0 
typescript: 3.8.3 => 3.8.3 

vite.config.js

`vite.config.js`:

import { defineConfig } from 'vite'
import typescript from 'rollup-plugin-typescript2'
import path from 'path'
import reactRefresh from '@vitejs/plugin-react-refresh'

const cwd = process.cwd()
const entry = `${cwd}/src/index.tsx`
const name = path.basename(cwd)

export default defineConfig({
  build: {
    minify: false,
    lib: {
      entry,
      name,
    },
    rollupOptions: {
      external: ['react', /antd/, /@ant-design/, 'axios'],
      output: [
        {
          format: 'cjs',
          assetFileNames: 'css/main.[ext]',
          exports: 'named',
        },
        {
          format: 'es',
          assetFileNames: 'css/main.[ext]',
          exports: 'named',
        },
      ],
      plugins: [
        typescript({
          useTsconfigDeclarationDir: true,
          tsconfigOverride: {
            compilerOptions: {
              declarationDir: path.resolve(cwd, './types'),
            },
            include: [path.resolve(cwd, './src')],
          },
        }),
      ],
    },
  },
  plugins: [reactRefresh()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
})

tsconfig.json

`tsconfig.json`:

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": true,
    "declaration": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
  }
}

plugin output with verbosity 3

plugin output with verbosity 3:

rpt2: built-in options overrides: {
    "noEmitHelpers": false,
    "importHelpers": true,
    "noResolve": false,
    "noEmit": false,
    "inlineSourceMap": false,
    "outDir": "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/node_modules/.cache/rollup-plugin-typescript2/placeholder",
    "moduleResolution": 2,
    "allowNonTsExtensions": true
}
rpt2: parsed tsconfig: {
    "options": {
        "target": 99,
        "lib": [
            "lib.dom.d.ts",
            "lib.dom.iterable.d.ts",
            "lib.esnext.d.ts"
        ],
        "allowJs": false,
        "skipLibCheck": false,
        "esModuleInterop": true,
        "declaration": true,
        "allowSyntheticDefaultImports": true,
        "forceConsistentCasingInFileNames": true,
        "module": 99,
        "moduleResolution": 2,
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": false,
        "jsx": 2,
        "declarationDir": "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/types",
        "configFilePath": "/Users/liqing/Desktop/boss-react-components/tsconfig.json",
        "noEmitHelpers": false,
        "importHelpers": true,
        "noResolve": false,
        "inlineSourceMap": false,
        "outDir": "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/node_modules/.cache/rollup-plugin-typescript2/placeholder",
        "allowNonTsExtensions": true
    },
    "fileNames": [
        "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src/index.tsx"
    ],
    "typeAcquisition": {
        "enable": false,
        "include": [],
        "exclude": []
    },
    "raw": {
        "compilerOptions": {
            "target": "ESNext",
            "lib": [
                "DOM",
                "DOM.Iterable",
                "ESNext"
            ],
            "allowJs": false,
            "skipLibCheck": false,
            "esModuleInterop": true,
            "declaration": true,
            "allowSyntheticDefaultImports": true,
            "forceConsistentCasingInFileNames": true,
            "module": "ESNext",
            "moduleResolution": "Node",
            "resolveJsonModule": true,
            "isolatedModules": true,
            "noEmit": true,
            "jsx": "react",
            "declarationDir": "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/types"
        },
        "include": [
            "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src"
        ],
        "compileOnSave": false
    },
    "errors": [],
    "wildcardDirectories": {
        "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src": 1
    },
    "compileOnSave": false,
    "configFileSpecs": {
        "includeSpecs": [
            "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src"
        ],
        "excludeSpecs": [
            "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/types"
        ],
        "validatedIncludeSpecs": [
            "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src"
        ],
        "validatedExcludeSpecs": [
            "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/types"
        ],
        "wildcardDirectories": {
            "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src": 1
        }
    }
}
rpt2: typescript version: 3.8.3
rpt2: tslib version: 2.1.0
rpt2: rollup version: 2.51.1
rpt2: rollup-plugin-typescript2 version: 0.30.0
rpt2: plugin options:
{
    "useTsconfigDeclarationDir": true,
    "tsconfigOverride": {
        "compilerOptions": {
            "declarationDir": "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/types"
        },
        "include": [
            "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src"
        ]
    },
    "verbosity": 3,
    "check": true,
    "clean": false,
    "cacheRoot": "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/node_modules/.cache/rollup-plugin-typescript2",
    "include": [
        "*.ts+(|x)",
        "**/*.ts+(|x)"
    ],
    "exclude": [
        "*.d.ts",
        "**/*.d.ts"
    ],
    "abortOnError": true,
    "rollupCommonJSResolveHack": false,
    "transformers": [],
    "tsconfigDefaults": {},
    "objectHashIgnoreUnknownHack": false,
    "cwd": "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select",
    "typescript": "version 3.8.3"
}
rpt2: rollup config:
{
    "input": "/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src/index.tsx",
    "preserveEntrySignatures": "strict",
    "external": [
        "react",
        {},
        {},
        {},
        "axios"
    ],
    "output": [
        {
            "format": "cjs",
            "assetFileNames": "css/main.[ext]",
            "exports": "named"
        },
        {
            "format": "es",
            "assetFileNames": "css/main.[ext]",
            "exports": "named"
        }
    ],
    "plugins": [
        {
            "name": "alias"
        },
        {
            "name": "react-refresh",
            "enforce": "pre"
        },
        {
            "name": "vite:dynamic-import-polyfill"
        },
        {
            "name": "vite:resolve"
        },
        {
            "name": "vite:html"
        },
        {
            "name": "vite:css"
        },
        {
            "name": "vite:esbuild"
        },
        {
            "name": "vite:json"
        },
        {
            "name": "vite:wasm"
        },
        {
            "name": "vite:worker"
        },
        {
            "name": "vite:asset"
        },
        {
            "name": "vite:define"
        },
        {
            "name": "vite:css-post"
        },
        {
            "name": "vite:build-html"
        },
        {
            "name": "commonjs"
        },
        {
            "name": "vite:data-uri"
        },
        {
            "name": "rollup-plugin-dynamic-import-variables"
        },
        {
            "name": "rpt2"
        },
        {
            "name": "vite:import-analysis"
        },
        {
            "name": "vite:esbuild-transpile"
        },
        {
            "name": "vite:reporter"
        }
    ]
}
rpt2: tsconfig path: /Users/liqing/Desktop/boss-react-components/tsconfig.json
rpt2: included:
[
    "*.ts+(|x)",
    "**/*.ts+(|x)"
]
rpt2: excluded:
[
    "*.d.ts",
    "**/*.d.ts"
]
rpt2: Ambient types:
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/anymatch/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/babel__core/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/babel__generator/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/babel__template/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/babel__traverse/ts4.1/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/eslint-visitor-keys/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/estree/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/glob/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/graceful-fs/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/html-minifier-terser/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/istanbul-lib-coverage/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/istanbul-lib-report/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/istanbul-reports/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/jest/ts3.2/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/json-schema/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/lodash/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/minimatch/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/minimist/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/node/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/normalize-package-data/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/parse-json/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/prettier/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/prop-types/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/q/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/react/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/react-dom/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/scheduler/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/source-list-map/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/stack-utils/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/tapable/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/uglify-js/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/webpack/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/webpack-sources/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/yargs/index.d.ts
rpt2:     /Users/liqing/Desktop/boss-react-components/node_modules/@types/yargs-parser/index.d.ts
rpt2: transpiling '/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src/index.tsx'
rpt2:     cache: '/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/node_modules/.cache/rollup-plugin-typescript2/rpt2_d020df83515ced9be6a7e7409761c040b40c97be/code/cache/922d8c7dd9a95c9d547e6a4b9b069a2a69b3e69f'
rpt2:     cache hit
rpt2:     cache: '/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/node_modules/.cache/rollup-plugin-typescript2/rpt2_d020df83515ced9be6a7e7409761c040b40c97be/syntacticDiagnostics/cache/922d8c7dd9a95c9d547e6a4b9b069a2a69b3e69f'
rpt2:     cache hit
rpt2:     cache: '/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/node_modules/.cache/rollup-plugin-typescript2/rpt2_d020df83515ced9be6a7e7409761c040b40c97be/semanticDiagnostics/cache/922d8c7dd9a95c9d547e6a4b9b069a2a69b3e69f'
rpt2:     cache hit
rpt2: generated declarations for '/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src/index.tsx'
transforming...
✓ 1 modules transformed.
rendering chunks...
rpt2: generating target 1
rpt2: rolling caches
rpt2: emitting declarations for '/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src/index.tsx' to '/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/types/index.d.ts'
dist/boss-base-select.cjs.js   2.42kb / brotli: 0.79kb
rpt2: generating target 2
rpt2: rolling caches
rpt2: emitting declarations for '/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/src/index.tsx' to '/Users/liqing/Desktop/boss-react-components/packages/boss-base-select/types/index.d.ts'
dist/boss-base-select.es.js   2.08kb / brotli: 0.66kb

[Jcanno]

I have some tries on this issue.
fist config：

typescript({
          useTsconfigDeclarationDir: true,
          tsconfigOverride: {
            compilerOptions: {
              declarationDir: path.resolve(cwd, './types'),
            },
            include: [path.resolve(cwd, './src')],
          },
 }),

then I move include option to out instead tsconfigOverride

typescript({
          useTsconfigDeclarationDir: true,
          tsconfigOverride: {
            compilerOptions: {
              declarationDir: path.resolve(cwd, './types'),
            },
          },
          include: [path.resolve(cwd, './src')],
 }),

It works bad, this will generator all components' type not single one, finally, I declare include both in plugin and tsconfigOverride.

typescript({
          useTsconfigDeclarationDir: true,
          tsconfigOverride: {
            compilerOptions: {
              declarationDir: path.resolve(cwd, './types'),
            },
            include: [path.resolve(cwd, './src')],
          },
          include: [path.resolve(cwd, './src')],
 }),

Then it works correctly!!! But it confuses me a lot. why I need to declare twice include.Is this a bug or I need to config like this exactly. Somebody help?

[agilgur5]

@Jcanno any chance you have a minimal reproduction of this? Hard to tell what the root cause might be without a repro.

I've been investigating and fixing all of the monorepo issues in this repo recently, so would like to see if I've fixed this one too now.
#330 had a similar error.
#216 seemed related to in that it would've required changes to include in older rpt2, but you were on rpt2 0.30.0, so that should work with files outside the project root actually (which I'm not sure you were trying to do anyway).

Then it works correctly!!! But it confuses me a lot. why I need to declare twice include.Is this a bug or I need to config like this exactly. Somebody help?

Off the top of my head, these two includes work a bit differently. The plugin's include option (the outer one) tells the plugin if a certain file that Rollup loads should be parsed or not. Versus the tsconfig include basically tells us what to type-check and produce declarations for. They don't completely overlap right now and it is a bit confusing, even to me.

then I move include option to out instead tsconfigOverride

// code omitted for readability

It works bad, this will generator all components' type not single one, finally, I declare include both in plugin and tsconfigOverride.

// code omitted for readability

Notably, tsconfig has a default include, **. So when you remove it from the tsconfigOverride, you're actually setting it back to the default, which has a wider scope and hence generates more declarations.

So the tsconfigOverride include is necessary if you want to limit declaration generation.
The plugin's, outer include being required could be a bug or something, I can't really tell without a repro.

[agilgur5]

So the double include issue should be fixed by #347, which narrows the declaration generation (as specified by tsconfig (inner) include/exclude) with the plugin (outer) include/exclude

The missing props type is a bit confusing though, and still might be due to #330, which was fixed by #332.

It could also be because of Vite's out-of-the-box TypeScript support with esbuild. To get rpt2 to work with Vite, normally you have to disable esbuild for TS files, i.e. configuring esbuild: { exclude: /\.tsx?$/ }, or running rpt2 before esbuild with enforce: 'pre'.
Without disabling esbuild or re-ordering, rpt2 could be reading compiled, untyped JS files instead of the raw TS, in which case, lacking typings could definitely occur.

Would really need a minimal repro to test with, especially as index.ts was not provided. A repro environment can be forked here