My firefox add-on currently has the main file organizer.js and just does not run when I import stuff from other js files (footer.js and header.js).

manifest.json

{

  "manifest_version": 2,
  "name": "Course Organizer",
  "version": "1.0",

  "description": "Keep the hassles that come with UI of class schedule at bay and make your course selection process smooth and seamless",

  "icons": {
    "48": "icons/border-48.png"
  },
  "content_scripts": [
    {
      "matches": ["*://*.my.wasabi.edu/e/reg/soc-view/results.asp*"],
      "js": ["organizer.js", "footer.js", "header.js"],
      "css": ["index.css"]
    }
  ]

}

organizer.js (the relevant part)

import hello from 'footer'
import head from 'header'

console.log(hello + head)

footer.js

let hello = 'haha'
export {hello}

header.js

let head = 'head'
export {head}

I did some research and found out the js files are loaded in the specified order in the array, so I messed around with it but to no avail. Whenever I comment out the imports, it runs again.