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

[r0b-]

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!

[genox]

Same here, using nextjs@latest (canary) and TS.

[genox]

Oh - actually, i got it to work like this:

<img src={require('static/images/dots.svg?url')} />

Note the missing "../".

The way this is described in the "how to" section is kinda broken perhaps? "./images/.." should resolve to "(root)/static/images" but results in a "module not found" error for me as well. Using both "../static/.." and "/static/.." results in an image being picked up but using query params will fail in both cases. Only "static/.." works with query params.

[r0b-]

hmmm, unfortunately it's not working for me :(
Are you using typescript?

[genox]

Running on these dependencies:

[email protected] @zeit/[email protected] [email protected] express@latest

Either way, the way file references are documented in the README.md is broken on this setup, too. I'm pretty sure the reason this works for me is more of an unintentional side effect than intended functionality.

[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.