resolve.extensions not working for files different from js, jsx

[webpack-bot]

Bug report

What is the current behavior?
https://webpack.js.org/configuration/resolve/#resolveextensions

extensions: ['.jsx', '.js', '.styl', '.svg']

For example, i have folder with done.svg, index.jsx, styles.styl files.

Importing svg file w/o extension in index.jsx file - success:

import React from 'react';
import DoneIcon from './icon/done';
import styles from './styles';

Importing svg file w/o extension in styles.styl - failed:

.benefits
  margin-top 16px

  &__list_item
    line-height 24px

    &:before
      content url('./icon/done')
      margin-right 8px
      vertical-align text-top

If the current behavior is a bug, please provide the steps to reproduce.

module.exports = {
  mode: 'production',
  output: {
    path: path.resolve('dist'),
    filename: 'js/[name].[contenthash].js',
    assetModuleFilename: '[name].[contenthash][ext]'
  },
  resolve: {
    extensions: ['.jsx', '.js', '.styl', '.svg']
  },
  devtool: false,
  stats: {
    all: false,
    timings: true,
    assets: true,
    assetsSort: 'size',
    errors: true,
    warnings: true
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.styl$/,
        use: [
          MiniCss.loader,
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          },
          'postcss-loader',
          'stylus-loader'
        ],
        exclude: /node_modules/
      },
      {
        test: /\.(svg|jpg|webp)$/i,
        type: 'asset'
      }
    ]
  },
  optimization: {
    minimizer: ['...', new CssMinimizerPlugin()],
    runtimeChunk: 'single',
    splitChunks: {
      minChunks: 2,
      chunks: 'all'
    }
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: path.resolve('src', 'index.html'),
      minify: true
    }),
    new MiniCss({ filename: 'css/[name].[contenthash].css' }),
    new CopyWebpackPlugin({
      patterns: [{ from: path.resolve('manifest'), to: path.resolve('dist') }]
    }),
    new CheckDuplicatePlugin()
  ]
};

What is the expected behavior?
Like in webpack 4, using file with extension from resolve.extensions list is not leading to error.

Other relevant information:
webpack version: 5.6.0
Node.js version: 12.16.2
Operating System: MacOS Mojave

---

This issue was moved from webpack/webpack#12042 by @alexander-akait. Original issue was by @DenRedsky.

[alexander-akait]

Fixed in the next branch, will work only when you don't set esModules: false (esModules is true by default)