React, Webpack и Tampermonkey: `не может установить событие свойства # <Object>, у которого есть только геттер`

Написание сценария Tampermonkey, который вставляет встроенные формы на веб-страницу, которые нельзя редактировать напрямую. Формы взаимодействуют с отдельным сервером.

Создал прототип с использованием jQuery, но я хочу заставить React работать для поддержки лучшего UX. В интересах согласованности с другой работой я также хотел бы использовать webpack и jsx.

Сценарий прост, выполняя одно действие за раз:

import React from 'react';
import ReactDOM from 'react-dom';

GM_addStyle(require(__dirname + '/styles/app.css'));

console.info("webpacked script is working!");

const Hello = () => <div>hello</div>

const graph = document.querySelector('a[href* = "url_here"]');

console.info(graph);

ReactDOM.render(<Hello />, graph)

Я пробовал querySelectorAll, byTagName, на всякий случай, если они будут как-то иначе.

Однако сгенерированный сценарий завершается ошибкой с "успешной максимальной глубиной обновления" после ряда таких вызовов:

React, Webpack и Tampermonkey: `не может установить событие свойства # &lt;Object&gt;, у которого есть только геттер`

"Сценарий, запакованный через Интернет, работает!" выводится на консоль, а целевой элемент удаляется из dom, но div <Hello /> не отображается на его месте.

Эта оскорбительная строка, запакованная / переданная через Интернет, но не минифицированная и начинающаяся с fakeNode, находится здесь:

     if ("undefined" != typeof window && "function" == typeof window.dispatchEvent && "undefined" != typeof document && "function" == typeof document.createEvent) {
        var fakeNode = document.createElement("react");
        invokeGuardedCallbackImpl = function(name, func, context, a, b, c, d, e, f) {
            "undefined" == typeof document && invariant(!1, "The `document` global was defined when React was initialized, but is not defined anymore. This can happen in a test environment if a component schedules an update from an asynchronous callback, but the test has already finished running. To solve this, you can either unmount the component at the end of your test (and ensure that any asynchronous operations get canceled in `componentWillUnmount`), or you can change the test itself to be asynchronous.");
            var evt = document.createEvent("Event"), didError = !0, windowEvent = window.event, windowEventDescriptor = Object.getOwnPropertyDescriptor(window, "event"), funcArgs = Array.prototype.slice.call(arguments, 3);
            var error = void 0, didSetError = !1, isCrossOriginError = !1;
            function handleWindowError(event) {
                if (error = event.error, didSetError = !0, null === error && 0 === event.colno && 0 === event.lineno && (isCrossOriginError = !0), 
                event.defaultPrevented && null != error && "object" == typeof error) try {
                    error._suppressLogging = !0;
                } catch (inner) {}
            }
            var evtType = "react-" + (name || "invokeguardedcallback");
            window.addEventListener("error", handleWindowError), fakeNode.addEventListener(evtType, function callCallback() {
                fakeNode.removeEventListener(evtType, callCallback, !1), void 0 !== window.event && window.hasOwnProperty("event") && (window.event = windowEvent), 
                func.apply(context, funcArgs), didError = !1;
            }, !1), evt.initEvent(evtType, !1, !1), fakeNode.dispatchEvent(evt), windowEventDescriptor && Object.defineProperty(window, "event", windowEventDescriptor), 
            didError && (didSetError ? isCrossOriginError && (error = new Error("A cross-origin error was thrown. React doesn't have access to the actual error object in development. See ... for more information.")) : error = new Error("An error was thrown inside one of your components, but React doesn't know what it was. This is likely due to browser flakiness. React does its best to preserve the \"Pause on exceptions\" behavior of the DevTools, which requires some DEV-mode only tricks. It's possible that these don't work in your browser. Try triggering the error in production mode, or switching to a modern browser. If you suspect that this is actually an issue with React, please file an issue."), 
            this.onError(error)), window.removeEventListener("error", handleWindowError);
        };
    }

Мне кажется, что ReactDOM не получает доступа к ожидаемому объекту окна, вероятно, проксируемому где-то Tampermonkey.

Так ли это или это другая проблема?

Есть ли способ заставить ReactDOM правильно отображаться в этом скрипте Tampermonkey?

Почти дубликат stackoverflow.com/a/1732454/331508.

Brock Adams 07.01.2019 22:38

Ха-ха, не уверен, хотите ли вы сказать, что это неразборчиво, весело или вы хотели опубликовать другую ссылку, но в любом случае оказывается, что я нашел свое решение в вашем ответе от 2012 года. Думаю, я не могу сказать спасибо, так что [отредактировано]!

kalzen 08.01.2019 05:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
1 039
1

Ответы 1

Быстрое исправление: window = unsafeWindow в верхней части скрипта tampermonkey, легко добавляется с помощью BannerPlugin. webpack

Для других вариантов / фона: Почему window (и unsafeWindow) отличается от пользовательского скрипта и тега <script>?

Другие вопросы по теме