Parcel: Parcel build does not link bundles in index.html relative to index.html

Created on 7 Aug 2018 · 1Comment · Source: parcel-bundler/parcel

🐛 bug report

WARNING: This is an edge case, but the fix would be good practice I believe

Parcel's build command generates bundles for assets, outputs them to a directory (assume standard ouput for this, dist) and links the bundles relative to the top folder and not relative to the index.html itself. Generally this is probably not an issue but in certain environments the fact that they are linked via the top directory and not the index itself leads to the dist not inherently working on its own when building inside of other environments

😄 Expected Behavior

Build Command

parcel build index.html

Output HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Parcel</title>
    <link rel="stylesheet" href="./main.e40d4a5e.css">
</head>
<body>
    <script src="./main.70d62235.js"></script>
</body>
</html>

😯 Current Behavior

Build Command

parcel build index.html

Output HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Parcel</title>
    <link rel="stylesheet" href="/main.e40d4a5e.css">
</head>
<body>
    <script src="/main.70d62235.js"></script>
</body>
</html>

Now when you navigate to the index.html on say a predefined server where / will resolve to top-level, all links on index.html will 404 because the files are not relative to the index.html via ./

💁 Possible Solution

Define all outputted links, in this case, relative to the index.html with ./ where they will actually be referenced

🔦 Context

I use certain environments to house many different projects with different build process, in my particular case, MAMP is a base layer where this project exists and it seems to default / to upper directories.

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.9.7
| Node | 8.9.1
| npm/Yarn | 6.1.0/1.60
| Operating System | MacOS 10.12.5

Question

Source