NextJs 使用 noscript 出現的bug

2021 年 7 月 1 日

這是我在nextjs 放置 facebook pixels 追蹤碼時出現的錯誤，這錯誤只會在 next build 完的production 上執行時才會出現，但我想先記錄一下這個問題是怎麼一回事

<noscript >
      <img
        alt=""
        height="1"
        src="https://www.facebook.com/tr?id=FACEBOOK_CODE&ev=PageView&noscript=1"
        style={{ display: 'none' }}
        width="1"
      />
 </noscript>

如果直接複製追蹤碼的範例到 _document.tsx 裡面，在開發時是不會出錯的，只有在build 完啟動時進入頁面就會報錯誤碼

TypeError: Cannot assign to read only property of object ‘#Object’

這問題的解法就是 nosrcipt 不能用 props.children的方式放至內容

要改用 dangerouslysetinnerhtml 參數把內容放入。

論論就是多注意一些 html 標籤 如果 有發現下面錯誤很有可能是有些特定標籤沒有用dangerouslysetinnerhtml 設定

CC BY-NC-ND 2.0 授权