TypeScript typings not recognized in React project using locally linked library

Other Questions NPM
1

Hey everyone, I’m having trouble with TypeScript typings in my React setup. I’ve got a main project and a separate design library that I’m developing locally. To make things easier, I used npm link to connect them. The library works fine when I use it, but I’m not getting any TypeScript benefits.

Here’s what I did:

  1. Built my design library with React and Rollup
  2. Copied the output to a symlink folder
  3. Ran npm link in the symlink folder
  4. Used npm link in my main project to use the library

The library components work great, but I’m not getting any prop type hints or checks. It’s like TypeScript isn’t picking up the .d.ts file from the library.

Has anyone run into this before? I really want to use TypeScript for better development, but I’m stuck. Any ideas on how to get the typings working with this setup?

Thanks in advance for any help!

2

hey sarahj, sry to hear bout ur typings issue. i had a similar prob and fixed it by adding “preserveSymlinks”: true to my tsconfig.json in the main project. it tells typescript to use the original file paths instead of the resolved ones. give it a shot and lmk if it helps!

3

I ran into a similar problem when I was developing a locally linked design library. In my case, TypeScript was not correctly resolving the typings because the symlinked folder was treated differently during module resolution. I solved this by updating the tsconfig.json of the main project. I added a custom path mapping under compilerOptions to point to the library’s directory and ensured that the typeRoots included the linked path. After restarting the development server, TypeScript began recognizing the definitions. While this isn’t a perfect solution, it enabled proper type checking and improved my workflow.

4

I encountered a comparable issue when working with locally linked libraries. One solution that worked for me was to explicitly include the library’s types in the main project’s tsconfig.json. Add a ‘paths’ entry in the ‘compilerOptions’ section, mapping the library name to its type definition file. For example:

{
  "compilerOptions": {
    "paths": {
      "your-library-name": ["./node_modules/your-library-name/dist/index.d.ts"]
    }
  }
}

This approach forces TypeScript to recognize the correct type definitions. Additionally, ensure your library’s package.json includes a ‘types’ field pointing to the main declaration file. Rebuilding the project after these changes should resolve the typing issues.