【日報】typescript、pug、夜行バス

　9月5日の日報です。

nuxt-edge 環境でのtypescript利用

　今日もまたえぐいバグを踏み抜いて直しました。

　TypeScriptが pages 配下のファイルでのみ正しく解釈されない (nuxt-i18nの問題)、なぜか正しく動かない (ts利用時に暗黙の決まり事がある) というようなやつで、ちょっと大変でした。可能ならあとで詳しく書きますが。

今後の作業

　これから夜行バスで東京に行くので、明日の作業はお休みです。

追記: pug

　まずタイトルに pug と書いてありますが、記事に書く前に寝ました。

　pugはhtml生成用のテンプレートエンジンで、実際の利用例を見ていただくと早いですが、vueの単一コンポーネントファイルでこんな感じに利用可能です。

<template lang="pug">
  section.section.has-background-light
    .container
      slot
</template>

　pug-loader ではなく pug-plain-loader を利用しているのは何か理由があったんですが、完全に失念しました。あとで調べ直します。

追記: nuxt pagesでts使うとエラー

　pages 配下のファイルでTypeScript (正確には、jsとして正しくない全ての構文) を使うと acorn がどうのこうのと謎エラーが発生し、nuxt が起動すらしなくなり、ぶっ壊れる問題がありました。

$ nuxt
[12:52:04 AM] Building project
[12:52:04 AM] Builder initialized
[12:52:04 AM] SyntaxError: Unexpected token (17:34)
at Parser.pp$4.raise (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:2756:13)
at Parser.pp.unexpected (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:647:8)
at Parser.pp.expect (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:641:26)
at Parser.pp$2.parseBindingList (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:1694:19)
at Parser.pp$3.parseMethod (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:2530:22)
at Parser.pp$3.parsePropertyValue (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:2448:23)
at Parser.pp$3.parseProperty (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:2433:8)
at Parser.pp$3.parseObj (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:2379:23)
at Parser.pp$3.parseExprAtom (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:2179:17)
at Parser.pp$3.parseExprSubscripts (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:2047:19)
at Parser.pp$3.parseMaybeUnary (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:2024:17)
at Parser.pp$3.parseExprOps (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:1966:19)
at Parser.pp$3.parseMaybeConditional (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:1949:19)
at Parser.pp$3.parseMaybeAssign (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:1925:19)
at Parser.pp$3.parsePropertyValue (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:2442:87)
at Parser.pp$3.parseProperty (/Users/tottokotkd/dev/tagbottle.io/firebase-web/hosting/node_modules/acorn/dist/acorn.js:2433:8)

　これは一言でいうと nuxt-i18n による独自パースが原因です。ルーティング情報集めのために、何やら情報を集めてやっているんだそうです。そのうち治るのかもしれませんが、現状では parsePages オプションを使って nuxt-i18n の挙動を抑えるしかなさそう。

追記: tsコードでのimportが失敗する

　TypeScriptを利用して.vueファイルからモジュールをインポートするためには、利用される側のファイルにおいて export default {...} の記載が必須です。存在しないものはインポートすべくもないので、まあそれ自体は考えてみると当たり前という話ではあります。

　ただ今回は、この当たり前の挙動を訂正するために結構な時間を取られました。これは外部の問題ではなく、完全にタグボそのもののバグなのですが、

いつの間にかtypescriptコンパイル時の型チェックが切れていた
<script> そのものを欠くファイルは少数であり念頭になかった
<script lang="ts"> を欠くファイルもあって問題がややこしくなった
TS2307: Cannot find module というエラーから、.vueファイルそのものを発見できていないケースを想定した
tsconfigに問題がある可能性をより強く疑った

　等々のアレな事情があったので、ファイルはあるけどモジュールをインポートできないという状態を認識するまでに時間がかかりました。そこに意識が向いてからはサクッと直せたと思いますが…

　いずれにせよ褒められた話ではないので、ちゃんとテストを書きましょうという方向で反省中。