Imports that specify resourceQuery are not processed by client-stage webpack loaders

[watjurk]

Link to the code that reproduces this issue

https://github.com/watjurk/resource-query-client-stage-webpack-loader

To Reproduce

Investigate the website

1. build the application (pnpm run build)
2. start the application (pnpm run start)
3. open the page
4. you can see that the img WITH resource query is not loading

Investigate the webpack loader

1. build the application (pnpm run build)
2. observe the build logs
3. notice that there isn't entry where isServer is false and the resourceQuery is present

Current vs. Expected behavior

Current behaviour

Nextjs executes it's build process in three main stages. Client, Server and Edge-server. These are three different webpack configurations. When a webpack loader is added using the next.config.ts file it is added to all there of these. Let's assume that the loader mentioned works with .png files:

When importing like this:

import example from "./example.png";

Our loader is called during the Client compilation and during the Server compilation.

Now imagine this loader supports custom image scaling via the resourceQuery. The import will look like this:

import exampleUserSpecifiedWidth from "./example.png?20";

Our loader is called ONLY during the Server compilation.

Expected behaviour

The loader will be called in the same manner regardless of the resourceQuery

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:06 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T8103
  Available memory (MB): 16384
  Available CPU cores: 8
Binaries:
  Node: 20.14.0
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.6.5
Relevant Packages:
  next: 15.3.0-canary.18 // Latest available version is detected (15.3.0-canary.18).
  eslint-config-next: N/A
  react: 19.0.0
  react-dom: 19.0.0
  typescript: 5.8.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Webpack, Output

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local), next start (local)

Additional context

Another explanation of the same thing:

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