posthtml-modules Can't render module

What am I missing? I have an "index.html" inside a "src" folder, a "navbar.html" inside a folder "components".

I cannot get the navbar to show on index.html, I get this in the browser:

<!DOCTYPE html>
<html lang="[en]()">
<head>
<meta charset="[utf-8]()">
<title>Error</title>
</head>
<body>
<pre>Cannot GET /components/navbar.html</pre>
</body>
</html>

navbar.html

<header>
    <h1>
      Test <content></content>
    </h1>
</header>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>

    <module href="/components/navbar.html"></module>

    <div class="bg-black">
        <h1 class="text-white">Home Page</h1>
    </div>
</body>
</html>

posthtml.json

{
    "input": "src/*.html",
    "output": "dist",
    "plugins": {
        "posthtml-modules": {
            "root": "./src/components",
            "initial": true
        },
        "htmlnano": {}
    }
}

Unless I can declare more than 1 inputs in the first key of "inputs" or what am i missing? I thought that I had to declare where the root folder for my modules would be, there's certainly not much detail around this part.

Mar 09 '22 16:03 eduardonwa

Does ./src/components/components/navbar.html exist?

Mar 09 '22 17:03 cossssmin

./src/components/navbar.html exists if you suggest i should double check the root on my jsoni just checked on that and it still don't show even by only using ./src/

Mar 09 '22 18:03 eduardonwa

Okay i inspected the page and i got this on the HTML but it's not rendering:

<module href="[/src/components/navbar.html](view-source:http://127.0.0.1:5500/src/components/navbar.html)"></module>

Mar 09 '22 18:03 eduardonwa

I am using a script to build and watch any changes, but i'd like to know the point of reference from where it starts to read because i am clearly missing something. The terminal sends me this message and it is using an incorrect path:

'C:\Users\$USER\Desktop\lilweb\create-project\templates\javascript\home.html'

Should be javascript/src/home.html, or if i wanted to reach the navbar components javascript/src/components, components it's inside the src folder as you may have noticed i switched the partial.

So my scripts:

    "watch:html": "onchange \"./src/\" -- npm run build:html",
    "build:html": "posthtml -c posthtml.json"

and yet again my posthtml.json:

{
    "input": "src/*.html",
    "output": "dist",
    "plugins": {
        "posthtml-modules": {
            "root": "./src/components/",
            "initial": true
        },
        "htmlnano": {}
    }
}

i'd like to begin the search for my modules from within this directory which the complete path to it would be: javascript/posthtml.json, again the src it's also inside the "javascript" main template folder so it should begin looking at the current directory path.

Mar 10 '22 16:03 eduardonwa