Импорт и последующий вызов анонимной функции?

Question

[Игорь]

Коллеги, приветствую!

Где я делаю ошибку?

Пытаюсь выполнить анонимную функцию из массива.
Смысл в том, что в массиве middleware список имён функций.

Динамически импортирую функцию и пытаюсь выполнить.
На скриншоте видно, что функция импортирована, но при её вызове происходит ошибка

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

Мол в обещании не функция!

В чём дело?

Функция для экспорта

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)
        })
  })
})

Comments

[Игорь]

Понял, в результате объект, а не функция
Вот я балбес.

[Игорь]

Игорь, Вот так работает

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

[Игорь]

Модераторы удалите пост, что бы я не позорился...

[Scorpi]

Игорь, никогда не удаляйте свои вопросы, даже если они кажутся глупыми :)
Ведь для этого такие сайты и существуют, чтобы люди могли находить решения если столкнутся с аналогичной проблемой.

[Антон Швец]

Игорь, лучше делайте именованный экспорт, default не нужен, vue зря его использует.

[Игорь]

Антон Швец,

лучше делайте именованный экспорт, default не нужен, vue зря его использует.

Почему?

Answer 1

[Игорь]

Решение!

Выполняю динамический импорт анонимных функций из @/middleware/

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