Next.js集成TawkTo后出现Corrupted compressed block contents错误求助

先梳理你代码里的几个关键问题，这些都是引发错误的潜在诱因：

1. 修复_app.js的语法与冗余问题 #

• 语法错误：return语句里的<Head>标签后多了个逗号，导致React无法正确识别渲染结构，直接引发渲染异常，进而触发压缩块相关错误。
• 冗余代码：你用dynamic导入了Countdown（实际指向TawkTo组件）但完全未使用，反而直接导入并使用了<TawkTo />，这部分冗余代码可以清理。
• Bootstrap版本冲突：同时引入Bootstrap 3.3.7的CSS和5.0.2的JS，版本不兼容会导致资源加载混乱，也是问题的导火索。

修改后的_app.js示例：

import '../styles/Home.css';
import 'bootstrap/dist/css/bootstrap.css';
import Navbar from './Navbar';
import Footer from './Footer';
import Script from 'next/script';
import Head from 'next/head';
import '@fortawesome/fontawesome-svg-core/styles.css';
import { SSRProvider } from '@react-aria/ssr';
import React from 'react';
import TawkTo from './Components/TawkTo';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Head>
        {/* 移除Bootstrap 3.3.7的CSS，统一使用5.x版本资源 */}
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
      </Head>
      <SSRProvider>
        <React.StrictMode>
          <Navbar />
          <Component {...pageProps} />
          <TawkTo />
          <Footer />
        </React.StrictMode>
      </SSRProvider>
      {/* 用Next.js的Script组件控制Bootstrap脚本加载时机 */}
      <Script 
        src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossOrigin="anonymous"
        strategy="lazyOnload"
      />
    </>
  )
}

export default MyApp

2. 优化TawkTo组件的实现 #

手动创建脚本的方式容易出现加载时机或重复加载问题，改用Next.js官方的<Script>组件加载TawkTo脚本，更符合框架的SSR/SSG规范，能避免潜在的脚本冲突。

修改后的TawkTo.js示例：

import React from 'react';
import Script from 'next/script';

const TawkTo = () => {
  return (
    <>
      <Script
        src="https://embed.tawk.to/5d7e91079f6b7a4457e1cadb/default"
        async
        charset="UTF-8"
        crossOrigin="*"
        strategy="lazyOnload"
        onLoad={() => {
          // 可选：脚本加载完成后可添加自定义逻辑，比如设置访客信息
          window.Tawk_API = window.Tawk_API || {};
          // 示例：window.Tawk_API.setAttributes({name: '访客名称', email: '访客邮箱'}, (err) => console.log(err));
        }}
      />
    </>
  )
}

export default TawkTo

3. 后续测试步骤 #

• 清除浏览器缓存，重启Next.js开发服务器（重新执行npm run dev）
• 测试页面渲染状态，检查控制台是否还有错误

错误原因说明 #

"Corrupted compressed block contents"这类错误通常和资源加载异常、页面渲染结构错误、脚本冲突有关。你代码里的语法错误（多余逗号）导致React渲染失败，加上Bootstrap版本冲突、手动脚本加载不规范，多重因素叠加引发了该错误。

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