nextjs - 💡(How to fix) Fix Turbopack custom loaders currently don't provide resourceQuery on alias imports, so there's no way to access query parameters like in Webpack [3 comments, 4 participants]

Link to the code that reproduces this issue

https://github.com/valeryq/next-resource-query-repro

To Reproduce

1. Start the application in the development (next dev) with Turbopack.
2. Check page for images and page source - https://github.com/valeryq/next-resource-query-repro/blob/main/src/app/page.tsx
3. Check custom loader source - https://github.com/valeryq/next-resource-query-repro/blob/main/next/turbopack/svg-loader.mjs

As we can see, there are 4 imports:

import NextSvgComponentRelative from '../assets/next.svg';
import NextSvgComponentAlias from '@/assets/next.svg';

import NextSvgUrlRelative from '../assets/next.svg?url';
import NextSvgUrlAlias from '@/assets/next.svg?url';

Each one is used in an appropriate way:

<div className={styles.container}>
  <span>SVG Component Relative</span>
  <NextSvgComponentRelative />
</div>

<div className={styles.container}>
  <span>SVG Component Alias</span>
  <NextSvgComponentAlias />
</div>

<div className={styles.container}>
  <span>SVG URL Relative</span>
  <img src={NextSvgUrlRelative} />
</div>

<div className={styles.container}>
  <span>SVG URL Alias</span>

  {
    typeof NextSvgUrlAlias === 'function'
      ? 'Error: SVG URL Alias is a function'
      : <img src={NextSvgUrlAlias} />
  }
</div>

But this import NextSvgUrlAlias from '@/assets/next.svg?url'; doesn't work properly and returns a function (react component) instead of the result of svg-url-loader.

I investigated and found out that this.resourceQuery is empty in the custom loader - https://github.com/valeryq/next-resource-query-repro/blob/main/next/turbopack/svg-loader.mjs#L6 only for alias import and for both dev and production builds.

Current vs. Expected behavior

Current result: <img width="1618" height="1458" alt="Image" src="https://github.com/user-attachments/assets/ba51cb8d-0e94-491e-b2da-6516ef48a3ee" />

Expected result: I expect to get a proper this.resourceQuery in a custom turbopack loader for alias import, similarly to how it works for relative imports, so, import logic will be consistent between alias and relative imports. What is related to this example - the image with alias import handled by svg-url-loader will be reflected properly on the page.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.5.0: Tue Apr 22 19:54:49 PDT 2025; root:xnu-11417.121.6~2/RELEASE_ARM64_T6000
  Available memory (MB): 16384
  Available CPU cores: 10
Binaries:
  Node: 22.20.0
  npm: 10.9.3
  Yarn: 1.22.22
  pnpm: 10.15.1
Relevant Packages:
  next: 16.0.0 // Latest available version is detected (16.0.0).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

Turbopack

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

next dev (local), next build (local)

Additional context

I tested it with NextJS 15.5.4, 15.5.6 and finally with 16.0.0, all those versions have similar behavior.