DEV Community 👩‍💻👨‍💻

Calin Baenen
Calin Baenen

Posted on

You should be able to use module scripts in the `file://` protocol!

So, I recently made an Issue on the official HTML repository, whatwg/html, titled with a similar name, #8121, "Suggestion: You should be able to load module-scripts in the file:// protocol.".

But, rather than go in-depth onto why I think we should allow this, I'm going to reiterate over my list of reasons why this should be supported.
If you want to read a more in-depth description and reasoning you can read the Issue.

  1. In the end module scripts have the same effect as loading in multiple dependencies through <script src=""></script>.
  2. For every HTML file that relies on a dependency you must write out all the <script> tags needed to point to every required file, and the scripts have to all be in dependency-resolution order.
  3. It will be hard to debug if you have a lot of dependencies and miss one file or have a typo.
  4. You can't have any of your scripts, dependencies or your main JavaScript files, be async or you risk them loading in the wrong order.
  5. Testing JavaScript code, especially packages, is more difficult without easy access to modules.
  6. The ES6 import/export syntax looks way nicer than a bunch of <script src=""></script>s being spammed.
  7. It can confuse people who don't know about CORS, especially for someone who doesn't understand why this would be an error in the first place.
  8. It already has been the source of confusion as at least three StackOverflow articles have been created on the premise of "Why doesn't my module work in the browser?".
  9. Almost no changes need to be made for it to be utilized by browsers (or by web developers).
  10. The only reason it isn't allowed is because "New features shouldn't be allowed to get around CORS. No exceptions.".

Top comments (1)

baenencalin profile image
Calin Baenen Author

As I stated in a comment I made, an eleventh (11th) reason for allowing module scripts in the file:// protocol would be that it could be helpful for website or graphic design classes where you're making a website and then you learn modular programming on the side.

Visualizing Promises and Async/Await 🤯

async await

☝️ Check out this all-time classic DEV post