-2

Basically, I have a html file called panel containing a simple DIV that I would like to insert into another main HTML file.

Instead of using web components, I'd like to implement a simple solution as described in this answer.

So, here is what I am doing for testing (just logging the panel to console):

panel.html

<div id="panel">
    <h1>It works...</h1>
</div>

get-template.ts

export async function getTemplate(filepath: string, selectors: string) {
    let response = await fetch(filepath);
    let txt = await response.text();

    let html =  new DOMParser().parseFromString(txt, 'text/html');

    return html.querySelector(selectors);
}

main.ts

import { getTemplate } from './get-template'

getTemplate('/path/to/panel.html','#panel').then((panel) => {console.log(panel);})

The console logs "null".

If this info could make any difference, I am using parcel-bundler to build the application.

umbe1987
  • 1,542
  • 4
  • 25
  • 43
  • By “local”, do you mean that you are testing this by loading the main HTML document in your browser via the _file system_, or do you have a proper local web server set-up, and are loading them via HTTP(S)? It needs to be the latter, https://stackoverflow.com/questions/50007055/fetch-request-to-local-file-not-working – CBroe Mar 31 '20 at 10:39
  • Everything is tested using parcel. The panel.html is referenced with a local path inside the first getTemplate parameter. – umbe1987 Mar 31 '20 at 11:09
  • _“Everything is tested using parcel.”_ - I don’t know what that is, therefor not what this means in regard to whether you are actually testing via HTTP or not, either. – CBroe Mar 31 '20 at 11:21
  • Yes it means I have a localhost which serves all my built source files via HTTP. I am only fetching panel.html through its local path (non HTTP, my computer path). I think this would be possible, isn't it? – umbe1987 Mar 31 '20 at 11:30
  • If you load the main document via HTTP, then `/path/to/panel.html` automatically resolves to an absolute HTTP URL as well. _Is_ that the actual path value you are using, or is it something else, that deliberately tries to access this via the file system? – CBroe Mar 31 '20 at 11:34
  • The actual value I am using is '/home/umberto/myapp/src/panel/panel.html' The idea is that in my app, panel.html is only used to separate this part of what will be the main HTML. So I am fetching it hoping to retrieve it as a `HTMLElement` with my `getTemplate` function (that's what [`Document.querySelector()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) is supposed to return when used successfully), and then place it with JS somewhere inside my main HTML. At the moment, I am just testing if I can get the HTMLElement, but in the console I just log a `null` value. – umbe1987 Mar 31 '20 at 11:52
  • Comsole doesn’t say anything else, errors/warnings? What do you see, when you inspect the actual request in the network panel? – CBroe Mar 31 '20 at 11:56
  • I think you pointed me to the right direction, thanks! The network panel reads 200 OK for the panel.html resource, but its URL became 'localhost:1234/home/umberto/myapp/src/panel/panel.html' which does not exists. I wonder if this is simply due to how parcel builds my app, or if it would happen anyway... – umbe1987 Mar 31 '20 at 12:10
  • 1
    So you are accessing your main document via `http://localhost:1234`? Then this is simply how relative URLs _work_. What did you _expect_ where `/home/umberto/myapp/src/panel/panel.html` should refer to? – CBroe Mar 31 '20 at 12:13
  • Yeah, localhost:1234 points to the `dist` dir that is created b parcel when it builds my app. If I copy and paste panel.html in the `dist` directory and refer to it in my code with a relative URL like `getTemplate('./panel.html')` the code works. Thank you for your efforts. – umbe1987 Mar 31 '20 at 12:14
  • _What did you expect where /home/umberto/myapp/src/panel/panel.html should refer to?_ At the beginning of my test, i tried with a relative path and failed. Actually, as I said in my previous comment, it's a matter of using relative paths but having in mind it has to be relative to the dist folder created when parcel builds the app. I don't think this was a question worth downvotes, but this is just my opinion and I can live with that. Thanks for helping me out, really appreciate it! – umbe1987 Mar 31 '20 at 12:17

1 Answers1

0

The actual problem was determined by @CBroe and was about the fact that when parcel builds my application, the file path of my panel.html resource changes to be relative to the built dist folder.

Just to clarify:

  • before building the path is relative to the main.ts file
  • after building the path is relative to the dist folder

So the solution is to think about the final URL the panel.html will have, and refer to it in advance before building with parcel.

Something like this would work in my case:

main.ts (new)

import { getTemplate } from './get-template'

getTemplate('./panel.html','#panel').then((panel) => {console.log(panel);})

Then of course, the other step will be to copy the actual panel.hml file into the dist directory, otherwise the URL will point to a non existing file.

I see there was a github issue about automatically copy static (or assets) files in the parcel repository, and one of the solution provided is to use the plugin parcel-plugin-static-files-copy.

umbe1987
  • 1,542
  • 4
  • 25
  • 43