Parcel: How to link to different pages in JS?

[willwull]

🤔 Question:

I was wondering how you create links to other HTML pages from JS.
Say I have two files, a.html and b.html and a JS file in a.html with this:

const link = document.createElement("a");
link.setAttribute("href", "./b.html");
link.textContent = "JS link";
document.body.appendChild(link);

Since the built files all get put in the dist folder without any folder structure and hashed names, how do you actually reference other static files? I know you handle src for images by importing the image file in JS as a dependency, but what about HTML files? I've tried b.html, ./b.html, but none work.

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

{
  "name": "parcel-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "parcel a.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.5.0"
  }
}

🤔 Expected Behavior

Clicking on the generated link takes me to b.html.

😯 Current Behavior

Clicking on the link changes the address in the browser to localhost:1234/b.html but doesn't actually load that file.

💁 Possible Solution

Maybe preserve file names so links created in JS will work? Or am I missing something obvious here? 😰

🔦 Context

I'm loading some (external) data through JavaScript and I want to create links to the appropriate pages depending on the data I've loaded in.

💻 Code Sample

None

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.5
| Node | 8.9.3
| npm/Yarn | 5.6.0
| Operating System | macOS 10.13.3

[Powell-v2]

Heyyo, I'd like to help out with this one. However, I'm new to this project and would appreciate a little bit of direction 🙂

[davidnagli]

@Powell-v2 Hop onto the Slack and message us! We’re always happy to help :)

[davidnagli]

@Powell-v2 Any progress on this?

[Powell-v2]

I asked a question on Slack's #contributors channel but nobody responded. I'd love to contribute, just don't know where to start since I'm new to the project ... could you give me a quick idea on how to tackle this one, @davidnagli? Thank you very much in advance!

[davidnagli]

Upon further review and discussion, I think that this feature isn't very useful, and would be nearly impossible to implement.

You can accomplish the exact same thing by importing the html, which will return a URI. For example:

import loginPage from 'login.html'

const link = document.createElement("a");
link.setAttribute("href", loginPage);
link.textContent = "Login Page";
document.body.appendChild(link);

It's just a string with the URI, so you can use it in any way you want:

import loginPage from 'login.html'

/* stuff... */

<a href=loginPage>Login</a>

Importing HTML files (at least in Parcel 1.x) will always resolve that file and return a URI pointing to it, not the actual file contents.

Note: This also works in the same exact way with CommonJS require

[ericperrotta]

@davidnagli: I am new parcel.js and frontend development in general. I am trying to do as you suggested and trying to import the html. I keep getting an error with my import statement. Since I am new to parcel and CommonJS, I am probably not structuring the import correctly. In my case I am trying to import an file that is 2 directories up from the file where the import statement is located. My import statement looks something like this:

import longForm from '../../long_form.html'

I keep getting the error: "Cannot find module". Is there something different I should be doing with my import statement?

[ericperrotta]

@willwull, were you able to get this working?

[willwull]

@ericperrotta I gave up on this 😅

[felixrabe]

Currently stuck on this too. With an index.html file and the following JS code:

javascript import indexPage from './index.html' console.log('yay', indexPage)

I keep getting

Error: Cannot find module '3'

[felixrabe]

Sample code: https://github.com/felixrabe/e-2018-051-parcel-1.7.1-include-html-from-js

Run with yarn dev == ./node_modules/.bin/parcel index.html and open http://localhost:1234/ in browser. Console log will contain Error: Cannot find module '6'.

[felixrabe]

My goal is (in Electron main process) to figure out the correct HTML path to supply to BrowserWindow.loadURL().

[maferland]

Hey @davidnagli,

Currently, this does not work

import loginPage from 'login.html'

/* stuff... */

<a href=loginPage>Login</a>

Seems like #1119 might be a workaround #1239 is interesting as well.
Let me know if I can help either by helping close #1119 or by submitting a PR to fix this issue.

[mischnic]

Currently, this

import site from "./pages/site.html";

console.log(site);

will print out the contents of that html file.

[mischnic]

Followup: #1732 actually made html imports return the content and not the url.

[mischnic]

This needs some design work (e.g. #2306) on how to specify if the url or actual content should be imported

[quasicomputational]

I realised this was possible with today's plugins by treating a magic file extension as a signal to import the asset as an URL, and put that together, plus instructions. I think there's still value in having this baked into Parcel because this is definitely a hack, but it's got the virtue of being a hack that works.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.