error vuepress-plugin-sitemap apply generated failed

error vuepress-plugin-sitemap apply generated failed

vuepress update를 하던 도중 아래와 같은 오류를 만났습니다.

 SITEMAP  Generating sitemap...
error vuepress-plugin-sitemap apply generated failed.
RangeError: Invalid time value
    at Date.toISOString (<anonymous>)
    at dateFormatter ($PROJECT_ROOT/node_modules/vuepress-plugin-sitemap/index.js:24:60)
    at $PROJECT_ROOT/node_modules/vuepress-plugin-sitemap/index.js:69:13
    at Array.forEach (<anonymous>)
    at generated ($PROJECT_ROOT/node_modules/vuepress-plugin-sitemap/index.js:56:13)
    at AsyncOption.asyncApply ($PROJECT_ROOT/node_modules/@vuepress/core/lib/node/plugin-api/abstract/AsyncOption.js:33:21)
    at PluginAPI.applyAsyncOption ($PROJECT_ROOT/node_modules/@vuepress/core/lib/node/plugin-api/index.js:277:32)
    at Build.render ($PROJECT_ROOT/node_modules/@vuepress/core/lib/node/build/index.js:101:34)
    at async App.build ($PROJECT_ROOT/node_modules/@vuepress/core/lib/node/App.js:499:5)

Process finished with exit code 1

와우.. 이건 뭐…

원인 파악

우선 원인을 추적해 보았습니다.

// $PROJECT_ROOT/node_modules/vuepress-plugin-sitemap/index.js:24:60
dateFormatter = (lastUpdated) => new Date(lastUpdated).toISOString()

조금 더…

// $PROJECT_ROOT/node_modules/vuepress-plugin-sitemap/index.js:69:13
const lastmodISO = page.lastUpdated
    ? dateFormatter(page.lastUpdated)
    : undefined

여기 있었습니다. dateFormatter(page.lastUpdated) 부분이 오류를 발생시킵니다.

그렇다는 이야기는 @vuepress/plugin-last-updated 플러그인 에서 들어오는 lastUpdated 값에 문제가 있다는 것을 추론할 수 있습니다.
그래서 값을 찍어 보았더니 202X. X. X. 오전 XX:XX:XX 와 같은 값으로 데이터가 들어오고 있었습니다.

왜 값자기 IOS 형태로 들어오던 데이터가 바뀌었을까를 곰곰히 생각해 보니 md 파일들에 $frontmatter 부분에 lang: ko-KR 항목을 추가한 것이 생각이 났습니다.
아.. 그러면 당연히 new Date(lastUpdated).toISOString('202X. X. X. 오전 XX:XX:XX') 형태가 될테니 오류가 발생할 수 밖에 없다라는 것을 추론할 수 있게 되었습니다.

문제 해결

그러면 @vuepress/plugin-last-updated 플러그인이 ISO 형태로 값을 돌려주면 문제가 없을 것입니다.
공식 문서 를 찾아보기로 합니다.

마침 반환값을 바꾸어 주는 좋은 예가 있네요.

const moment = require('moment');

module.exports = {
  plugins: [
    [
      '@vuepress/last-updated',
      {
        transformer: (timestamp, lang) => {
          // Don't forget to install moment yourself
          const moment = require('moment')
          moment.locale(lang)
          return moment(timestamp).fromNow()
        }
      }
    ]
  ]
}

이번 예에서는 moment 를 쓸데없이 두번 호출하고 있기는 하지만 뭐 그거야 문제가 되겠습니까. IOS 형태로 반환 값을 바꿔주면 끝날 일입니다.

아래와 같이 살짝 transformer 플러그인 옵션을 ISO 형태로 바꾸어 줍니다.

module.exports = {
    plugins: [
        ['@vuepress/last-updated', { transformer: timestamp => new Date(timestamp).toISOString() }],
    ]
}

자 이제 문제는 해결되었습니다.