Parceljs bundle issue

Question

I am bundling my app with parceljs and hitting this particular issue which I am not able to resolve at the moment.

I have 1 component which is referencing a image like

import defaultImage from '/path/to/image';

and using it like below in the code

<img src={defaultImage} />

I am reusing that component where tree look like this

Parcel build process does not throw any error and if I follow the flow as 1. Navigate to /component1 (Image is displayed)

but when I navigate to /component2 I get the Module not found error for image.

Uncaught Error: Cannot find module 'assets/imgs/default_article.png'
at newRequire (VM191 src.80dfb952.js:39)
at newRequire (searchPage.363c2bd8.js:31)
at newRequire (VM191 src.80dfb952.js:31)
at newRequire (VM191 src.80dfb952.js:23)
at localRequire (VM191 src.80dfb952.js:55)
at Object.parcelRequire.../components/misc/articleThumbnail.js.react (VM191 src.80dfb952.js:76489)
at newRequire (VM191 src.80dfb952.js:49)
at localRequire (VM191 src.80dfb952.js:55)
at Object.parcelRequire.../components/feed/feeditem.js.react (VM191 src.80dfb952.js:77133)
at newRequire (VM191 src.80dfb952.js:49)

Has anyone paced this issue with Parcel and any fixes?

Answer 1

The only way I have been able to get around the issue is to import the common images in Main.js and then pass them down to components as part of props.