Parcel: Imported image paths during development

[jaredpalmer]

I am having issues with image asset paths during development and production.

During dev, if i do import logo from './logo.svg this becomes => 1230981023.png.
During build, import logo from './logo.svg this becomes => /dist/1230981023.png.

This may have to do with a public URL issue during dev but i'm not sure.

[devongovett]

url is generated here https://github.com/parcel-bundler/parcel/blob/master/src/assets/RawAsset.js#L10

[jamiebuilds]

Also see https://github.com/parcel-bundler/parcel/blob/7b899b38930a7a30943a6148f475a5007ce2c625/src/Asset.js#L140-L157

[gisderdube]

I had the same issue with importing assets (jpg|svg), but after fiddling with the --public-url it worked out just fine. Perhaps you can share some of your project structure?

[devongovett]

Should be fixed by https://github.com/parcel-bundler/parcel/pull/160. You just need to set --public-url when building for prod.

[samsch]

I think I'm having the same issue using Parcel 1.2.1 development server (parcel src/index.html). My imported url (import image from './path/to/image.jpg';) is /24e15f924c17a873dc81435468e5287b.jpg, while it would need to be /dist/24e15f924c17a873dc81435468e5287b.jpg to work.

[quantuminformation]

I have an issue here with a path that is correct for importing an image

[mischnic]

I have an issue here with a path that is correct for importing an image

Does it build/run correctly?
Then it's only TypeScript not recognizing it, does this fix work: https://github.com/Microsoft/TypeScript-React-Starter/issues/12#issuecomment-326370098

[quantuminformation]

It builds but i get

⠧ Building SpaceInvaders.ts...🚨 /Users/nikos/WebstormProjects/youtube-space-invaders/src/SpaceInvaders.ts(14,21)
Cannot find module './images/backgrounds/sunrise.jpg'.
13 |

14 | import sunrise from './images/backgrounds/sunrise.jpg'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
15 |

⠴ Packaging...🚨 /Users/nikos/WebstormProjects/youtube-space-invaders/src/SpaceInvaders.ts(14,21)
Cannot find module './images/backgrounds/sunrise.jpg'.
13 |

14 | import sunrise from './images/backgrounds/sunrise.jpg'
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
15 |

✨ Built in 2.81s.

the image is never attempted to be loaded at runtime

[mischnic]

@QuantumInformation ~Please open a new issue that importing raw files (or at least images) can't be imported in typescript.~
Is this again caused by parcel-plugin-typescript?

[quantuminformation]

I updated parcel, issue went away, but now I get this

Server running at http://localhost:1234
🚨 /Users/nikos/WebstormProjects/youtube-space-invaders/src/SpaceInvaders.ts:18:7: Support for the experimental syntax 'exportDefaultFrom' isn't currently enabled (18:8):
16 | import { Interpreter } from './agent/Interpreter'
17 |

18 | export enum Actions {
| ^

[mischnic]

Again, it this with parcel-plugin-typescript?

[quantuminformation]

maybe https://github.com/fathyb/parcel-plugin-typescript/issues/59#issuecomment-457199020