Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Jcanno opened this issue Jul 6, 2021 · 3 comments
Closed

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

Jcanno opened this issue Jul 6, 2021 · 3 comments
Labels
kind: support Asking for support with something or a specific use case problem: no repro No reproduction was provided (and have not tried to repro without one) problem: stale Issue has not been responded to in some time scope: integration Related to an integration, not necessarily to core (but could influence core) scope: Vite Related to integration with Vite, not Rollup, which this plugin was designed for solution: invalid This doesn't seem right solution: unresolved Issue has been closed by OP but root cause has not necessarily been resolved solution: workaround available There is a workaround available for this issue topic: monorepo / symlinks Related to monorepos and/or symlinks (Lerna, Yarn, PNPM, Rush, etc)

Comments

@Jcanno
Copy link

Jcanno commented Jul 6, 2021

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
Copy link
Author

Jcanno commented Jul 7, 2021

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?

@Jcanno Jcanno closed this as completed Jul 13, 2021
@agilgur5 agilgur5 added solution: unresolved Issue has been closed by OP but root cause has not necessarily been resolved solution: workaround available There is a workaround available for this issue labels May 17, 2022
@agilgur5 agilgur5 changed the title export miss props type in .d.ts file with vite export miss props type in .d.ts file with Vite and monorepo May 27, 2022
@agilgur5 agilgur5 added the topic: monorepo / symlinks Related to monorepos and/or symlinks (Lerna, Yarn, PNPM, Rush, etc) label May 27, 2022
@agilgur5 agilgur5 added the problem: no repro No reproduction was provided (and have not tried to repro without one) label May 29, 2022
@agilgur5
Copy link
Collaborator

@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
Copy link
Collaborator

agilgur5 commented Jun 8, 2022

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

@agilgur5 agilgur5 added the problem: stale Issue has not been responded to in some time label Jun 22, 2022
@agilgur5 agilgur5 added solution: invalid This doesn't seem right kind: support Asking for support with something or a specific use case scope: integration Related to an integration, not necessarily to core (but could influence core) labels Jul 30, 2022
@agilgur5 agilgur5 added the scope: Vite Related to integration with Vite, not Rollup, which this plugin was designed for label Jul 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
kind: support Asking for support with something or a specific use case problem: no repro No reproduction was provided (and have not tried to repro without one) problem: stale Issue has not been responded to in some time scope: integration Related to an integration, not necessarily to core (but could influence core) scope: Vite Related to integration with Vite, not Rollup, which this plugin was designed for solution: invalid This doesn't seem right solution: unresolved Issue has been closed by OP but root cause has not necessarily been resolved solution: workaround available There is a workaround available for this issue topic: monorepo / symlinks Related to monorepos and/or symlinks (Lerna, Yarn, PNPM, Rush, etc)
Projects
None yet
Development

No branches or pull requests

2 participants