Single File HTML: Importing function from module within the same doc

I’ve got a form trying to access two functions that’s located all within the same HTML document. The function, dependent on firebase needs to be a module in order to import initializeApp, getFirestore etc.


<input type="button" onclick="formSubmit(); dataSubmit(); return false;">

Vanilla JS

   const formSubmit = () => {
      //works perfectly

<script type="module">
   import { initializeApp } from "";
   import { getFirestore, collection, addDoc } from "";

   const firebaseConfig = {
   const app = initializeApp(firebaseConfig);
   const db = getFirestore(app);

   export const dataSubmit = () => {

Error: "ReferenceError: Can’t find variable: dataSubmit"

It would be much simpler if. I could import it from another file but for the purposes of meeting client requirements I need to keep everything in this HTML file…

Any advice?

>Solution :

You should really follow Quentin’s advice in the linked duplicate, but you can expose module "globals" by explicitly creating window properties:

const dataSubmit = () => {
window.dataSubmit = dataSubmit;
export dataSubmit;

This will work, but the whole point of modules and their global behavior is to avoid the long-standing problem of window namespace pollution.

Leave a Reply