Ошибка загрузки typeerror pluck is not a function

Great JS client, and works really well.

One issue I’ve found is that when using it in the WP Editor area (as part of a JS-fuelled WordPress plugin using React), I get the following console errors:

load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,heartbeat,autosave,wp-ajax-response,jquery…:380 Uncaught TypeError: _.pluck is not a functiondetach @ load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,heartbeat,autosave,wp-ajax-response,jquery…:380render @ load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,heartbeat,autosave,wp-ajax-response,jquery…:380render @ load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,heartbeat,autosave,wp-ajax-response,jquery…:416init @ load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,heartbeat,autosave,wp-ajax-response,jquery…:417i @ jquery.js:1fireWith @ jquery.js:1ready @ jquery.js:1K @ jquery.js:1
load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,heartbeat,autosave,wp-ajax-response,jquery…:419 Uncaught TypeError: _.pluck is not a function

and

load-scripts.php?c=0&load[]=hoverIntent,common,admin-bar,heartbeat,autosave,wp-ajax-response,jquery…:663 Uncaught TypeError: Cannot read property 'hasClass' of undefined

I’ve extensively tested and turned everything else off/on, and only when I remove the node-wpapi library from my webpack file (therefore not including it in my project) do the above errors stop.

Всем привет.
Столкнулся на одном сайте с невиданной ранее проблемой.
Версия ВП 5.5.3.
С включенным плагином Yoast SEO(текущая версия 15.2.1) в библиотеке медиа перестают отображаться медиа вообще, только заголовок страницы и всё. В консоли имеем ошибку
Uncaught TypeError: _.pluck is not a function
at wp.Backbone.Subviews.detach (wp-backbone.min.js?ver=5.5.3:2)
at i.render (wp-backbone.min.js?ver=5.5.3:2)
at initialize (media-grid.min.js?ver=5.5.3:2)
at i.h.View (backbone.min.js?ver=1.4.0:2)
at i.constructor (wp-backbone.min.js?ver=5.5.3:2)
at i.constructor (media-views.min.js?ver=5.5.3:2)
at i [as constructor] (backbone.min.js?ver=1.4.0:2)
at i [as constructor] (backbone.min.js?ver=1.4.0:2)
at new i (backbone.min.js?ver=1.4.0:2)
at Object.wp.media (media-models.min.js?ver=5.5.3:2)

Соответственно, с выключенным плагином проблем нет. Плагин не премиум.
Все доступные настройки перетыкал, результата никакого.
ВП переустанавливал.

Похожие вопросы

Похожие вопросы

Рассматривать будем на примере данного объекта

const data = {
    name: 'TypeError',
    message: '',
    errors: null,
    sayHi: function() {
        console.log(this.name)
    }
}

Uncaught TypeError: *** is not a function

Данная ошибка возникает в том случае, когда у объекта мы пытаемся вызвать метод(функцию), но она таковой не является.

data.getName(); // <- Uncaught TypeError: data.getName is not a function
data.errors(); // <- Uncaught TypeError: data.errors is not a function

В первом случае getName() нет в объекте, во втором, errors не является функцией.

Несоответствие типов

Возможно, мы ожидаем, что к нам придет массив и мы пытаемся выполнить:

data.name.forEach(item => console.log(item));

Получим ошибку, так как у строк нет метода forEach

Ошибка экспорта/импорта зависимостей

// Экспорт из файла
const fnc = (a) => { return a*a; }
export { func: fnc() }
// Импорт
import { func } from 'module';
func(); // <- func is not a function

Мы ожидали, что будет импортирована функция, однако вместо самой функции, мы импортировали результат ее выполнения. Функции должны экспортироваться без вызова ()

Как избежать подобных ошибок?

Проверять, что приходит в объекте и существуют ли в объекте нужные нам данные. Один из вариантов проверки, воспользоваться console.log().
Можно начать с последнего ключа, однако лучше вывести весь пусть, чтобы понимать структуру, с которой работаем:

console.log(data) // { name: 'TypeError', message: '', errors: null, sayHi: [Function] }
console.log(data.errors) // null
console.log(data.sayHi) // [Function: sayHi]

Перед вызовом функции, желательно проверить ключ на тип. И если наш ключ является функцией, то вызывать.

// data существует, есть ключ sayHi и sayHi функция
if (data && data.sayHi && typeof data.sayHi === 'function') {
    data.sayHi();
}

При проверке в if лучше указывать полную цепочку ключей для проверки, так как, например, следующая конструкция вызовет исключение, т.к. data.values не существует:

if (data.values.showValue && typeof data.values.showValue === 'function') {
    console.log(data.values.showValue());
}

Сократить код можно, воспользовавшись оператором необязательной цепочки вызовов ‘?.‘:

// data существует?, есть ключ sayHi и sayHi функция
if (data?.sayHi && typeof data.sayHi === 'function') {
    data.sayHi();
}

Оператор необязательной цепочки вызовов будет проверять значение слева. Если значение null или undefined, цепочка прерывается и возвращается значение undefined.

Порой, такие ошибки, даже когда мы уверены в правильности данных, могут быть вызваны банальной опечаткой. Проверяйте себя и свой код!

if (data && data.sayHi && typeof data.sayHi === 'function') {
    data.sayHI(); // sayHI нет, но есть sayHi
}

Импорт/экспорт функций

При экспорте функций, передается только имя функции.

// Экспорт из файла
const fnc = (a) => { return a*a; }
export { func: fnc } // Нет ()
// Импорт
import { func } from 'module';
func(2); // <- 4

Отдельное исключение есть для функций или классов, когда нам это необходимо. Допустим нам нужен глобальный счетчик.

function counterFnc() {
  let count = 0;
  return () => {
    return ++count;
  }
}

class Counter {
  #count = 0;
  inc() {
    return ++this.#count;
  }
}
const incer = new Counter();
export { 
  counter: counterFnc(),
  countCl: incer,
  increase: incer.inc
}
// import
import { counter, countCl, increase } from 'module';
counter(); // OK
countCl.inc(); // OK
increase(); // OK