Why some types from my library don't autocomplete when using in a project

Viewed 39

I have my own library where I have my basic components as inputs, containers, etc.

The library bundles in my project same as any 3rd party library. The problem is that when using it in my project, the types which are imported from another file in the library don't autocomplete but if I define all the types within the same file which I export the component they autocomplete correctly.

Seems like it is not resolving the types when they are not in the same file. They resolve well within the library but not in the exported bundle.

For example, The following works well:

interface IInputProps{ ......}

const input=({inputProps:IInputProps})=>.....

The following works well in the library but does not autocomplete the types:

 import {IInputProps} from './Types'

 const input=({inputProps:IInputProps})=>....

Any idea?

This is my tsconfig.json in my library:

 {
  "compilerOptions": {
    "baseUrl": "src",
    "lib": ["dom", "dom.iterable", "esnext", "es5"],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "jsx": "react-jsx",
    "outDir": "dist/library",
    "sourceMap": true,
    "declaration": true,
    "strictNullChecks": true,
    "noImplicitAny": false,
    "downlevelIteration": true,
    "types": ["node", "lodash", "jest", "sortablejs"],
    "typeRoots": [
      "src/typings/*.d.ts",
      "node_modules/@types",
      "node_modules/ui-lib/src/typings/*.d.ts",
      "node_modules/jest-canvas-mock/types/index.ts"
    ]
  },
  "include": [
    "src/**/*",
    "src/mylib-ui/typings/*.d.ts",
    "node_modules/ui-library/**/*.d.ts"
  ],
  "exclude": ["src/**/*.spec.*", "src/**/*.md", "dist"]
}

My webpack configuration in my library is:

 {
    test: /\.(ts|js)x?$/i, 
   include: [srcPath, uiLibraryPath], 
    use: [
             'babel-loader', //javascript files loader
                    {
                    loader: 'ts-loader', //typescript loader
                    options: {
                            allowTsInNodeModules: true,
                            transpileOnly: true, 
                        },
                    },
                ],
            },
0 Answers
Related