Parcel: 🐛 srcset not working for source-element

[mdings]

Related to this issue: https://github.com/parcel-bundler/parcel/issues/720. I'm opening a new one since the other has been closed already.

srcset is still nog working for source-element

Expected behaviour

The asset from the srcset-attribute inside the source-tag is processed by parcel and is rewritten to the hashed path

Current behaviour

The srcset-attribute is left alone.

Code sample

<picture>
    <source srcset="img/gallery/400x600.jpg" media="(min-width: 768px)">
    <img src="img/gallery/800x600.jpg">
</picture>

compiles to:

<picture>
    <source srcset="img/gallery/400x600.jpg" media="(min-width: 768px)">
    <img src="/dist/f44ad9eb3800b52d8c644dd71c6f34d6.jpg">
</picture>

[davidnagli]

srcset get’s processed here:

https://github.com/parcel-bundler/parcel/blob/0dc062f77e36a19297dac542be33cded04580e89/src/assets/HTMLAsset.js#L84-L93

[mdings]

I noticed this was merged to master so I installed the updated version from github. For me the source-element is still not processed. Am I missing something?

[VladimirVaivada]

:bug: Same issue with parcel-bundler version 1.6.2, [email protected].
Reopen issue?

[gnijuohz]

Hey, sorry! @VladimirVaivada @mdings , I'll look into it soon, meanwhile could you check if this test file is testing the correct thing here?

[gnijuohz]

Okay... just tested it out and it's working for me.

Note that my change was not released in 1.6.2, you need to run a local version of parcel to try it out. Here describes several ways to do that.

One way to do that is,

1. yarn global remove parcel, to remove globally installed parcel
2. git clone https://github.com/parcel-bundler/parcel.git
3. cd parcel && yarn install && yarn build
4. run yarn link

Now when you run parcel index.html it uses the newly built parcel. @mdings are you certain you were running the correct parcel?

[VladimirVaivada]

:blush: My Bad!!! Sorry ))) Did not check if your commit is in current release.
Everything works just fine! :rocket:
:1st_place_medal: Thank you very much!!! :hugs:
I'm sorry for my English. )

[mdings]

@gnijuohz I think so yes. I updated the npm package through the github repo by running npm i -D https://github.com/parcel-bundler/parcel.git.

Now I tried updating the dependencies using yarn, as you are describing above. Still no luck though, but I am guessing at this point this must be something on my side. The integration test-file for one looks good to me.

I'll just wait for the fix to be published to npm and then try updating again.

[gnijuohz]

Hi @mdings I suspect you are somehow still running the version of parcel you installed from before...

Can you check out this example repo?

Run npm install && cd node_modules/parcel-bundler && npm install then cd ../.. && node bundle.js, you should be able to see the result in dist folder (It's interesting that I needed to do cd node_modules/parcel-bundler && npm install though...)

To use cli instead of API, run ./node_modules/parcel-bundler/bin/cli.js index.html

[VladimirVaivada]

@gnijuohz
Hello again! :hand:
Fix does work. :ok_hand: with HTML assets.
It does not work with parcel-plugin-pug from @Ty3uK though, but I believe it's a bug with plugin and Maksim will fix it soon. :smile:
Thanks for great job! :beer: