Importing and then calling an anonymous function?

Question

JavaScript

Colleagues, welcome!
Where am I making a mistake?
I'm trying to execute an anonymous function from an array.
The point is that the middleware array contains a list of function names.
I dynamically import function and I try to execute.
The screenshot shows that the function is imported, but when it is called, an error occurs

Uncaught (in promise) TypeError: f is not a function

A pier in the promise not function!
What's the matter?
Function for export

export default function (){
  console.log("middleware: auth")
}

index.beforeEach((to, from, next) => {
  console.log("router.beforeEach")
  if (!to.meta.middleware) {
    return next()
  }
  const middleware = to.meta.middleware
  const context = {
    to,
    from,
    next,
    store
  }


// проблема здесь
  middleware.forEach(async (e, i, a) => {
    import(`@/middleware/${e}.js`)
        .then((f) => {
          f(context)
        })
  })
})

Answer 1

Decision!
I dynamically import anonymous functions from @/middleware/

middleware.forEach(async (e, i, a) => {
    import(`@/middleware/${e}.js`)
        .then((obj) => {
          obj.default(context)
        })
  })