Calling a promise from within an array on a seperate file

I am new to programming in javascript and I am using github codespaces .js thing for it. As well as the firefox browser. The basics I am starting to understand but this problem just baffles me. I am trying to put the code for events into a different file. With a structure so I can just make more files for different events.

This is my App.js file

import './App.css';

import {events} from './events.js';

const files = [
  events,
]

function imports(files) {
  let return_info = []
  for (let file in files) {
    if (files[file].core) {
      return_info[return_info.length+1] = files[file].core()
    }  
  }
  return return_info
}

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          GitHub Codespaces <span className="heart">♥️</span> React
        </p>
        <p className="small">
          Edit <code>src/App.js</code> and save to reload.
        </p>
        {imports(files)}
        <p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </p>
      </header>
    </div>
  );
}

function eventlisting() {
  for (let file in files) {
    if (files[file].subscribe) {
      for (let event in files[file].subscribe) {
        console.debug(`adding event ${event}, with reacton; ${files[file].subscribe[event].reacton} and action of ${files[file].subscribe[event].action}`)
        window.addEventListener(files[file].subscribe[event].reacton, files[file].subscribe[event].action)
      }
    }
  }
}

eventlisting()

export default App;

And this is the file I am trying to get my events in. Named events.js

function errorlog(string) {
    if (typeof(string) === "string") {
        console.error(`An error has occured\n${string}`)
    } else {
        console.error(`An error has occured. And no information was given.`)
    }
}

function window_size_string() {
    return new Promise((resolve, reject) => {
        var windowHeight = window.innerHeight;
        var windowWidth = window.innerWidth;
        if (typeof(windowHeight) === "number" && typeof(windowWidth) === "number") {
            resolve (
                `${windowHeight} by ${windowWidth}`
            )
        } else {
            reject(`types found, ${typeof(windowHeight)} and ${typeof(windowWidth)}`)
        }
    })
}

async function update_window_size() {
  const text = document.getElementById("window_size")
  await window_size_string()
  .then(string => {text.firstChild.nodeValue = string
    })
  .catch(string => errorlog(string));
}


var events = []

events.core = function() {
    return (
        <p id="window_size" className="small">
            blank text
        </p>
    )
}

events.base = function() {
    update_window_size().catch(string => errorlog(string))
}

events.subscribe = [
    {reacton: "resize", action: update_window_size().catch(string => errorlog(string))}
]

export default {events}
export {events}

The thing I expect to happen is that when I load the site I see a line with "blank text" but the moment the screen resizes it changes the text to something else.

I have tried to make different versions of the events.subscribe thingy in events.js. An anonymous function;

events.subscribe = [
    {reacton: "resize", action: {function() {update_window_size().catch(string => errorlog(string))}}}
]

Not calling it as a function.

events.subscribe = [
    {reacton: "resize", action: update_window_size}
]

But the problem did not seem to lay here, so I changed it back to what I had. So I changed the eventlisting() function in app.js. My fist attempt was calling the action as a function.

function eventlisting() {
  for (let file in files) {
    if (files[file].subscribe) {
      for (let event in files[file].subscribe) {
        console.debug(`adding event ${event}, with reacton; ${files[file].subscribe[event].reacton} and action of ${files[file].subscribe[event].action}`)
        window.addEventListener(files[file].subscribe[event].reacton, files[file].subscribe[event].action())
      }
    }
  }
}

This kinda works, if the site is already running before I make this change. But only once. Then I tried to make an anonymous function here but that also did not work.

function eventlisting() {
  for (let file in files) {
    if (files[file].subscribe) {
      for (let event in files[file].subscribe) {
        console.debug(`adding event ${event}, with reacton; ${files[file].subscribe[event].reacton} and action of ${files[file].subscribe[event].action}`)
        window.addEventListener(files[file].subscribe[event].reacton,  function() {files[file].subscribe[event].action();})
      }
    }
  }
}

I am not sure if I am using a stupid way to go about this. Making a rookie mistake. Or I am trying something that should not be done. I hope for insights on how to solve this problem.

I found my problem.

I needed to call a reference to the function I had made, and not the solution of the function. Meaning I needed this code;

events.subscribe = [
    {reacton: "resize", action: update_window_size}
]

Then on the other end I needed to actually call the function to be send through. Either via

function eventlisting() {
  for (let file in files) {
    if (files[file].subscribe) {
      for (let event in files[file].subscribe) {
        console.debug(`adding event ${event}, with reacton; ${files[file].subscribe[event].reacton} and action of ${files[file].subscribe[event].action}`)
        window.addEventListener(files[file].subscribe[event].reacton,  function() {files[file].subscribe[event].action();})
      }
    }
  }
}

Or via;

function eventlisting() {
  for (let file in files) {
    if (files[file].subscribe) {
      for (let event in files[file].subscribe) {
        console.debug(`adding event ${event}, with reacton; ${files[file].subscribe[event].reacton} and action of ${files[file].subscribe[event].action}`)
        window.addEventListener(files[file].subscribe[event].reacton, files[file].subscribe[event].action())
      }
    }
  }
}

I was very close to the solution but not quite there yet.