webpack config not work when running an async task in a loader

[tmyeahsing]

running an async task in a loader with webpack config

What is the expected behavior?
I'm using ref-loader to define an image, the codes are:
zh.json

{
    "image": "@ref(@/imgs/zh.png)"
}

entry.js

import "./zh.json"

webpack loader config

{
  test: /\.json$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].json,
        outputPath: 'json'
      }
    },
    'extract-loader',
    'ref-loader'
  ],
  type: 'javascript/auto'
}

{
  test: /\.png$/,
  use: [
    {
      loader: 'url-loader',
    }
  ]
}

I failed to run build, with an error:

It seems that the zh.png that required was loaded as plain text, and not going through url-loader that I had define.

And ref-loader's codes are here:

const parse = require('./parse');

module.exports = function(src, map, meta) {
  const callback = this.async(); // seems work without webpack config
  try {
    const product = `module.exports = ${parse(src, ref => `require("${ref}")`)}`;
    callback(null, product, map, meta);
  } catch (e) {
    callback(e);
  }
};

What is motivation or use case for adding/changing the behavior?

How should this be implemented in your opinion?

Are you willing to work on this yourself?
no

[alexander-akait]

Please provide configuration to reproduce the problem

[tmyeahsing]

Happy for your reply, you can check it here Example

Compare the results of yarn build:generator and yarn build:url-loader

The difference of the two config is how to handle png asset, yarn build:generator use generator, new feature in webpack 5, and yarn build:url-loader use traditional rule define with url-loader. And yarn build:generator got an error.

Another thing is, if change @ref(./imgs/zh.png) in zh.json to @ref(@/imgs/zh.png), an error saying zh.png not found will be shown, which means resolve.alias not work for both yarn build:generator and yarn build:url-loader.

[alexander-akait]

Why you want to use file-loader and url-loader, they are depreacted

[tmyeahsing]

So what about ref-loader and extract-loader?

And, when I use url-loader, it comes to an expected result, but when I use generator, it causes an error, that's weird.

Error by yarn build:generator :

Is ref-loader or extrat-loader imperfect to do this thing? But I really need a feature that ref-loader has provided, as ref-loader described:

Use @ref(./anyfile.ext) in any text file will build a dependency from current file to anyfile.ext; Then it will replace @ref() markup to module result of anyfile.ext.

[alexander-akait]

I think it is bug on extract-loader, loader tries to run code using Node.js and run require on binary file, you should look how to exclude it