tsc编译依赖react-color时无法解析@types相对路径的问题求助

The Problem #

When building a project that depends on react-color, running tsc throws an import error:

node_modules/@types/react-color/lib/components/sketch/Sketch.d.ts(2,41): error TS2307: Cannot find module '../../..'

Manually updating the import in Sketch.d.ts to '../../../index.d.ts' fixes the issue, which tells us TypeScript isn't automatically recognizing index.d.ts as the module's entry point here. Oddly enough, this problem doesn't pop up in a fresh TypeScript + React project—so the root cause is almost certainly a configuration quirk in your current project.

Your project's client/tsconfig.json looks like this:

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    //"noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true
  }
}

To reproduce the error, clone the relevant branch of my repository and run:

tsc -p client/

Potential Fixes & Root Cause Analysis #

1. Add Explicit Module Resolution Strategy #

Your tsconfig.json doesn't set moduleResolution, which defaults to the older Classic strategy when module is set to es6 in older TypeScript versions. The Classic strategy doesn't automatically look for index.d.ts when resolving relative modules, unlike the Node strategy which matches how Node.js resolves files.

Quick Fix: Update your compiler options to include moduleResolution: "node":

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    //"noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "jsx": "react",
    "allowJs": true,
    "moduleResolution": "node"
  }
}

2. Check for TypeScript Version Mismatch #

Fresh projects often use newer TypeScript versions where moduleResolution defaults to Node for es6 modules. Your project might be on an older version that still uses the Classic default. Verify your TypeScript version with:

tsc --version

If it's older than 4.7, consider upgrading to align with modern resolution behavior.

3. Ensure Type Definition Loading Isn't Restricted #

If your tsconfig.json has typeRoots or types configured, it might be limiting which type definitions TypeScript loads. Remove these entries if they're unnecessary, or explicitly add @types/react-color to the types array to ensure it's properly recognized.

Final Notes #

Since the issue doesn't occur in a clean project, configuration differences (like missing moduleResolution or an outdated TS version) are the most likely culprits. Updating your tsconfig.json to use the node resolution strategy should fix the implicit index.d.ts recognition issue without needing to modify the @types/react-color files manually.

内容的提问来源于stack exchange，提问作者evbailey