URL is getting truncated

[dleangen]

• Operating System: MacOS
• Node Version: 14.13.0
• NPM Version: 6.14.8
• webpack Version: 4.42.1
• html-loader Version: 1.3.2

Expected Behavior

Within a partial, I am trying to include an svg image like so:

<svg class="icon-link__scroll-to-top--icon">
  <use xlink:href="../../images/sprites.svg#icon-chevron-with-circle-up"></use>
</svg>

I am expecting the output to be something like this:

<svg class="icon-link__scroll-to-top--icon">
  <use xlink:href="assets/img/3502e89a3fabd1b15fbd17dfdb49d7d7.svg#icon-chevron-with-circle-up"></use>
</svg>

Actual Behavior

The generated URL is truncated, like this:

<svg class="icon-link__scroll-to-top--icon">
  <use xlink:href="assets/img/3502e89a3fabd1b15fbd17dfdb49d7d7.svg#icon-chevron-with-circl"></use>
</svg>

Obviously, my icons cannot work.

How Do We Reproduce?

Reproduce by including an svg image with a URL that includes a fragment that is longer than 23 characters.

This is the related rule in my webpack config:

            {
                test: /\.hbs$/,
                use: [{ loader: 'handlebars-loader' }, { loader: 'extract-loader' }, { loader: 'html-loader' }]
            },

[alexander-akait]

Please create reproducible test repo

[dleangen]

https://github.com/dleangen/url-test

Enjoy! 😀

[RebelClone]

is there anyway to solve this i am facing the same issue

[RebelClone]

i found the solution but dont know how to pull request

solution

let hash;
const indexHash = normalizedUrl.lastIndexOf('#');
if (indexHash >= 0) {
hash = normalizedUrl.substr(indexHash);// due to normalizedUrl.substr(indexHash,indexHash)
normalizedUrl = normalizedUrl.substr(0, indexHash);
}

so if indexHash is smaller then the url was truncated bcux left side was smaller that right i think they kept it there for perfomace reason but removing one indexHash solves the problem of svg