Cannot find module "../static/icons/my-icon"

Hi,

when I try to use any of the query params like “?url” I get an error Cannot find module "../static/icons/my-icon"

so this works: <img src={require('../static/icons/my-icon.svg')} width="100%" height="100%"/> … but this doesn’t: <img src={require('../static/icons/my-icon.svg?url')} width="100%" height="100%"/>

(I’m using Typescript)

Thanks in advance!

[cyrilwanner]

Hello, and sorry for the late reply. I was on vacation and didn’t take the laptop with me.

It looks like TypeScript doesn’t know about the webpack query parameters. I copy a typings file to the end of this issue, can you try to also create this in your project in types/next-optimized-images.d.ts and then rebuild the project? (you may also have another path for custom typing files depending on your setup) This at least solved a similar error for me. If this works for you too, I’ll try to add this file to the package itself so it should work out of the box. If it doesn’t solve your error, can you show me your next.config.js file (if there is nothing secret in it)?

@genox in the readme, it is assumed that you have an images folder right in the same folder as your current react component is. If this is not the case, you have to change the import path just the same way as you would when you import another js file. I understand that there can be some confusion with the chosen paths and I’ll update this part of the readme for the next version.

// types/next-optimized-images.d.ts
declare module '*.png';
declare module '*.png?include';
declare module '*.png?webp';
declare module '*.png?inline';
declare module '*.png?url';
declare module '*.png?original';

declare module '*.jpg';
declare module '*.jpg?include';
declare module '*.jpg?webp';
declare module '*.jpg?inline';
declare module '*.jpg?url';
declare module '*.jpg?original';

declare module '*.jpeg';
declare module '*.jpeg?include';
declare module '*.jpeg?webp';
declare module '*.jpeg?inline';
declare module '*.jpeg?url';
declare module '*.jpeg?original';

declare module '*.webp';
declare module '*.webp?include';
declare module '*.webp?webp';
declare module '*.webp?inline';
declare module '*.webp?url';
declare module '*.webp?original';

declare module '*.svg';
declare module '*.svg?include';
declare module '*.svg?webp';
declare module '*.svg?inline';
declare module '*.svg?url';
declare module '*.svg?original';
declare module '*.svg?sprite';

declare module '*.gif';
declare module '*.gif?include';
declare module '*.gif?webp';
declare module '*.gif?inline';
declare module '*.gif?url';
declare module '*.gif?original';

[genox]

Thanks for the typings. Now I also understand why it didn’t work. 😃 I did in fact assume that assets are centralised, not per module. Depending on your architecture (e.g. ARC/atomic react components), this is unfeasible, but if it can be configured, that’s great. Will give it a try once the dependency things have been sorted out.