При билде и развертывании на хостинге (гитхаб pages, netlify) падает приложение, причем на локальном хосте все хорошо. Как решить?

Question

При билде и развертывании на хостинге (гитхаб pages, netlify) падает приложение, причем на локальном хосте все хорошо. Как решить? Ошибка Uncaught Error: registerCurrentComponent: no current owner

Я понял что падает из-за этой строки, но пока не понимаю как это решить. Использование const { TracePanel } = useTracer(); в строке компонента нужно оставить (импорты в StringToReactComponent не работают, поэтому приходится заносить их в window.hooks переменную, а затем вытаскивать).

StringToReactComponent из библиоткеи string-to-react-component, Хуки трассировки из react-hook-tracer

ссылка на проект: https://drive.google.com/drive/folders/18YMR4Cicri_t9V_GRTVLWHx2OWoZumEY?usp=sharing app.js

import './globalHooks'
import StringToReactComponent from "string-to-react-component";

    function App() {
        return (
            <StringToReactComponent>
                {
                    ` () => {
                    const { useState, useTracer } = window.hooks;
                    const { TracePanel } = useTracer();
                    const [value, setValue] = useState(0);
                    return (
                        <div>
                            <span>
                                {value}
                            </span>
                            <TracePanel/>
                        </div>
                    )
                }`
                }
            </StringToReactComponent>
        );

глобальные хуки globalHooks.js:

import {useState, useRef, useTracer} from 'react-hook-tracer';

if (typeof global !== 'undefined') {
  global.hooks = { useState, useRef, useTracer };
}

Answer 1

Какой вам толк от трейсера в продакшн билде? Ну давайте заглянем на гитхаб.

Код метода useTracer() выполняет следующее:

const currentOwner = getCurrentOwner()
if (currentOwner === null) {
  throw new Error('registerCurrentComponent: no current owner')
}

При этом метод getCurrentOwner() обращается к недокументированной внутрянке react, зацените:

export const getCurrentOwner = (): FiberNode | null =>
  React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner.current

Ну и очевидно, что в данном случае .current возвращает null.

С этим ничего не поделать. Но я начал ответ с того, что зачем вам трейсер в обфусцированном и трансформированном реактом коде? То есть не в отладочной сборке. Ну увидите вы, что у вас метод a содержит аргументы b и c с какими-то значениями и вызывает функцию f - что это даст? Реакт-компонентов в продакшн-сборке нет как таковых, там исполняется уже оптимизированная рабочая версия кода. Компоненты как таковые существуют только во время разработки, поэтому и owner здесь как сущность отсуствует.

Вариантов решения несколько:

Завести глобальную константу DEBUG, которая в отладочной сборке будет true, в продакшн сборке будет false либо вообще отсутствовать.
```
if (DEBUG) {
  const { TracePanel } = useTracer();
}
```

Перехватить исключение

try {
  const { TracePanel } = useTracer();
} catch (ex) {
}

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

БЛОГ НА HUSL

При билде и развертывании на хостинге (гитхаб pages, netlify) падает приложение, причем на локальном хосте все хорошо. Как решить?

Ответы (1 шт):