React + jquery + внедрение кода начальной загрузки на Squarespace ⇐ Javascript

[Anonymous]

Я унаследовал приложение React 16, построенное с помощью Create-Create-App, построенное и развернутое на страницах GitHub с рабочим процессом, который наблюдает за основной ветвью. Моя миссия - перенести его из NetLify на новую домашнюю страницу на Squarespace. Я бы предпочел избегать больших изменений, например, Выбросит CRA, по крайней мере, до тех пор, пока приложение не загружается на новую домашнюю страницу. Я смог загрузить приложение на Squarespace, вставив следующее в кодовый блок: < /p>

Код: Выделить всё

Insert app here





< /code>
Проблема с этим подходом заключается в том, что сайт снижается при изменении имен файлов. Я могу обновить Squarespace довольно быстро, но это склонна к ошибкам и утомительно. Я изучил отключение поведения хеширования, но не нравились решения, которые я нашел, например, выбросит CRA. Кроме того, я предполагаю, что для этого есть веская причина.  Я добавил следующий скрипт после шага сборки в рабочем процессе: < /p>
import { JSDOM } from 'jsdom';
import { open } from 'node:fs/promises';

const inPath = 'build/index.html';
const dom = await JSDOM.fromFile(inPath);

const outPath = 'build/embed-snippet.html';
const outFile = await open(outPath, 'w');
const outStream = outFile.createWriteStream();

const links = dom.window.document.querySelectorAll('link[rel=stylesheet]');

for (const link of links) {
outStream.write(link.outerHTML + '\n');
}

outStream.write('Insert app here\n');

const scripts = dom.window.document.querySelectorAll('script');

for (const script of scripts) {
outStream.write(script.outerHTML + '\n');
}
< /code>
Затем я заменил содержимое блока кода на Squarespace: < /p>
Insert app here


const url = 'https://my-org.github.io/my-repo/embed-snippet.html';
const response = await fetch(url, {cache: 'no-cache'});
document.getElementById('root-host').innerHTML = await response.text();

Это не работает, потому что сценарии, вставленные с innerhtml не выполнять.

Код: Выделить всё

import { JSDOM } from 'jsdom';
import { open } from 'node:fs/promises';

const inPath = 'build/index.html';
const document = (await JSDOM.fromFile(inPath)).window.document;

const outPath = 'build/embed.js';
const outFile = await open(outPath, 'w');
const outStream = outFile.createWriteStream();

const links = [...document.querySelectorAll('link[rel=stylesheet]')].map(el => {
return {
href: el.hasAttribute('href') ? el.getAttribute('href') : undefined,
integrity: el.hasAttribute('integrity') ? el.getAttribute('integrity') : undefined,
crossOrigin: el.hasAttribute('crossOrigin') ? el.getAttribute('crossOrigin') : undefined,
};
});

const scripts = [...document.querySelectorAll('script')].map(el =>  {
return {
src: el.hasAttribute('src') ? el.getAttribute('src') : undefined,
integrity: el.hasAttribute('integrity') ? el.getAttribute('integrity') : undefined,
crossOrigin: el.hasAttribute('crossOrigin') ? el.getAttribute('crossOrigin') : undefined,
defer: el.hasAttribute('defer') ? true : undefined,
async: el.hasAttribute('async') ? true : undefined,
};
});

outStream.write(`const links = ${JSON.stringify(links)};

for (const link of links) {
const el = document.createElement('link');
el.rel = 'stylesheet';
el.href = link.href;
if (link.integrity) el.integrity = link.integrity;
if (link.crossOrigin) el.crossOrigin = link.crossOrigin;
document.head.appendChild(el);
}

const scripts = ${JSON.stringify(scripts)};

for (const script of scripts) {
const el = document.createElement('script');
el.src = script.src;
if (script.integrity) el.integrity = script.integrity;
if (script.crossOrigin) el.crossOrigin = script.crossOrigin;
if (script.defer) el.defer = true;
if (script.async) el.async = true;
document.body.appendChild(el);
}`);
< /code>
Полученный enced.js выглядит следующим образом: < /p>
const links = [{
"href": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css",
"integrity": "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T",
"crossOrigin": "anonymous"
}, {
"href": "https://use.fontawesome.com/releases/v5.7.2/css/all.css",
"integrity": "sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr",
"crossOrigin": "anonymous"
},
{
"href": "https://my-org.github.io/my-repo/static/css/main.a8d72baf.css"
}];

for (const link of links) {
const el = document.createElement('link');
el.rel = 'stylesheet';
el.href = link.href;
if (link.integrity) el.integrity = link.integrity;
if (link.crossOrigin) el.crossOrigin = link.crossOrigin;
document.head.appendChild(el);
}

const scripts = [{
"src": "https://my-org.github.io/my-repo/static/js/main.9ca04874.js",
"defer": true
}, {
"src": "https://code.jquery.com/jquery-3.3.1.slim.min.js",
"integrity": "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo",
"crossOrigin": "anonymous"
}, {
"src": "https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js",
"integrity": "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1",
"crossOrigin": "anonymous"
}, {
"src": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js",
"integrity": "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM",
"crossOrigin": "anonymous"
}];

for (const script of scripts) {
const el = document.createElement('script');
el.src = script.src;
if (script.integrity) el.integrity = script.integrity;
if (script.crossOrigin) el.crossOrigin = script.crossOrigin;
if (script.defer) el.defer = true;
if (script.async) el.async = true;
document.body.appendChild(el);
}
< /code>
Вот новое содержимое блока кода на Squarespace: < /p>
Insert app here

< /code>
Проблема теперь заключается в том, что приложение загружается только в половине времени. Другая половина времени я получаю ошибку, подобную этой: < /p>
Uncaught TypeError: Cannot read properties of undefined (reading 'fn')
at util.js:55:5
at bootstrap.min.js:6:200
at bootstrap.min.js:6:246

Uncaught TypeError: window.$(...).tooltip is not a function
at Header.js:18:29
< /code>
Первая ошибка предполагает, что Bootstrap загружается перед jQuery, но сценарии заказаны правильно в соответствии с документами BS4.  Я попытался изменить порядок сценариев, например, SO: < /p>
const scripts = [{
"src": "https://code.jquery.com/jquery-3.3.1.slim.min.js",
"integrity": "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo",
"crossOrigin": "anonymous"
}, {
"src": "https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js",
"integrity": "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1",
"crossOrigin": "anonymous"
}, {
"src": "https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js",
"integrity": "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM",
"crossOrigin": "anonymous"
}, {
"src": "https://my-org.github.io/my-repo/static/js/main.9ca04874.js",
"defer": true
}];
< /code>
Но проблема сохраняется. Я также попытался добавить DEFER 

ко всем сценариям, но это тоже не сработало. Это действительно загадочно, потому что в соответствии с MDN:

сценарии, загруженные атрибутом Defer, будут загружаться в порядке, который они появляются на странице. class = "lang-js prettyprint-override">

Код: Выделить всё

import React, { useRef, useState , useEffect} from 'react';

const Header = (props) => {
const myRef = useRef(null);

useEffect(() => {
window.$(myRef.current).tooltip();
}, []);

Я где -то читал, что крюк работает после загрузки DOM, аналогично $ (Document) .Ready , и является подходящим временем/местом для таких вещей. Даже если это не правда, это не объяснит первую ошибку, не будет ли. Но должен быть лучший способ, верно?

Подробнее здесь: https://stackoverflow.com/questions/795 ... quarespace