resolve path issue, js file not connecting

Question

I have just started with a parcel projekt, and I am having trouble to resolve a path issue.

This is my directory structure:

root
  |__src
      |__js
      |  |__lib
      |  |   |__bro.js
      |  |_index.js
      |
      |__styles
      |    |_main.scss
      |__index.html
      |__index.js
      |__bro.js

If I connect my html file to the index.js when its in the same level as the html file it works out fine with the following in my html file:

<script src="index.js"></script>

and in the index.js file I connect to bro.js and main.scss with the following code:

import {bro} from './bro'
import './styles/main.scss'

document.querySelector('h1').textContent = bro(`How is it going`)

The code for bro.js is the following:

const bro = (greetings) => {
    return `${greetings}, bro`
}

export {bro}

This is working fine and will put out following on the html page:

How is it going, bro

What I would like to solve is if I move index.js file in the js folder, and bro.js file in the lib folder within the js folder.

I have tried the following in the html file if index.js is in the js folder:

<script src="./js/index.js"></script>

and in the index.js file when its in the js folder change the following to connect to bro in the lib folder which is in the js folder, and main.scss which is in the styles folder:

import {bro} from './lib/bro'
import '../styles/main.scss'


document.querySelector('h3').textContent = bro(`How is it going`)

The output I am getting is the static h3 content:

My Page

The main.scss in the styles folder is working, but I am not getting the proper output of the bro.js file in the lib folder.

What am i missing here?

Thanks

Answer 1

I have done some research and the imports are fine as you have them. here is the code I've done to simulate your problem.

And here are the executions, stoping in the queryselector and after it. So I'm guessing the issue is the DOM is not yet loaded when you are using the querySelector (I was getting an error of trying to .textContent of null.

Because with the updated folder tree you've given, the imports are just fine.

And if I remove the window.onload this is the behaviour

and the code in index.js (the only thing that changed) is

import { bro } from './lib/bro'
document.querySelector('#myid').textContent = bro(`How is it going`)