これまで、
https://qiita.com/terukazu/items/d0ac760425a715649d92
https://qiita.com/terukazu/items/73d32b7907cc76328fb9
と、気になった内容とか調べていて、ようやく、頭の情報が整理されてきたので、再度トライ。
vue-cli-service build でエラーが発生しない
ts-loader が解釈できているんだから、エラーが発生しないのは当然。
vue-cli-service build で生成し、ブラウザで確認してもエラーが発生しない
ブラウザがOptional Chainingをサポートしているならば、エラーする理由がない。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Optional_chaining
storybook を開始するとエラーが発生する
発生時のローダー設定
File was processed with these loaders:
* ./node_modules/vue-docgen-loader/lib/index.js
* ./node_modules/vue-docgen-loader/lib/index.js
* ./node_modules/ts-loader/index.js
* ./node_modules/vue-loader/lib/index.js
ローダーは逆順に実行される。
https://webpack.js.org/concepts/loaders/#loader-features
エラー回避
tsconfig.json の target を "ES6" にするとエラーは発生しない。
tsconfig.json の "target" を "esnext" や "es2020" を設定していても、"esnext" というパラメータ自体にエラーが発生していない事を考えると、後段の vue-docgen-loader がエラー発生元の可能性が高い。
storybook の公式見解
下記のチケットで発見。
https://github.com/storybookjs/storybook/issues/11515#issuecomment-657681163
ここで気になる記述が。。。。
"I've found the culprit,"
犯人見つけた。
これは良いとして、問題は次の一文
"it looks like the "target": "esnext" doesn't support optional chaining anymore :/"
「"taget" : "esnext"」 は Optional Chaining をサポートしなくたったみたい。
そして。。。
So this is a tsconfig.json configuration issue, not a storybook issue?
それに、 tsconfig.json の設定の話だから、storybook 関係なくね？
として結論付けしている。
マジか？！
まず、これを見て吃驚仰天之助だったので。。。
"it looks like the "target": "esnext" doesn't support optional chaining anymore :/"
「"taget" : "esnext"」 は Optional Chaining をサポートしなくたったみたい。
改めて、公式サイトで調べてみる。
ESNext という特別な値は TypeScript がサポートしている最新のターゲットバージョンを参照します。
https://www.typescriptlang.org/ja/tsconfig
で、現時点の最新版のECMAScriptの「ECMA-262 11th Edition / June 2020」内の「12.3.9 Optional Chains」にてサポートしている記述がある。
https://www.ecma-international.org/wp-content/uploads/ECMA-262.pdf
となると、サポートしなくなったのは ECMAScript ではなく、何なんだろうか？
ちなみに、この発言は、コントリビュータさんじゃなさそう。
そして、次の発言はコントリビュータさんですね。
So this is a tsconfig.json configuration issue, not a storybook issue?
それに、 tsconfig.json の設定の話だから、storybook 関係なくね？
というのが、storybookの公式見解のようですね。
結論
「動けば良い」と考えるなら、tsconfig.json で "target": "es2018"にすれば良い。（"ES6"でも良いが、対象のプラットフォームによりますな）
「原因を知りたい」と考えるなら storybook のソースコードを見るしかないかない。