If you use Babel, Rollup or any compilation/bundle tool, you probably have plugins that transform your .jpg, .scss, .js, .wasm… TypeScript is only able to import files that export something explicitly. So, this error may pop in your editor when you write something like import './myStyles.scss'.

The solution is simple: tell your editor what those files export once transformed. Images often return a URI, .scss a string or an object… So you can create a modulesDeclarations.d.ts file at the root of your working directory to explicitly indicate to your editor and your linter what those files export.

The name of the file does not matter as long as it is a .d.ts file.

It has to look like that:

declare module '*.scss' {
    const content: object;
    export default content;
}

declare module '*.svg' {
    const content: string;
    export default content;
}

Now when you do import myImageURI from ./myImage.svg, your linter knows that you are actually importing a string and won’t give you an error when you import the module or when you use it in <img src={myImageURI}/>.