[React-GATSBY] createPages후크 함수 사용자화 오류

문제상황

gatsby 템플릿 다운받은 후에 data-loader, gatsby-node.js 환경을 세팅한 상태로 프로젝트 수행 중[ERROR #11321]에러를 여러번 겪었는데 대다수가 오타로 인해 변수명 인식을 못하는 거였다.

아무리 오타를 찾아도 못찾아서 cache를 삭제해보거나 변수를 함수 내부에서 선언해보거나 등등.. 인터넷에 공유된 ERROR #11321에 관한 여러 시도를 해봤지만 성공하진 못했다..

createPages후크 함수를 처음 사용해보아서 당연히 변수명이 'createPages'일줄 알았는데 단수인 createPage가 옳다. 사용자 지정 변수가 아니기 때문에 무조건 형식에 맞게 사용해야한다. (당연한 소리다.)

exports.createPages = async ({ actions }) => {
  const { createPage } = actions;
  const dataSource = { thirdSlideTitle: '블로그 탭' };

  createPage({
    path: '/',
    component: require.resolve('./src/templates/single-page.js'),
    context: { dataSource },
  });
};

gatsby-node.js는 페이지를 생성하고 수정하는 작업 처리를 수행하는 공간인데 주된 공간이라 그런지 다른 곳에서 오타가 있어도 대부분 gatsby-node.js 문제라고 출력된다. 조금의 힌트라면 함수명을 알려주는데 그 함수 관련된 오타이거나 오류일 확률이 높다. 아무리봐도 못찾겠다 싶을 땐 chatGPT에게 물어보는거루,,ㅎㅎ