How to add local module declaration to generated types?

Hi,

I’m using this tool in my project which is also using the react-table package. The types of this package are published separately to the DefinitelyTyped repo.

However, the types of the react-table aren’t ready to use: you need to create your own react-table.d.ts file inside of your project where you specify all of the hooks you’re using. Now my problem is that I can’t get the dts-bundle-generator to add the react-table.d.ts file to my output causing the build to fail. This is what I’m seeing:

src/app/components/organisms/Table/Paginator/Paginator.tsx(46,22): error TS2339: Property 'pageIndex' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(46,33): error TS2339: Property 'pageSize' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(68,22): error TS2339: Property 'pageIndex' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(68,33): error TS2339: Property 'pageSize' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(83,13): error TS2339: Property 'pageIndex' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(83,24): error TS2339: Property 'pageSize' does not exist on type 'TableState<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(95,38): error TS2339: Property 'setPageSize' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(117,38): error TS2339: Property 'gotoPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(135,51): error TS2339: Property 'canPreviousPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(136,53): error TS2339: Property 'gotoPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(142,47): error TS2339: Property 'canPreviousPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(143,49): error TS2339: Property 'previousPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(148,47): error TS2339: Property 'canNextPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(149,49): error TS2339: Property 'nextPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(155,51): error TS2339: Property 'canNextPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(156,53): error TS2339: Property 'gotoPage' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Paginator/Paginator.tsx(156,71): error TS2339: Property 'pageCount' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(44,91): error TS2339: Property 'page' does not exist on type 'TableInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(69,13): error TS2322: Type 'boolean | ((instance: TableInstance<{}>) => boolean)' is not assignable to type 'boolean'.
  Type '(instance: TableInstance<{}>) => boolean' is not assignable to type 'boolean'.
src/app/components/organisms/Table/Table.tsx(96,60): error TS2339: Property 'hasCellPadding' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(99,70): error TS2339: Property 'getSortByToggleProps' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(100,55): error TS2339: Property 'canSort' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(106,67): error TS2339: Property 'isSorted' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(107,57): error TS2345: Argument of type 'ColumnInstance<{}>' is not assignable to parameter of type 'UseSortByColumnProps<object>'.
  Type 'ColumnInstance<{}>' is missing the following properties from type 'UseSortByColumnProps<object>': canSort, toggleSortBy, getSortByToggleProps, clearSortBy, and 3 more.
src/app/components/organisms/Table/Table.tsx(131,69): error TS2339: Property 'hasCellPadding' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(132,74): error TS2339: Property 'onClick' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(134,62): error TS2339: Property 'onClick' does not exist on type 'ColumnInstance<{}>'.
src/app/components/organisms/Table/Table.tsx(137,61): error TS2339: Property 'onClick' does not exist on type 'ColumnInstance<{}>'.

If I remove the react-table.d.ts file and run tsc to do a types check these are the exact errors I’m getting.

This are the contents of my tsconfig.json:

{
    "compilerOptions": {
        "allowJs": false,
        "allowSyntheticDefaultImports": true,
        "esModuleInterop": true,
        "forceConsistentCasingInFileNames": true,
        "jsx": "react",
        "module": "ES2015",
        "moduleResolution": "node",
        "noEmit": true,
        "noImplicitAny": true,
        "noUnusedLocals": true,
        "resolveJsonModule": true,
        "target": "ESNext",
        "types": [
            "node"
        ],
    },
    "include": [
        "src/@types/react-table.d.ts", // I just added this line to try to get it working
        "src/**/*",
        "src/.storybook/**/*"
    ]
}

Contents of dtsconfig.json:

{
    "compilationOptions": {
        "preferredConfigPath": "./tsconfig.dts.json"
    },
    "entries": [
        {
            "filePath": "./src/lib/index.ts",
            "outFile": "./index.d.ts",
            "libraries": {
                "allowedTypesLibraries": [
                    "react",
                    "styled-components"
                ],
                "importedLibraries": [
                    "moment",
                    "react-dates"
                ]
            },
            "output": {
                "sortNodes": true,
                "umdModuleName": "DexelsUIKit"
            }
        }
    ]
}

If you need any more information please let me know. Our team has been stuck for over a week now trying to figure out this issue and it’s completely blocking our workflow since we can’t publish new versions of our package anymore.

Thanks in advance!

[timocov]

Hi there,

these errors are caused because you don’t provide the compiler information about which types you need to load in specific files to being compiled. I meant, that for the compiler it’s enough to src/@types/react-table.d.ts as include value to get the project compiled, but dts-bundle-generator doesn’t use that value at all, because it uses the only input filed you’ve specified. I can’t tell you what approach are better, but I’d suggest you import that file (src/@types/react-table.d.ts) directly in every file uses it. You can do it, for example, via triple-slash directive: /// <reference path="path/to/src/@types/react-table.d.ts" />. Also, you can try to specify types compiler option (see https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types). I’d say that if you’ll try to compile, for instance, the only src/app/components/organisms/Table/Table.tsx file it won’t be compiled due the same error, because the compiler don’t know which files it needs to load additionally - that’s why I’d suggest to use reference path way (also you could use <reference types="" />, but in this case you need to specify typesRoot as well).

So, to fix it try to add <reference path="../../../../../@types/react-table.d.ts" /> to src/app/components/organisms/Table/Paginator/Paginator.tsx, and <reference path="../../../../@types/react-table.d.ts" /> to src/app/components/organisms/Table/Table.tsx (I’m not sure about count of exits ../ but you can play with them 😂).

[daviddelusenet]

@timocov thanks for super quick response! I only needed to add <reference path="../../../../../@types/react-table.d.ts" / to my Table.tsx file and my builds started working again.

Since the project already contained a types.ts file which contains some types which are used throughout the project I decided to do the reference there.

Thank you so much! 😄