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

parcel/src/Asset.js

Lines 140 to 157 in 7b899b3

	generateBundleName(isMainAsset) {
	// Resolve the main file of the package.json
	let main = this.package && this.package.main ? path.resolve(path.dirname(this.package.pkgfile), this.package.main) : null;
	let ext = '.' + this.type;
	// If this asset is main file of the package, use the package name
	if (this.name === main) {
	return this.package.name + ext;
	}
	// If this is the entry point of the root bundle, use the original filename
	if (isMainAsset) {
	return path.basename(this.name, path.extname(this.name)) + ext;
	}
	// Otherwise generate a unique name
	return md5(this.name) + ext;
	}

[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 #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: microsoft/TypeScript-React-Starter#12 (comment)

[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 fathyb/parcel-plugin-typescript#59 (comment)