Как решить конфликты имен переменных после минификации?

Question

[Михаил]

Собираю проект на реакте и после его публикации в проде возникают ошибки

Identifier 'Rv' has already been declared (at index.js:1:1)

или

Cannot set properties of null (settings 'ItemSlider')

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

Вот конфиг vite

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    minify: 'terser',
    terserOptions: {
      mangle: {
        reserved: ['st', 'ga', 'pr', 'V', '$', 'Hw', 'Ew', 'Gw', 'Rv', 't', 'e', 'Pv'],
      },
    },
  }
});

Есть ли способ решить этот вопрос однозначно, например добавлять префиксы к переменным при минификации или изолировать как-то сборку?

Comments

[Aleksey Solovyev]

Почему вы решили решать проблему через изменения в конфиге, а не изолировать рекламный код? "Запихните" его в iife (если он по какой-то странной причине еще не изолирован) или префикс задайте

[Михаил]

Aleksey Solovyev, рекламный код, я имел ввиду, это тег script. Что он там загрузит и как выполнит, только ему известно. Остальной код от гугла или яндекса изолирован (adsbygoogle = window.adsbygoogle || []).push({});

А реакт я так изолировать не смогу?

[Aleksey Solovyev]

Михаил, не знаю переменных, которые бы react или vite использовал глобально (в дефолтном конфиге). Там нечего изолировать.
Что у вас за ошибка:

Cannot set properties of null (settings 'ItemSlider')

какой-то слайдер? Вы можете повторить ошибку и посмотреть "содержимое" переменной Rv? И посмотреть кто хочет перезаписать значение Rv? Хотелось бы понять кто и куда пытается использовать глобальные переменные помимо рекламы. Мне кажется, что дело не в react'е

[imko]

Михаил, type="module"
будет же просто неймспейс своий и все

[Михаил]

Aleksey Solovyev, повторить ошибку сейчас не получается. Когда получится, буду ковырять консоль. Ошибки присылает клиент, у него локация другая и реклама другая идет

Я использую слайдер https://swiperjs.com/react. Похоже в нем проблема, но не пойму где

[Aetae]

Муть. Любой сборщик по умолчанию изолирует весь собираемый код. Т.е. в принципе ни с чем конфликтов возникнуть не может.

Если вы самостоятельно не настроили свой сборщик безумным образом слабо представляю как можно подобного добиться. Тем более ошибки переопределения const, которые возникнут только при явной работе прямо в одном скоупе.

[Михаил]

Aetae, Aleksey Solovyev, вот этот скрипт конфликтует https://mc.yandex.ru/metrika/tag.js. В нем и объявлены глобальные функции и подключается до основного скрипта реакт.

Муть. Любой сборщик по умолчанию изолирует весь собираемый код. Т.е. в принципе ни с чем конфликтов возникнуть не может.

Да я понимаю что фигня какая-то, но что не так не пойму.
Конфиг vite Вы видели

[Михаил]

[Aleksey Solovyev]

Михаил, а как вы вставляете скрипт метрики? В html (index.html) или через react-component (componentDidMount)? Попробуйте второй вариант.

Могут какие расширения стоять в браузере? Можно попробовать отключить их (инкогнито мод) для проверки?

У меня пока других идей нет почему может так происходить. Попробовал разные варианты подключения скрипта на "чистом" проекте - не смог повторить ошибку . Тут только весь ваш проект смотреть/ковырять.

[Михаил]

Aleksey Solovyev, скрипт метрики подключается в html. Второй вариант не получится, т.к. клиент сам прописывает в админке скрипты, а они потом подключаются в html отдельно от реакта.
Ошибку сам смог повторить только с ВПН. И то не с первого раза. Звезды должны сойтись чтобы она вылезла, а вылазит она на проде.

Расширений нет. Поковырять могу предоставить только index.js

[Aleksey Solovyev]

Михаил, так) Что за админка? Своя какая-то или что-то общеизвестное?

[Михаил]

Aleksey Solovyev, своя условная админка, самая обыкновенная, она просто код вставляет из БД в html без проверок

[Aetae]

В общем без дебага не разобраться. По хорошему нужен полноценный реп из которого при сборе можно получить данную ошибку. Или хотя-бы саму страничку. Даже сохранённую браузером.

[Михаил]

Aetae, Aleksey Solovyev, imko, спасибо вам за ответы, все были правы, я сам недосмотрел. Но хоть разобрался что к чему.
Vite по дефолту собирает с глобальными переменными и изолирует код, используя type="module" в теге script. У меня type сломался из-за ошибки верстки, поэтому и смешалось все в кучу.

Еще сработал вариант с iife в настройках сборки:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        format: "iife",
      }
    }
  }
});

Еще раз спасибо что помогли быстро разобраться!

Answer 1

[Михаил]

Vite по дефолту собирает с глобальными переменными и изолирует код, используя type="module" в теге script. У меня type сломался из-за ошибки верстки, поэтому и смешалось все в кучу.

Еще сработал вариант с iife в настройках сборки:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        format: "iife",
      }
    }
  }
});