now i saw this code in a video and I don’t know why when I remove the "." an error shows up, so what does it mean?
import backpack from "./backpack.js";
const markup = (backpack) => {
return `
<div>
<h3>${backpack.name}</h3>
<ul>
<li>Volume: ${backpack.volume}</li>
<li>Color: ${backpack.color}</li>
<li>Number of pockets: ${backpack.pocketNum}</li>
<li>Strap lengths: L: ${backpack.strapLength.left}, R: ${
backpack.strapLength.right
} </li>
<li>Top lid: ${backpack.lidOpen ? "Open" : "Closed"}</li>
</ul>
</div>
`;
};
const main = document.createElement("main");
main.innerHTML = markup(backpack);
document.body.appendChild(main);
export default backpack;
import backpack from "./backpack.js";
The code shown above is doing a relative import to a file by following the path your provide it. Beginning the path with ./ says "Start in the same folder as this file".
This is different to doing import backpack from "backpack" which doesn't use a file path and instead is looking for a module available in the browser. Therefore the JS runtime will search through the available modules and find the appropriate one, in this case backpack.
If you want a lot more information you can see MDN, though it might be too much information too fast. Good luck!
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
Hope this helps :)