React/nextJs 에러 해결 : Type '{ async: true; src: string; crossorigin: string; }' is not assignable to type

react

React나 Nextjs를 빌드할 때, <script/>에 인자를 잘못 전달하면 발생할 수 있는 에러입니다.

에러 로그:

Failed to compile.
./app/layout.tsx:66:123
Type error: Type '{ async: true; src: string; crossorigin: string; }' is not assignable to type 'DetailedHTMLProps<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>'.
  Property 'crossorigin' does not exist on type 'DetailedHTMLProps<ScriptHTMLAttributes<HTMLScriptElement>, HTMLScriptElement>'. Did you mean 'crossOrigin'?
  64 |         <link rel="icon" type="image/png" sizes="32x32" href="/favicon.png" />
  65 |         {/* Adsense */}
> 66 |         <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXX" crossorigin="anonymous"></script>
     |                                                                                                                           ^
  67 |         {/* Google tag (gtag.js) */}
  68 |         <script async src="https://www.googletagmanager.com/gtag/js?id=G-HCL4GCDCXG"></script>
  69 |         <script
Static worker exited with code: 1 and signal: null
Error: Command "npm run build" exited with 1

에러가 발생한 코드는, TSX를 사용하는 Nextjs 프로젝트에 아래와 같이 애드센스 코드를 추가하려고 했는데요. crossorigin를 prop으로 넘길 때 타입이 맞지 않아 에러가 발생했습니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5054044835381594" 
	crossorigin="anonymous"></script>

문제 해결

TypeScript은 <script> 태그에 전달하는 props가 React.ScriptHTMLAttributes<HTMLScriptElement>와 맞아야 한다는데요.

아래 코드에서는 crossorigin → crossOrigin으로 변경을 해야 합니다.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5054044835381594" 
	crossorigin="anonymous"></script>

Next.js라면 <script> 대신 next/script의 <Script /> 컴포넌트를 사용하는 게 더 좋고, 타입도 안전하다고 합니다.

  • async는 async 또는 async={true}으로 입력 가능
import Script from 'next/script';

<Script
  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5054044835381594"
  async
  crossOrigin="anonymous"
/>
Loading script...
codechachaCopyright ©2019 codechacha