Error importing font/images files handled by a Webpack loader in a React/Material-UI project
Hello, guys! Im working on a TypeScript React/Material-UI project and importing a font file into the code (handled by webpack and its loader). Everything works fine and no error shows up when the project is compiled, relative path is right (WS even autocompletes), the font is loaded and rendered the way its supposed to be: the code and app work and behave perfectly. The problem is WebStorm reports the import as an error because its not a module. I thought there could be some plugin or configuration for this but havent find it out. Thanks in advance
Please sign in to leave a comment.
The error comes from a Typescript compiler service (used for error highlighting in TypeScript) that doesn't know how to handle such imports and expects a Typescript module here. You don't see errors when building your code as it goes through some build pipeline and not passed directly to compiler.
You need to tell the compiler the shape of the thing you are importing. The only way to do this is creating an ambient module declaration for your resource.
See https://stackoverflow.com/questions/53742766/cannot-import-local-fonts-with-typescript, for example