javascriptglobparceljs

Parcel resolver-glob is not working as expected after upgrading to 2.14.4


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.


Solution

  • 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.