React项目导出变量报错 playcode沙箱不同登录态报错排查

分状态触发不同报错是playcode平台沙箱规则、默认模板配置和React版本不匹配共同导致的，两类报错的触发逻辑分别是：

• 未登录状态报错：未登录用户的平台沙箱开启了最高等级的安全限制，会拦截页面的localStorage读写、Service Worker注册请求。平台默认React模板自带的react-refresh热更新插件启动时会主动触发这两类操作，被拦截后直接抛出安全策略错误，阻断整个脚本的执行，对应第一张报错截图：
  
• 登录状态报错：登录用户的项目空间默认开启了实验性React 18并发渲染校验、自动资源预加载逻辑，但是模板自带的入口代码还是React 17及之前版本的ReactDOM.render写法，同时平台注入的全局错误监听会和React 18的渲染调度逻辑冲突，触发根节点重复挂载、异步资源加载超时错误，对应第二张报错截图：
  

按照顺序操作即可同时兼容登录、未登录两种使用场景：

1. 替换项目入口的挂载逻辑，适配React 18的API要求。打开src/index.js文件，删除原有ReactDOM.render(<App />, document.getElementById('root'))的代码，替换为以下内容：

   import { createRoot } from 'react-dom/client';
   const rootNode = document.getElementById('root');
   const root = createRoot(rootNode);
   root.render(<App />);
   

2. 关闭平台侧的冲突配置：
   • 打开编辑器左侧设置面板，找到预览设置项，取消勾选启用Service Worker离线缓存
   • 找到React开发辅助设置项，将「强制开启严格模式并发渲染」的选项切换为「跟随项目配置」
3. 如果需要在未登录状态下使用，在src/index.js文件的最顶部加入存储权限兜底逻辑，避免沙箱拦截localStorage导致热更新脚本崩溃：

   window.localStorage = window.localStorage || {
     getItem: () => null,
     setItem: () => {},
     removeItem: () => {}
   };
   

4. 点击预览区的强制刷新按钮，等待平台重新拉取依赖、构建项目后即可正常运行，不会再触发之前的两类报错。

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