react Chart.js 에서 "Scatter is not a registered element" 에러 해결하는 법

0. 참고

라이브러리: react, typescript, chart.js 3.9.1버전, react-chartjs-2 4.3.1버전 (실시간 스트리밍 기능 써야 해서 일부러 chart.js는 latest말고 낮은 버전을 쓰는 중)

웹 배포 환경: firebase hosting

컴퓨터: window 11, 크롬

1. 배경

chart.js, react-chartjs-2 라이브러리를 사용해 그래프를 화면에 보여줘야 했다.
처음엔 bar 그래프만 보이면 돼서, 대충 만들어 쓰다가 그 위에 scatter 그래프를 추가해야 했어서 mixed chart로 수정한 후 웹을 배포했다.
그런데 갑자기 공백 창이 뜨면서 "scatter is not a registered element" 에러가 뜨기 시작했다. 분명 내 로컬 환경에선 문제 없이 되는데, 파이어베이스에 호스팅하면 에러가 터져서 난감했다.

2-1. 시도 (1) 필요한 모든 요소를 ChartJS.register() 에 등록한다 -> 실패

register에 필요한 요소를 다 등록하지 못해 생긴 에러라고 했다. 그래서 Scatter 그래프에 필요한 PointElement, LineElement을 추가해주었다. (LinearScale도 필요한데 난 기존에 bar 그래프 만들어뒀어서 이미 추가된 상태. Scatter 말고 Line이든 Point 든 ~~ is not a registered elemenet가 뜬다면 필요한 요소를 검색해서 추가해보자,)

import { Chart } from "react-chartjs-2";

import {
  BarElement,
  CategoryScale,
  ChartData,
  ChartOptions,
  LineElement,
  LinearScale,
  PointElement,
  TimeScale,
  TimeSeriesScale,
  Title,
  Tooltip,
} from "chart.js";
import "chart.js/auto";
import "chartjs-adapter-moment";

ChartJS.register(
  CategoryScale,
  LinearScale, // scatter에 필요
  BarElement,
  Title,
  Tooltip,
  TimeScale,
  TimeSeriesScale,
  PointElement, // scatter 에 필요
  LineElement, // scatter에 필요
);

export default function MyGraphComponent(){...}

그런데 이대로 배포해도 같은 문제가 발생했다 하..

2-2. 시도 (2) chart.js/auto 임포트한다 -> 절반 성공?

인터넷 검색을 욜라리 하니, 이번엔 chart.js/auto 라는 방법을 보게 되었다.
register로 요소 모두 직접 등록하는 건 구식(?) 이고, 요즘엔 chart.js/auto를 임포트해주기만 하면 알아서 모든 요소가 다 등록된다는 것이다.

그래서 이번엔 아래와 같이 코드를 작성했다.

import { Chart } from "react-chartjs-2";
import "chart.js/auto";
import "chartjs-adapter-moment";
import { ChartData, ChartOptions } from "chart.js"; // 이건 그냥 뒤에 data 타입 명시해줄라고 임포트한 거. 이번 에러와는 관련 없음.

// ChartJS.register(...) 안 쓴다!

export default function MyGraphComponent(){...}

다시 호스팅하고 확인했더니, 마찬가지로 에러가 났다... 근데!! f5 눌러서 새로고침하니 해결되는 것이다;;
컴퓨터를 끄거나 웹을 끄고 켜도 마찬가지였다. 새로고침을 암만 해도, 혹시 호스팅이 아직 적용 안됐나 싶어서 한 10분은 기다렸는데도 여전히 웹 처음 접속시 같은 에러, 새로고침한 후에는 정상 작동을 했다.

뭐지 이 상황은? 싶어 휴대폰으로 웹 접속해보고, 다른 브라우저 창을 열어 시도해봤더니 에러 없이 잘 동작했다 -> 이 브라우저의 캐시 문제라는 생각이 들었다...

2-3 시도 (3) 브라우저 캐시 지우기 -> 성공!

아래 사진대로 상단 점 3개 눌러서 인터넷 기록 삭제 -> 캐시 지우기...

그랬더니 된다~!!!!!

와~!!