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

The async/await feature in Typescript fails to trigger updates in the AngularJS view

Nativescript encountered an error regarding faker: module './address' not found

Altering the properties of a specified element within TestBed using the overrideComponent method

What is the best way to bind the value of total when working with forms and the bind method?

The ts-node encountered an issue with the file extension in this message: "TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension

Javascript/Typescript Performance Evaluation

How can you dynamically disable a radio option button using Angular rendering without relying on an ID?

Encountered a problem with regular expressions in Angular 2 - a Module parse error due to an octal literal in strict mode

Error in syntax: The tailwind import statement contains an unrecognized word and will not function correctly

Display Material Popup in Angular before user leaves the page

Achieving selective exclusion of specific keys/values while iterating through an array and rendering them on a table using Angular

iterating over a nested map within a map in an Angular application

The data type 'string | boolean | null' cannot be assigned to type 'boolean'. Specifically, the type 'null' cannot be assigned to type 'boolean'

Sending a parameter between files in a React application: a step-by-step guide

Engage with the item provided to an Angular2 component as an Input parameter

In Typescript, null values are allowed even when the type is set to be non-nullable

Use a pipe to show the content of the md-input

Types are not appearing in @types/node

Angular array sanitization for handling multiple URLs

TypeScript's type 'T' has the potential to be instantiated with any type, even if it is not directly related to 'number'