Hello! I am writing a custom image loader to optimize images at webpack build time. I realy on the fact that nextjs has two webpack-compilation phases the server and client one. During the server compilation I only generate relevant JS code that replaces the import. During the client compilation I actually optimize the image and emit it to the static/media folder.

To recap: every loader in nextjs compilation is called twice. During the server build and during the client build.

Everything works fine except when I try to use webpack resourceQuery while importing the image:

import image200 from "./myImage.png?w=200"

This resource query causes nextjs to skip the client side build for this particular image. I have no idea why this is happening... After three hours of digging through nextjs code I decided to write this post.

Best,
Wiktor