I recently upgraded one of my project's ParcelJS from version 2.13.3 to 2.14.4. Everything works as expected, except for the glob imports.
JS
import images from "../../../img/gallery/*.jpg";
export const data = [
{
id: 1,
name: "Spread Sheets",
files: "312",
},
{
id: 2,
name: "Documents",
files: "4532",
},
{
id: 3,
name: "Downloaded Files",
files: "15876",
},
...
];
data.forEach((item) => {
filePreview = `<div class="h-24 w-100">
<img src="${images[item.img]} " alt="">
</div>`;
...
});
.parcelrc
{
"extends": "@parcel/config-default",
"resolvers": [
"@parcel/resolver-glob",
"..."
]
}
After bulding, I see the images are not displaying and inspecting the image tags shows as below:
<img src="[object Object] " alt="">
Also, console.log(images), returns only the file names and not the path.
{
"1": {},
"2": {},
"3": {},
"4": {},
"5": {},
"6": {},
"7": {},
"8": {},
}
(Here, 1, 2, 3... are the image names.)
I'm experiencing this issue only after upgrading Parcel to version 2.14.4 — everything was working fine in 2.13.3, so I'm not sure what exactly I'm missing.
I've also updated the import statement to
import * as images from "../../../img/gallery/*.jpg";
But the issue remains the same.
Parcel changed behaviour in v2.14.4,
I fixed by switching back to the old method by adding a transformer to .parcelrc
:
{
"extends": "@parcel/config-default",
"transformers": {
"*.png": ["@parcel/transformer-raw"],
"*.jpg": ["@parcel/transformer-raw"]
}
}
Don't forget to clean/rebuild your Parcel build, add other fileformats if needed.