CODEWITHSUNDEEP
typescript
mpen
mpen

Reputation: 282805

Can't get tsconfig paths to work (TS2307)

Here's my tsconfig.json:

{
    "compilerOptions": {
        "strict": true,
        "importHelpers": false,
        "inlineSources": true,
        "noEmitOnError": true,
        "pretty": true,
        "module": "esnext",
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": false,
        "removeComments": false,
        "preserveConstEnums": false,
        "sourceMap": true,
        "lib": ["es2018","dom"],
        "skipLibCheck": false,
        "outDir": "dist",
        "target": "es2018",
        "declaration": false,
        "resolveJsonModule": false,
        "esModuleInterop": true,
        "jsx": "preserve",
        "moduleResolution": "node",
        "allowSyntheticDefaultImports": true,
        "baseUrl": ".",
        "noEmit": true,
        "paths": {
            "@/*": ["./src/*"],
        },
    },
    "files": [
        "src/index.tsx"
    ],
    "include": [
        "src/**/*.d.ts"
    ]
}

Running:

$ node_modules/.bin/tsc --noEmit
src/components/App.tsx:13:27 - error TS2307: Cannot find module '@/icons/info-circle.svg'.

13 import InfoCircleSvg from '@/icons/info-circle.svg';
                             ~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/pages/HomePage.tsx:2:20 - error TS2307: Cannot find module '@/images/gambit.jpg'.

2 import imgSrc from '@/images/gambit.jpg';
                     ~~~~~~~~~~~~~~~~~~~~~


Found 2 errors.

But those files do exist:

$ ll src/icons/info-circle.svg
-rw-r--r-- 1 mpen mpen 479 Mar 15 18:51 src/icons/info-circle.svg

I've tried every permutation of paths with and without the * that I can think of, but I can't get any of them to resolve. baseUrl is set to . as so many tutorials and posts have suggested. What am I missing?

Is it the file extensions that are tripping tsc up? Because webpack can handle them just fine, and I have an images.d.ts file that the include option should pick up:

import { ElementType } from "react";

declare module "*.png" {
  const content: string;
  export default content;
}

declare module "*.jpg" {
  const content: string;
  export default content;
}

declare module "*.jpeg" {
  const content: string;
  export default content;
}

declare module "*.gif" {
  const content: string;
  export default content;
}

declare module "*.svg" {
  const content: ElementType<React.SVGProps<SVGSVGElement> & { title?: string, desc?: string }>;
  export default content;
}

Upvotes: 4

Views: 390

Answers (1)

Aleksey L.
Aleksey L.

Reputation: 37918

The problem is not with paths, but with declarations file.

To fix it, you can move top level import into the module declaration:

declare module "*.svg" {
    import { ElementType, SVGProps } from 'react';
    const content: ElementType<SVGProps<SVGSVGElement> & { title?: string, desc?: string }>;
    export default content;
}

Or remove it completely and:

declare module "*.svg" {
    const content: React.ElementType<React.SVGProps<SVGSVGElement> & { title?: string, desc?: string }>;
    export default content;
}

Import statement makes the file module and therefore declare module "*.svg" statement considered by tsc a module augmentation and not a module declaration.

Upvotes: 1

Related Questions