Wrong relative links in sub directory when a relative public url is specified #2786

codingphil · 2019-03-13T16:15:31Z

🐛 bug report

This bug is related to the issue #2774
and also to this pull request: #2740

If you specify the parameter --public-url ./ when calling the parcel cli (like it is described in the doc for the cli) the relative links (e.g. hrefs) are relative to the root directory and not relative to the sub directory in which the bundle/html file is located.

repro-html-in-subdir.zip

src
├── subdir1
│   ├── subdirpage.html
│   ├── subdirpage.js
│   └── subdirpage2.html
└── index.html

🎛 Configuration (.babelrc, package.json, cli command)

See attached project above.

{
  "name": "repro-html-in-subdir",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "clean": "rm -rf .cache node_modules dist",
    "start": "parcel serve src/index.html --global Global",
    "build": "parcel build src/index.html --detailed-report --log-level 4 --no-source-maps --no-minify --public-url ./"
  },
  "devDependencies": {
    "parcel-bundler": "1.x"
  }
}

🤔 Expected Behavior

After you call yarn build in the output directory dist there is the file subdir1/subdirpage.html.
The content of the file should be:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sub Directory Page</title>
</head>
<body>
    <h1>Sub Directory Page</h1>

    <a href="subdirpage2.html">subdirpage2.html</a>

    <script src="../subdirpage.7501a095.js"></script>
</body>
</html>

The bundle resulting from the file subdir1/subdirpage.js is subdirpage.7501a095.js which currently is located in the root dist folder.
The file subdirpage2.html is located in the same folder as subdirpage.html the the relative link should reflect this fact.

😯 Current Behavior

The content of the bundled file subdir1/subdirpage.html is the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Sub Directory Page</title>
</head>
<body>
    <h1>Sub Directory Page</h1>

    <a href="subdir1/subdirpage2.html">subdirpage2.html</a>

    <script src="subdirpage.7501a095.js"></script>
</body>
</html>

As you see the URL of the href to the file subdirpage2.html which is in the same folder as subdirpage.html is wrong (does not point to the current folder).
Also the link to the bundled JavaScript file subdirpage.7501a095.js which is located in the root dist folder does not point to the parent folder.

💁 Possible Solution

In my opinion in the method Asset.replaceBundleNames() (/packages/core/parcel-bundler/src/Asset.js) the relative URL should be calculated based on the directory of the parent bundle path (like the path which is calculated here:
https://github.com/parcel-bundler/parcel/blob/parcel-bundler%401.12.1/packages/core/parcel-bundler/src/Bundle.js#L162).
The parent bundle in the example above is subdir1/subdirpage.html.
This should be only be done if the replaced bundle path is relative and the value of the publicURL option is a relative url (like ./).

replaceBundleNames(bundleNameMap) {
...
...
        for (let [name, map] of bundleNameMap) {
          newValue = newValue
            .split(name)
            .join(this.makeBundlePathRelativeToParentBundle(map));
        }
...
...
}

  makeBundlePathRelativeToParentBundle(bundlePath) {
    if (path.isAbsolute(bundlePath)) {
      return bundlePath;
    }
    // if this.options.publicURL is NOT relative also return bundlePath
    
    const parentBundleRelativePath = // get relative path of this.parentBundle (something like this.parentBundle.getHashedBundleName()??)
    const parentBundleRelativeDir =
      path.dirname(parentBundleRelativePath) || '.';
    const relativeBundlePath = path.relative(
      parentBundleRelativeDir,
      bundlePath
    );
    return relativeBundlePath;
  }

🔦 Context

We as a dev team want to structure our web application by putting HTML files and JavaScript files of parts of the site into sub directories. This is currently only possible for JavaScript files but not for HTML file because of this bug.
The example project attached to this issue is an abstract representation of our web application.

💻 Code Sample

repro-html-in-subdir.zip

🌍 Your Environment

Software	Version(s)
Parcel	1.12.1
Node	v10.13.0
npm/Yarn	Yarn 1.13.0
Operating System	Ubuntu 18.10

The text was updated successfully, but these errors were encountered:

tobiaskraus · 2019-05-02T13:40:04Z

Exactly the same problem, I just ran into. Happy to see soon some fixes on this matter.

* replace d3-voronoi with delaunator * tsc commpiler might complain cause of @types/delaunator @types/delaunator version 3.0 is coming soon and will fix it * examples/src folder cannot have subfolder as relative paths are buggy in parcel-bundler (parcel-bundler/parcel#2786) * add examples/README.md

benfrain · 2019-05-24T08:43:47Z

Same issue. @codingphil how are you working around this currently? Just putting everything in the root?

codingphil · 2019-05-24T09:19:41Z

Same issue. @codingphil how are you working around this currently? Just putting everything in the root?

I'm currently using a self built version of parcel with my pull request included ;-)

thewilkybarkid · 2021-01-22T10:40:40Z

There's a merged PR, but I'm still seeing this behaviour with Parcel 2.

mischnic · 2021-01-22T10:42:11Z

@thewilkybarkid Can provide a code sample with Parcel 2?

thewilkybarkid · 2021-01-22T11:12:38Z

Using Parcel 2 on the original code sample still breaks:

parcel-public-url-bug.zip

mischnic · 2021-01-23T22:34:54Z

@thewilkybarkid Why are you using --public-url=./ ? It works without that

Aaronius · 2021-02-17T23:37:30Z

@codingphil Is your self-built version of parcel public somewhere? I noticed you said "with my pull request included", but I didn't really understand that part. We have this same problem and are looking for a fix.

codingphil · 2021-02-17T23:51:36Z

@codingphil Is your self-built version of parcel public somewhere? I noticed you said "with my pull request included", but I didn't really understand that part. We have this same problem and are looking for a fix.

@Aaronius No. Sorry.

I just checked the source with my pull request out locally, changed the version number so that it didn't conflict with the public version, built it and published it to the company internal npm repo. Then I referenced this exact version from the project where I used parcel.

This pull request does not work for parcel v2, of course.
I'm not working at the company any more at which I used parcel and created the pull request.
Therefore I'm not very motivated to try to investigate and fix the issue in v2. Sorry again.

Aaronius · 2021-02-18T00:04:15Z

Oh, I think you're talking about this pull request. Thanks @codingphil. So it looks like that PR was never released (at least under 1.x). This gives me something to work with. Thanks.

codingphil · 2021-02-18T00:14:07Z

Oh, I think you're talking about this pull request. Thanks @codingphil. So it looks like that PR was never released (at least under 1.x). This gives me something to work with. Thanks.

Yes. I was not able to get the tests green (they were kind of flaky - unrelated tests failed).

Aaronius · 2021-02-18T00:15:10Z

Yeah, that fixed our problem. It fixed another problem we were having as well, which is that when we specified a publicUrl and our source HTML file had a script tag referencing a JSX file, the post-processed HTML file left the .jsx file extension in the script tag's src attribute value, rather than changing it to .js.

Thank you for your work on this!

shasherazi · 2023-02-22T19:27:55Z

Is there any development on this? I'm also facing this bug.

Here is my dist directory.

dist
├── index.9fdc10c0.css
├── index.9fdc10c0.css.map
├── index.b1d22321.js
├── index.b1d22321.js.map
├── index.html
└── pages
    ├── blogs
    │   └── mistakes.html
    ├── blogs.a8089d62.css
    ├── blogs.a8089d62.css.map
    └── blogs.html

In dist/index.html, my CSS is linked correctly as

    <link rel="stylesheet" href="index.9fdc10c0.css" />

But in my dist/pages/blogs.html, the path is wrong, as shown below.

    <link rel="stylesheet" href="pages/blogs.a8089d62.css" />

Which is wrong. Instead of pages/blogs.a8089d62.css, it should have been ./blogs.a8089d62.css.
Same with every other nested HTML page. Links are just out of place.

Here is my package.json

{
  "name": "portfolio",
  "version": "1.0.0",
  "author": "shasherazi",
  "license": "WTFPL",
  "source": "./src/index.html",
  "scripts": {
    "start": "parcel",
    "dev": "parcel serve --open",
    "prebuild": "rm -rf dist",
    "build": "parcel build './**/*.html' --public-url ./",
    "deploy": "npm run build && echo shasherazi.me > ./dist/CNAME && gh-pages -d dist"
  },
  "devDependencies": {
    "eslint": "^7.32.0 || ^8.2.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.25.2",
    "gh-pages": "^5.0.0",
    "hint": "^7.1.3",
    "parcel": "^2.8.3",
    "typescript": "^4.9.5"
  },
  "repository": "git@github.com:shasherazi/portfolio.git"
}

codingphil changed the title ~~wrong relative links in sub directory when a relative public url is specified~~ Wrong relative links in sub directory when a relative public url is specified Mar 13, 2019

mischnic added 🐛 Bug ✔️ Confirmed Bug labels Mar 13, 2019

codingphil pushed a commit to frux-technologies/parcel that referenced this issue Mar 14, 2019

Fix parcel-bundler#2786 (links in HTML files in sub directories)

f73912d

codingphil mentioned this issue Mar 14, 2019

Fix #2786 (links in HTML files in sub directories) #2794

Closed

3 tasks

tobiaskraus mentioned this issue Jul 22, 2019

Replace parcel with webpack in examples/ folder tobiaskraus/svg-gen#1

Merged

andig mentioned this issue Nov 10, 2020

Resolving CSS src:url() broken with relative public-url path #5333

Closed

shasherazi mentioned this issue Feb 22, 2023

Multiple html entrys not shared css assets #1441

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Wrong relative links in sub directory when a relative public url is specified #2786

Wrong relative links in sub directory when a relative public url is specified #2786

codingphil commented Mar 13, 2019 •

edited

tobiaskraus commented May 2, 2019

benfrain commented May 24, 2019

codingphil commented May 24, 2019 •

edited

thewilkybarkid commented Jan 22, 2021

mischnic commented Jan 22, 2021

thewilkybarkid commented Jan 22, 2021

mischnic commented Jan 23, 2021

Aaronius commented Feb 17, 2021

codingphil commented Feb 17, 2021 •

edited

Aaronius commented Feb 18, 2021

codingphil commented Feb 18, 2021

Aaronius commented Feb 18, 2021 •

edited

shasherazi commented Feb 22, 2023

Wrong relative links in sub directory when a relative public url is specified #2786

Wrong relative links in sub directory when a relative public url is specified #2786

Comments

codingphil commented Mar 13, 2019 • edited

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

tobiaskraus commented May 2, 2019

benfrain commented May 24, 2019

codingphil commented May 24, 2019 • edited

thewilkybarkid commented Jan 22, 2021

mischnic commented Jan 22, 2021

thewilkybarkid commented Jan 22, 2021

mischnic commented Jan 23, 2021

Aaronius commented Feb 17, 2021

codingphil commented Feb 17, 2021 • edited

Aaronius commented Feb 18, 2021

codingphil commented Feb 18, 2021

Aaronius commented Feb 18, 2021 • edited

shasherazi commented Feb 22, 2023

codingphil commented Mar 13, 2019 •

edited

codingphil commented May 24, 2019 •

edited

codingphil commented Feb 17, 2021 •

edited

Aaronius commented Feb 18, 2021 •

edited