When using Typescript, I am encountering an issue where declared modules in my declaration file, specifically those with the file

Question

When using Typescript, I am encountering an issue where declared modules in my declaration file, specifically those with the file

One of the declarations in my ./src/types.d.ts file includes various modules:

/// <reference types="@emotion/react/types/css-prop" />
import '@emotion/react';
import { PureComponent, SVGProps } from 'react';

declare module '*.svg' {
  export class ReactComponent extends PureComponent<SVGProps<SVGSVGElement>> {}
}
declare module '*.ttf';
declare module '*.eot';
declare module '*.woff';
declare module '*.woff2';

Upon running tsc --noEmit, errors like ...

src/fonts/fonts.ts:39:31 - error TS2307: Cannot find module './pt-sans-v12-latin-ext_latin-regular.woff' or its corresponding type declarations.

39 import PTSansregularWOFF from './pt-sans-v12-latin-ext_latin-regular.woff';
                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/fonts/fonts.ts:40:32 - error TS2307: Cannot find module './pt-sans-v12-latin-ext_latin-regular.woff2' or its corresponding type declarations.

40 import PTSansregularWOFF2 from './pt-sans-v12-latin-ext_latin-regular.woff2';
                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/layouts/default/NavigationBar.tsx:4:41 - error TS2307: Cannot find module '../../images/brand.svg' or its corresponding type declarations.

4 import { ReactComponent as Brand } from '../../images/brand.svg';
                                          ~~~~~~~~~~~~~~~~~~~~~~~~

... are displayed.

This is my tsconfig.json:

{
  "include": ["./src/**/*", "./.gatsby/**/*", "./*.ts", "./plugins/**/*"],
  "files": ["./src/types.d.ts"],
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "lib": ["dom", "ES2017", "ES2019"],
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmit": true,
    "skipLibCheck": true,
    "moduleResolution": "node",
    "resolveJsonModule": true
  }
}

This is the structure of my file tree: https://i.stack.imgur.com/Fv1pF.png

How can I ensure Typescript locates the corresponding type declarations?

Interestingly, defining the interface Theme in @emotion/react within my types.d.ts has an effect on other parts.

typescript tsconfig

Answer 1

Answer №1

This is how I utilize it:

declare module '*.jpg';
declare module '*.png';
declare module '*.woff2';
declare module '*.woff';
declare module '*.ttf';

declare module '*.svg' {
  import React = require('react');

  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

Then, I incorporate it in this manner:

import { ReactComponent as Icon } from './icons/icon.svg';
import AnotherImage from './images/header.jpg';

Answer 2

This is how I utilize it:

declare module '*.jpg';
declare module '*.png';
declare module '*.woff2';
declare module '*.woff';
declare module '*.ttf';

declare module '*.svg' {
  import React = require('react');

  export const ReactComponent: React.SFC<React.SVGProps<SVGSVGElement>>;
  const src: string;
  export default src;
}

Then, I incorporate it in this manner:

import { ReactComponent as Icon } from './icons/icon.svg';
import AnotherImage from './images/header.jpg';

Answer 3

Answer №2

In order to allow the loading of svg and png files, I added the following snippet to a file named custom.d.ts located in the root directory of the project:

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
      SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;

}
declare module "*.png" {
  const value: any;
  export default value;
}

Although I am not an expert, this code snippet appears to define how TypeScript should handle imports of SVG and PNG files within the project.

Answer 4

In order to allow the loading of svg and png files, I added the following snippet to a file named custom.d.ts located in the root directory of the project:

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<
      SVGSVGElement
  > & { title?: string }>;

  const src: string;
  export default src;

}
declare module "*.png" {
  const value: any;
  export default value;
}

Although I am not an expert, this code snippet appears to define how TypeScript should handle imports of SVG and PNG files within the project.

When using Typescript, I am encountering an issue where declared modules in my declaration file, specifically those with the file

Answer №1

Answer №2

Similar questions

Enabling Event bus suggestions for Typescript: A step-by-step guide

I'm attempting to retrieve mlab data in the console using node.js, but unfortunately encountering an error

Utilizing asynchronous methods within setup() in @vue-composition

What do you do when schema.parseAsync cannot be found?

The attribute 'name' cannot be found within the class 'MyComponent'

What about combining a fat arrow function with a nested decorator?

Issue: React cannot render Objects as children (received: [object Promise]). If you intended to display multiple children, please use an array instead. (Next)

Can you determine the size of an unknown array in TypeScript?

Angular8 does not recognize custom paths that have been added to the tsConfig file

Creating an interface that extends the Map object in TypeScript to maintain the order of keys

Is there a way for me to receive the status code response from my backend server?

Using Angular to dynamically access component properties

What is the best way to choose a key from a discriminated union type?

Determine if the "type" field is optional or mandatory for the specified input fields in Typescript

Using TypeScript, Material UI introduces a new property to the primary object on the palette

Facing a problem with querying interfaces and types in TypeScript

Assistance for Angular 2 Style Guide within Atom: Feature Needed!

I encountered a mistake: error TS2554 - I was expecting 1 argument, but none was given. Additionally, I received another error stating that an argument for 'params' was not provided

Tips for deleting a specific choice with Angular

In Typescript, ambient warnings require all keys in a type union to be included when defining method parameter types