[tailwind]Uncaught (in promise) TypeError: Cannot read properties of null (reading 'clientWidth') - react tailwindcss error

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'clientWidth')

 

에러 발생원인:

width를 적용하는 부분(데이터를 유동적으로 불러오는 부분)에서 width와 관련된 태그의 내부 길이를 

document.getById("id 이름").clientWidth로 동적 길이를 측정하여 이벤트 실행시 길이를 변경하는 코드를 className에 적용했기 때문인 것 같다.

여러가지 다른 부분에서 에러를 찾아보다가 발견하게 된것은, tailwind css의 class명에 유동적인 길이값을 넣으면 이러한 에러가 나올수 있다는 걸 알게되어 공유해본다.

하단은 에러가 발생한 원인 코드이다.

import React, { useState } from "react";
import ButtonBasic from "../common/ButtonBasic";
import { CenterModal } from "../common/CenterModal";
import { onSetTitle } from "../features/common/commonSlice";
import { useDispatch } from "react-redux";
const Main = () => {
  const dispatch = useDispatch();
  const [state, setState] = useState("");

[....]


const onClickNonShow = (e) => {
    if (e.target.innerText !== "") {
      setState("");
    }
  };

  return (
    <>
    {*/----------------------------------------------에러 발생한 위치 => clientWidth/*}
      <div className="h-screen flex gap-x-4 w-${clientWidth}px">
        <div className="border p-2 w-1/2 h-full">
          <h1
            onClick={() => {
              dispatch(onSetTitle("first"));
            }}
          >
            First Concept
          </h1>
          <div className="border p-2">
            [{title.station}역]{title.issuekey} {title.station}역{title.mainTxt}
            ({title.subTxt})
          </div>
          <div className="flex justify-end py-2">
            <span>total string length:</span>
            <span>1500</span>
          </div>
          <div className="textArea bg-black text-white rounded-sm p-2 w-full h-[500px] overflow-y-auto"></div>
        </div>
        <div className="py-4 w-1/2 flex flex-col gap-y-4">
          <ButtonBasic title={"0.Title"} onClickShow={onClickShow} />
          <ButtonBasic title={"1.Head"} onClickShow={onClickShow} />
          <ButtonBasic title={"2.AddComponent"} onClickShow={onClickShow} />
          <ButtonBasic title={"3.EditAndShow"} onClickShow={onClickShow} />
          <ButtonBasic title={"4.DeleteAll"} onClickShow={onClickShow} />
          <ButtonBasic title={"5.AllCopied"} onClickShow={onClickShow} />
        </div>
      </div>
      {state !== "" && (
        <CenterModal onClickNonShow={onClickNonShow} state={state} />
      )}
    </>
  );
};

export default Main;

 

해결방안:

테일윈드는 정적으로 알려진 클래스에 의존하므로 동적 길이나 움직임을 나타낼때 작동하지 않을 수 있다.

여러가지 답안들을 찾아보았지만, 제일 쉬운 방법은 해당 태그에 인라인 css인 style을 직접 먹이는 방법이다.

 

    [...]
    {*/------------------------------------수정코드---------/*}
    <div className="h-screen flex gap-x-4 
      style={{width:`${clientWidth}px`}}
      >
        <div className="border p-2 w-1/2 h-full">
          <h1
            onClick={() => {
              dispatch(onSetTitle("first"));
            }}
          >
            First Concept
          </h1>
          <div className="border p-2">
            [{title.station}역]{title.issuekey} {title.station}역{title.mainTxt}
            ({title.subTxt})
          </div>
          
      [...]
      </div>