[解決] error TypeError: Cannot set property 'ts' of undefined #JavaScript

TL:DR;

nuxt.jsメジャーバージョン上がったらmodules/typescript.jsの書き方が変わっていた。
おわり。

承前

TypeScript+Nuxt.jsでやってます。単一ファイルコンポーネントだいすき。
あるていど開発が進んだところで、yarn run devとかやっとってもChromeが読み込みを終えてくれない病にかかりました。単純なページはいいものの、裏側でAPI叩いてるページの処理が終わらないケースが増えました。不思議とFirefoxは動く。
いちおうこの件は解決できたので、しょぼい激闘の記録をここに残します。

package.json（抜粋）はこんな具合。7000番で起動してるのはこちらの都合。

    "scripts": {
        "dev": "nuxt --envname=dev --port 7000",
        "build": "nuxt build --envname=dev",
        "postbuild": "nuxt start --envname=dev --port 7000",
    },

延々ローディングしたあとで「 Error: Loading chunk {num} failed 」とか出たり出なかったり。{num}はいろんな数字。
症状はyarn run devしたときに限られ、build->startした時にはこの問題は起きない。
毎度手でbuildしてたら死んでしまうのでなんとかしたい。
そもそもJavascriptの知見がなさすぎて、見当をつけられず途方に暮れます。

とりあえずライブラリのせいにしよう

ということで、パッケージをアップデート。
npm-check-updates -u してみる。

[INFO]: You can also use ncu as an alias
Using (PROJECT_DIR)\package.json
[..................] \ :
 firebase-tools   ^4.2.1  →    ^6.0.0
 nuxt             ^1.4.2  →    ^2.2.0
 @types/node     ^9.6.31  →  ^10.12.1
 ts-loader        ^3.5.0  →    ^5.2.2
 @nuxtjs/axios        ^5.0.0  →   ^5.3.3
 @nuxtjs/dotenv       ^1.1.1  →   ^1.3.0
 bulma                ^0.7.1  →   ^0.7.2
 bulma-toast          ^1.3.0  →   ^1.4.0
 dotenv               ^6.0.0  →   ^6.1.0
 firebase             ^5.5.1  →   ^5.5.6
 firebase-functions   ^2.0.5  →   ^2.1.0
 @types/chai          ^4.1.5  →   ^4.1.7
 @types/jasmine       ^2.8.8  →   ^2.8.9
 @types/jest         ^23.3.2  →  ^23.3.8
 chai                 ^4.1.2  →   ^4.2.0
 jasmine-core         ^3.2.1  →   ^3.3.0
 karma                ^3.0.0  →   ^3.1.1
 node-sass            ^4.9.3  →   ^4.9.4
 nyc                 ^13.0.1  →  ^13.1.0
 typescript           ^3.0.3  →   ^3.1.4

nuxtがメジャーバージョン上がっていて不安。さすがにそのまま動かなくなっちゃうのでは？

動かぬ

実際動かしてみると、即エラーで停止します。

ビルド時のエラーログはこんな風

 INFO  Building project
√ success Builder initialized
√ success Nuxt files generated
× error TypeError: Cannot set property 'ts' of undefined
  at Builder.extendBuild.config ((PROJECT_DIR)frontapp\modules\typescript.js:33:33)
  at Builder.<anonymous> ((PROJECT_DIR)frontapp\node_modules\nuxt\dist\nuxt.js:174:25)
  at WebpackClientConfig.extendConfig ((PROJECT_DIR)frontapp\node_modules\nuxt\dist\nuxt.js:3209:56)
  at WebpackClientConfig.extendConfig ((PROJECT_DIR)frontapp\node_modules\nuxt\dist\nuxt.js:3351:26)
  at WebpackClientConfig.config ((PROJECT_DIR)frontapp\node_modules\nuxt\dist\nuxt.js:3247:33)
  at WebpackClientConfig.config ((PROJECT_DIR)frontapp\node_modules\nuxt\dist\nuxt.js:3390:26)
  at Builder.webpackBuild ((PROJECT_DIR)frontapp\node_modules\nuxt\dist\nuxt.js:3995:56)
  at Builder.build ((PROJECT_DIR)frontapp\node_modules\nuxt\dist\nuxt.js:3704:16)

わからん。ぐぐる。

link: Nuxt Edge - Issue when running/building the project

The reason for this error is because Nuxt edge uses webpack 4 & the newer version of vue-loader. vue-loader changed how it handles components & Nuxt adjusted their webpack config accordingly.

このコメントを寄せてくれとる人がすぐ下にサンプルを書いています。うちではtsxつかってないので一部だけコピってきます。いまのところ中身を正しく理解しているとは言いがたい状態で書いてるので無駄があるかも。

modules/typescript.js

module.exports = function () {
  // Add .ts extension for store, middleware and more
  this.nuxt.options.extensions.push("ts")
  // Extend build
  this.extendBuild(config => {
    const tsLoader = {
      loader: "ts-loader",
      options: {
        appendTsSuffixTo: [/\.vue$/]
      }
    }
    // Add TypeScript
    config.module.rules.push({
      test: /\.tsx?$/,
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/]
      }
    })
    // Add .ts extension in webpack resolve
    if (!config.resolve.extensions.includes('.ts')) {
      config.resolve.extensions.push('.ts')
    }
  })
}

リトライ。

 INFO  Building project

√ success Builder initialized
√ success Nuxt files generated
[hardsource:e73e65a4] Using 18 MB of disk space.
[hardsource:e73e65a4] Tracking node dependencies with: yarn.lock.
[hardsource:e73e65a4] Reading from cache e73e65a4...

 WARNING  Compiled with 1 warnings                                       10:08:33
(若干怒られてるけど略)

 READY  Listening on http://localhost:7000

きた。
気になる、読み込みが終わらないページを見てみますと問題なくロードされます。
今日もなんとかしのいだ。

参考にしたページ:

誰

おしごとではPython書いてます。
reactはreduxが理解できずに折れ、Angularはサンプル見た瞬間に折れた程度の三下が、なんとなくポップな見た目に惹かれてVue入門しております。
環境構築だけで疲れるんで大のフロントエンド嫌いだったんですが、趣味でアプリ一個つくって勉強しましょう。ということでアプリ書いてます。