Squarespace站点嵌入React应用致页面元素消失如何解决

这个问题和你写的React业务逻辑没有关系，哪怕是空的Create React App默认项目也会触发，核心是三个默认行为的冲突：

• 直接把CRA执行npm run build后生成的整个index.html内容贴进Squarespace组件时，文件自带的<!DOCTYPE html>、<html>、<head>、<body>等文档级标签，会和Squarespace页面本身已有的完整DOM结构冲突，打乱浏览器的DOM解析逻辑，原生头部、图片节点会被解析移位甚至直接丢弃，自然无法显示。
• Code和Embed两个组件都不是沙箱隔离环境，贴入的代码会直接运行在当前页面的全局上下文里。CRA默认把应用挂载在id="root"的通用节点上，还会注入全局CSS重置规则，很容易和Squarespace本身的全局样式、节点选择器撞车。
• 默认构建的JS脚本没有延迟加载标记，会阻塞Squarespace原生脚本的执行，导致页面自带的图片懒加载、头部渲染逻辑直接中断。

已经有不少开发者在Squarespace上成功嵌入过React应用，按下面的步骤调整就能避开所有冲突：

1. 修改React项目的构建配置 #

不要直接使用完整的构建后HTML文件，只提取静态资源，先改几个默认配置：

• 给React应用设置唯一的挂载节点id，不要用通用的root，比如改成referral-react-app-container，对应修改src/index.js里的挂载逻辑：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// 对应后续在Squarespace里创建的自定义节点id
const root = ReactDOM.createRoot(document.getElementById('referral-react-app-container'));
root.render(<App />);

• 删掉src/index.css里所有全局标签选择器，包括通配符*、body、img、a这类直接选中原生标签的规则，避免覆盖Squarespace的全局样式。推荐给应用最外层套个唯一类名，所有样式都写在这个类名的作用域下，或者直接用CSS Modules做样式隔离。
• 在项目根目录新建.env文件，写入PUBLIC_URL="."，把资源引用路径改成相对路径，避免部署后资源加载404。
• 重新执行npm run build，从build文件夹里找到静态的JS、CSS文件（即static/js、static/css目录下带hash的产物文件），不要用生成的index.html文件。

2. 上传静态资源到Squarespace #

进入Squarespace后台的文件管理页，把上一步拿到的JS、CSS文件上传，拿到两个文件的站内访问路径（一般是/s/[带hash的文件名].css和/s/[带hash的文件名].js格式）。

3. 用Code组件嵌入，不要用Embed组件 #

在目标页面添加Code组件，组件内只贴下面的代码，绝对不要加任何html/head/body这类文档级标签：

<!-- 引入上传的CSS资源 -->
<link rel="stylesheet" href="/s/你的CSS文件名.css">
<!-- 创建React专属挂载节点 -->
<div id="referral-react-app-container" style="width: 100%; min-height: 700px;"></div>
<!-- 加defer标记延迟加载JS，等Squarespace原生内容全部初始化完再运行React逻辑 -->
<script defer src="/s/你的JS文件名.js"></script>

如果做完还有偶发的样式冲突，可以直接用Shadow DOM做彻底隔离，把Code组件里的内容换成下面的版本即可：

<div id="react-app-host"></div>
<script defer>
const host = document.querySelector('#react-app-host');
const shadow = host.attachShadow({ mode: 'open' });
// 注入样式
const styleTag = document.createElement('link');
styleTag.rel = 'stylesheet';
styleTag.href = '/s/你的CSS文件名.css';
// 创建挂载节点
const mountNode = document.createElement('div');
mountNode.id = 'referral-react-app-container';
mountNode.style.minHeight = '700px';
shadow.append(styleTag, mountNode);
// 注意此时要把React挂载的目标改成shadow内部的mountNode
</script>

别图省事用iframe嵌入，Squarespace对iframe的跨域、高度自适应限制很多，移动端适配会出一堆奇奇怪怪的问题，上面的方案是目前社区实测最稳定的。

内容的提问来源于stack exchange，提问作者mark