score:1

Accepted answer

You can declare a module for your images like this:

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

Then, you will be able to import your image like this:

import AuthorSrc from "../assets/author.png";

This is happening because webpack doesn't support image import out of the box. So you need to add a rule for that in the webpack config file. When you add a new rule, TypeScript doesn't automatically know that, so you need to declare a new module to resolve this. Without the module, you will be able to import images, but TypeScript will throw an error because you didn't tell to it is possible.

score:1

This issue has nothing to do with webpack or any bundler and is not quite a problem with typescript.

Typescript has stated that `require("path") is a way to include modules to the scope of your current module, whilst it can be also used to read some random files (such as json files, for example).

As Vincent and Playma256 specified, you can declare a module wildcard to match certain file types, so you can import it as an import statement. But you don't really need to do this. Typescript won't give you an error if you are trying to import a png or a json file (tslint might, but that depends on your configuration).

By the way, if your declaration is within the source folder of your project as defined in tsconfig.json, you don't need to include it as specified by Playma256.

I've created a sample project in node for you to test:

https://github.com/rodrigoelp/typescript-declare-files

score:1

I think you can solve this problem with Webpack&&typescript.The official webpage of webpack has introduced something about this in https://webpack.js.org/guides/typescript/ And I have try this myself in https://github.com/reactpersopnal/webpack-root/tree/feature/typescript The reason is that you would like to use non-code assets with TypeScript, so we need to defer the type for these imports for webpack. Your could simply add custom.d.ts.

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

score:5

This is more of a problem with typescript than webpack itself, you might need to declare modules on a declaration file.

Create a declarations.d.ts

Update your tsconfig.json

"include": [
    "./declarations.d.ts",
],

Put this on that file:

declare module '*.png';

Error might be gone.


Related Query

More Query from same tag