Aetae

Приложение собирается сборщиком. Все импорты обрабатываются на стадии сборки, и на стадии сборки же включаются в бандл(основной js файл).
Если вы указываете переменную в пути - это значит только то, что в бандл будут включены ВСЕ файлы находящиеся по такому пути.
Никакие новые файлы(отсутствующие при сборке) уже собранное приложение грузить через import не будет.

Нужна загрузка новых файлов по url? Придётся делать всё руками по-старинке.

Нужна загрузка таки уже имеющихся? Уточняйте путь до минимального:

import(`../Screen/About/${currentScreen.name}.jsx`);

И помните, что в бандле будет ВСЁ по маске `../Screen/About/*.jsx`.
Хоть какое-то уточнение стартового пути необходимо, потому что иначе сборщик бы собрал в бандл вообще все файлы на вашем компьютере, что, думаю, не желаемое поведение.

Возможно что-то поменялось для сборки через vite(т.к. он пользуется модулями), но тут не подскажу.

Очевидно, что он цепляется по id к tracking-widget-script. Поищите в документации, что можно поменять или обратитесь к ним в поддержку.

A. Использовать css animation.
B. Использовать для программной анимации requestAnimationFrame вместо setInterval.
B.1. Не тасовать элементы в dom.

A&B. Использовать для анимации transform: translate вместо position.

На второй вопрос вам ответил Stalker_RED, ответ же на первый вопрос:
потому что, даже после того как вы остановили MediaRecorder, сам аудио-поток(stream) у вас всё ещё захвачен и вы можете слушать его дальше.
Чтобы остановить поток - надо остановить все трэки в нём, примерно так:

function stopStream(stream) {
  stream.getTracks().forEach(
    (track) => track.readyState === 'live' && track.stop()
  );
}

P.S. К Vue вопрос отношения не имеет.

Ошибка точно не в этой строке, а в каком-то магическом коде.

Почему оно возникает?
С высокой вероятностью можно предположить, что:
1. window.dataLayer уже существует.
2. window.dataLayer.push переопределён или window.dataLayer является реактивным (vue?) массивом и отслеживает добавления.(что суть одно)
3. При push вызывается некая функция, которая без всяких проверок на то что значение не пустое делает условно так: puhedValue.ecommerce.hasOwnProperty(...) на чём благополучно и падает.

Что делать?
Не добавлять объект, в котором ecommerce: null, эта хрень ожидает, что ecommerce будет объектом и никак иначе.

Почему?
Хз, читайте доки, наверняка там описано как делать надо и не надо(ну или наоборот НЕ описано подобного варианта с null, что тоже вариант).

В комментах мы нашли решение настоящей проблемы автора вопроса, однако для тех кто будет искать после, как заметил там же Lynn «Кофеман», таки есть одно решение которое будет работать, ServiceWorker с примерно таким кодом:

self.addEventListener('fetch', (event) => {
  const path = event.request.url.replace(location.origin, '');
  
  if (event.request.method === 'POST' && path === '/byFile') {
    return event.respondWith(
      event.request.formData().then(async (data) => {
        const file = data.get('image');
        
        let resonse = { success: false };
        
        if (file) {
          // await api call
          const { name, size } = file;
          resonse = { success: true, name, size };
        }
        
        return new Response(JSON.stringify(resonse));
      })
    );
  }
});

Он позволит перехватывать все POST запросы к url /byFile и таки делать с этими запросами что хочешь.

Но, конечно, так делать ни в коем случае не стоит. Скорее всего ваша задача, как и у автора поста, имеет простое и элегантное решение, не требующее подобных извращений.

Задача не очень понятна если честно. Так чтоли?

const sum = ({data}) => data.reduce((a, b) => a + b, 0);

const colors = [
  { primary: '#AAAAAA', secondary: '#AAABBB' },
  { primary: '#BBBBBB', secondary: '#BBBCCC' },
  { primary: '#CCCCCC', secondary: '#CCCDDD' },
  { primary: '#DDDDDD', secondary: '#DDDEEE' },
]; // ЦВЕТА ВСЕГДА В НУЖНОМ ПОРЯДКЕ

const DATASETS = [
  {
    data: [1, 2, 3, 4, 5],
  },
  {
    data: [2, 3, 4, 5, 6],
  },
  {
    data: [3, 4, 5, 6, 7],
  },
]; // МАССИВ МОЖЕТ БЫТЬ ОГРОМНЫМ, ДАННЫЕ ТОЖЕ

const NEW_DATASETS = DATASETS
  .map((dataset, index) => [sum(dataset), index]) // получаем соответствие суммы индексу
  .sort(([a],[b]) => b - a) // сортируем по сумме в обратном порядке
  .map(([,sortedIndex], index) => ({
    ...DATASETS[index],
    ...colors[sortedIndex]
  }));

Х.з. зачем такое может понадобится, если честно.

Нет.

Переписать что-то у себя ты может и сможешь, но безопасность и ограничения фрейма опираются на браузер, а не на изменённый код.

В любой непонятной ситуации тыкаешь ctrl+click и читаешь, что там написано.

В данном случае это ложное срабатывание на попытку переписать window.name. Можешь им баг запилить.
Еслиб ты сделал так var { name, surname, age } = myUser, то это было бы реальной ошибкой: ты неявно бы менял name окна, но для const это не актуально.

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

Вот тебе универсальная функция:

function setValue(element, value, options) {
  if(typeof element === 'string') 
    element = document.querySelector(element);

  options = Object.assign({
    bubbles: true
  }, options);

  element.dispatchEvent(new MouseEvent('mousedown', options));
  element.dispatchEvent(new MouseEvent('mouseup', options));
  element.dispatchEvent(new MouseEvent('click', options));
  element.dispatchEvent(new Event('focus', options));
  element.dispatchEvent(new Event('keydown', options));
  element.dispatchEvent(new Event('keypress', options));

  element.value = value;

  element.dispatchEvent(new Event('input', options));
  element.dispatchEvent(new Event('keyup', options));
  element.dispatchEvent(new Event('change', options));

  setTimeout(() => element.dispatchEvent(new Event('blur', options)));

  return element;
}

setValue('input[name="email"]', 'новое_значение@example.com')

Половина событий в данном случае может быть лишней, но может где-то ещё пригодиться.

Чтоб можно было использовать функции из других модулей\библиотек, у которых нет доступа к текущему массиву напрямую из области видимости.

Для чего может понадобится весь массив? Да для много чего. Например классический(но не оптимальный) фильтр уникальных значений:

const uniq = (value, index, array) => !array.includes(value, index + 1);

[1, 2, 2, 3, 3, 3].filter(uniq) // [1, 2, 3]

Зависит от того, что вам нужно: "шашечки или ехать".

Коли первое - то тут уж надо глубоко изучать документацию по jsdoc, без гарантированного результата. Ради (почти) никому не нужных извращений я не возьмусь. :)

Коли второе - IDE сейчас кушают любой typescript в jsdoc, потому просто смело пихаете:

/** @type {Array<ReturnType<typeof createElement>>} */

и оно заработает. Но никаких долговременных гарантий.

Чтобы исправить эту и многие иные ошибки надо включить мозг. Прям остановиться, нажать кнопку power on, и таки прочитать: кто тебе пишет, что тебе пишет, почему он тебе такое пишет.

Итак:
Кто тебе пишет? Пишет тебе набор правил vuejs-accessibility(vuejs-доступность по нашему). Этот набор правил сам по себе появиться не мог, он ставится дополнительным плагином. Если ты не знаешь откуда он у тебя взялся и тебе плевать на всяких инвалидов - можешь смело удалить этот плагин из eslint и забыть.

Что тебе пишет? Коли по-басурмански ты не разумеешь, то тебе поможет гугл-транслейт:
1. @mouseout или @mouseleave должны сопровождаться @focusout или @blur для доступности.
2. @mouseover, @mouseenter или @hover должны сопровождаться @focusin или @focus для доступности.

Почему он тебе такое пишет? Вот тут запускай свой мозг на все 146% и начинай по-нстоящему думать. Почему же совместно с @mouseenter нам может понадобится @focusin, если нам это советует правило по доступности? Думай, думай...
Может быть для того, чтобы человек без возможности оперировать мышью смог таки с помощью клавиатуры вызвать связанные события, мм? И небольшое дублирование кода, которое поможет таким людям, совсем не страшно.

P.S. Пока не выключен мозг - подумай ещё:
1. К каким последствиям приведёт бездумное (лишь-бы-eslint-заткнулся) добавление одновременно @focus и @focusin?
2. Не будет ли конфликтов внутри функций в случае получения элементом фокуса таки мышкой?
...

Вопрос в том что ты там закрываешь и открывешь, что у тебя в {{Route('ChangeLanguage', N)}}?
Если там что-то вида /en и /tr то у тебя будет открываться собственно та версия, которая сохранена в закладках\истории, а не так которая была выбрана.

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

selectLang.selectedIndex = localStorage.getItem(storageKey);

вызовет change автоматически - это не так, программная смена не вызывает событий.

Теперь о самом коде:
1. Нахрена там fetch? Ты зачем-то грузишь страницу в воздух, после чего переключаешь на неё.
2. Весь код в принципе хрень. Перенаправление на нужный язык должно происходить на сервере. Если нужен выбор на клиенте с запоминанием - используй куки и читай эти куки на сервере.

Да вроде работает:
В каком именно браузере проблема?

Измени:
const htmlStr = xlsx.write(wb, { type: "binary"
на:
const htmlStr = xlsx.write(wb, { type: "string"

"binary" - это спецформат т.н. "бинарная стока", она подходит для записи в файл напрямую побайтово, но не подходит для отображения на экране.

Тебе английским по белому написано: "Property todos does not exists", что тут непонятно?

Твой компонент TodoList не ожидает пропа todos.

Про "очень просто" ты меня сейчас сильно насмешил. Тот же OAuth - это просто адище под капотом. Но даже в basic auth есть куча мелочей на которых можно запороться.
В общем использовать само собой следует либу, сам ты гарантировано словишь тонну багов и дыр в безопасности, только выбирать более-менее приличную(на глазок - больше 1000 Weekly Downloads на npmjs.com и от не вызывающего подозрений автора).

Со стороны nuxt очевидно лучше всего подойдёт https://auth.nuxtjs.org/ , со стороны laravel - хз, гугли реализацию одного из вариантов поддерживаемых auth.nuxtjs.

Ну и прекратят поддержку либы скорее всего задолго после того как ты прекратишь поддержку и обновление разрабатываемого приложения.:)

Верить клиенту конечно нельзя, но можно сделать вид что веришь:
1. рассчитывай число и на клиенте и на сервере.
2. в начале расчёта один раз синхронизируй с сервером.
3. выводи рассчитываемое на клиенте число с какой угодно плавностью.
4. если синхронизация прям очень важна - продолжай слать число с сервера и сравнивать с клиентом, если разница в пределах (заданной) погрешности - ничего не делай, еслы вышла за пределы - меняй клиентское(ничего страшного если такое будет происходить изредка).
5. если сама по себе синхронизация не особо важна, а важно лишь конечно число, то собственно сравнивай клиентское с серверным только в самом конце. Если совпало (с погрешностью в нужную сторону) - всё ок. Не совпало - клиент хацкер - идёт нафиг.

У любого нормального клиента всё всегда будет совпадать, мегаредкие исключения со сломанными системными часами в любом случае будут баговать, а хацкеры нам и не нужны.

Потому что селектор div.filtr form ul li:not(.sf-field-sort_order) выбирает все li(кроме .sf-field-sort_order) которые находятся внутри div.filtr form ul, т.е. и <li>тест</li> в том числе. Если тебе нужны только прямые потомки, то надо писать так:

div.filtr > form > ul > li:not(.sf-field-sort_order)

и тогда всё будет работать как ты задумывал.