withPigment doesn't work with resourceQuery: /url/

[Holybasil]

Steps to reproduce

...
 webpack: (config, { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }) => {
    // Grab the existing rule that handles SVG imports
    const fileLoaderRule = config.module.rules.find(rule => rule.test?.test?.(".svg"))
    config.module.rules.push(
      ...[
        {
          ...fileLoaderRule,
          test: /\.svg$/i,
          type: 'asset/resource',
          resourceQuery: /url/, // *.svg?url
        },
        {
          test: /\.svg$/i,
          issuer: fileLoaderRule.issuer,
          resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
          use: [
            {
              loader: "@svgr/webpack",
              options: {
                svgoConfig: {
                  plugins: [
                    {
                      name: "preset-default",
                      params: {
                        overrides: {
                          removeViewBox: false,
                        },
                      },
                    },
                  ],
                },
              },
            },
          ],
        },
      ],
    )

    fileLoaderRule.exclude = /\.svg$/i

    config.externals.push("pino-pretty", "lokijs", "encoding")

    return config
  },

...

const pigmentConfig = {
  transformLibraries: ['@mui/material'],
  theme: createTheme({
    cssVariables: {
      colorSchemeSelector: "class",
    },
    colorSchemes: {
      light: lightTheme,
      dark: false,
    }
  })
};

const withMDX = createMDX({
  // Add markdown plugins here, as desired
  options: {
    remarkPlugins: [remarkGfm, remarkMath],
    rehypePlugins: [rehypeKatex, rehypeRaw],
  },
})

export default withPigment(withMDX(nextConfig), pigmentConfig)

Current behavior

unhandledRejection: Error: Cannot find module 'url:@/assets/svgs/github.svg?url'
Require stack:
- /.../src/constants/networks.ts in/.../src/constants/networks.ts
| /.../src/constants/index.ts
...
    at /Users/holybasil/Documents/Github/frontends-upgrade/node_modules/ (wyw-in-js/transform/src/module.ts:330)
    at <unknown> (src/constants/index.ts:24:17)
    ...

Expected behavior

they can work together

Context

No response

Your environment

System:
OS: macOS 15.1.1
Binaries:
Node: 22.13.0 - ~/.asdf/installs/nodejs/22.13.0/bin/node
npm: 10.9.2 - ~/.asdf/plugins/nodejs/shims/npm
pnpm: Not Found
Browsers:
Chrome: 131.0.6778.265
Edge: 132.0.2957.127
Safari: 18.1.1
npmPackages:
@emotion/react: ^11.11.1 => 11.11.3
@emotion/styled: ^11.11.0 => 11.11.0
@mui/base: 5.0.0-beta.68
@mui/core-downloads-tracker: 6.4.0
@mui/icons-material: 6 => 6.4.0
@mui/lab: ^6.0.0-beta.23 => 6.0.0-beta.23
@mui/material: 6 => 6.4.0
@mui/material-nextjs: 6 => 6.3.1
@mui/material-pigment-css: ^6.4.1 => 6.4.1
@mui/private-theming: 6.4.0
@mui/styled-engine: 6.4.0
@mui/system: 6.4.0
@mui/types: 7.2.21
@mui/utils: 6.4.0
@pigment-css/nextjs-plugin: ^0.0.30 => 0.0.30
@pigment-css/react: ^0.0.30 => 0.0.30
@pigment-css/unplugin: 0.0.30
@types/react: 19.0.4 => 19.0.4
react: 19.0.0 => 19.0.0
react-dom: 19.0.0 => 19.0.0
typescript: ^5.1.6 => 5.3.3

Search keywords: pigment svg resourceQuery

[brijeshb42]

There's an option in Pigment config called asyncResolve which can help you with telling (wyw, used internally in Pigment on how / where to find a path that cannot be located on the file system).

const pigmentConfig = {
  // ...rest of the config,
  async asyncResolve(what) {
    if (what.startsWith('url:@') {
       return require.resolve('./localfile.js');
    }
  }
};

localfile.js

module.exports = {};

The contents of the above file will have to export stubs similar to what you expect url:@ paths to have.

Here's how we do it for usual next.js based imports to support Next.js.