在JSX中嵌入LiveChat脚本出现语法错误的解决方法

问题详情 #

在React的JSX代码中嵌入LiveChat官方聊天机器人脚本时，出现语法错误：Syntax error: Unexpected token, expected "}"，错误指向脚本中的函数定义位置。相关代码和错误信息如下：

原JSX代码片段 #

return <Elements stripe={stripePromise}>
    <IntlProvider locale={locale} messages={messages} textComponent={Fragment}>
        <GoogleOAuthProvider clientId={GOOGLE_CLIENT_ID}>
            <div
                onDragOver={handleDragOver}
                onDrop={handleDrop}
                onMouseOver={mouseOver}
            >
                <Head>
                    <link rel='shortcut icon' href={favicon} type='image/png' />
                </Head>
                <div>
                    <div className={styles.page} onClick={handleCloseSupportChat}>
                        <div className={styles.pageContent}>
                            <Component {...pageProps} />
                        </div>
                    </div>
                </div>
                <script>
                    window.__lc = window.__lc || {};
                    window.__lc.license = 14728555;
                    ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice))
                </script>
                <noscript><a href="https://www.livechat.com/chat-with/14728555/" rel="nofollow">Chat with us</a>, powered by <a href="https://www.livechat.com/?welcome" rel="noopener nofollow" target="_blank">LiveChat</a></noscript>
            </div>
        </GoogleOAuthProvider>
    </IntlProvider>
</Elements>;

错误信息 #

Syntax error: Unexpected token, expected "}"

  288 |                         window.__lc = window.__lc || {};
  289 |                         window.__lc.license = 14728555;
> 290 |                         ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:fun
ction(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){va
r n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice))     
      |                                                                                                     ^

解决方法 #

方法1：使用dangerouslySetInnerHTML注入脚本 #

JSX会将<script>标签内的内容当作JavaScript表达式解析，而非纯文本脚本，导致复杂语法被误解析。通过dangerouslySetInnerHTML可以让React直接渲染纯文本内容，避免语法错误。

修改后的<script>部分代码：

<script
    dangerouslySetInnerHTML={{
        __html: `
            window.__lc = window.__lc || {};
            window.__lc.license = 14728555;
            ;(function(n,t,c){function i(n){return e._h?e._h.apply(null,n):e._q.push(n)}var e={_q:[],_h:null,_v:"2.0",on:function(){i(["on",c.call(arguments)])},once:function(){i(["once",c.call(arguments)])},off:function(){i(["off",c.call(arguments)])},get:function(){if(!e._h)throw new Error("[LiveChatWidget] You can't use getters before load.");return i(["get",c.call(arguments)])},call:function(){i(["call",c.call(arguments)])},init:function(){var n=t.createElement("script");n.async=!0,n.type="text/javascript",n.src="https://cdn.livechatinc.com/tracking.js",t.head.appendChild(n)}};!n.__lc.asyncInit&&e.init(),n.LiveChatWidget=n.LiveChatWidget||e}(window,document,[].slice))
        `
    }}
/>

方法2：通过useEffect动态加载脚本（更推荐） #

在组件挂载时动态创建并插入脚本标签，符合React组件生命周期规范，也避免了在JSX中直接嵌入脚本的问题。

示例代码（函数组件）：

import { useEffect } from 'react';

// 在组件内部添加useEffect钩子
useEffect(() => {
    // 初始化LiveChat配置
    window.__lc = window.__lc || {};
    window.__lc.license = 14728555;

    // 创建脚本标签
    const script = document.createElement('script');
    script.async = true;
    script.type = 'text/javascript';
    script.src = 'https://cdn.livechatinc.com/tracking.js';
    
    // 插入到head中
    document.head.appendChild(script);

    // 组件卸载时清理脚本
    return () => {
        document.head.removeChild(script);
    };
}, []); // 空依赖数组确保只在组件挂载时执行一次

使用这种方法时，需要移除原JSX中的<script>标签，只保留<noscript>部分即可。

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