NextJs 使用 noscript 出現的bug

前端野人
·
·
IPFS
·
這是我在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

Like my work? Don't forget to support and clap, let me know that you are with me on the road of creation. Keep this enthusiasm together!