また新たな壁でした。nvm/npmが壊れてた話の続きです。やっと環境が直って「よし、いよいよRemotionだ」と意気込んだ矢先、また別のエラーで止まりました。正直このときは「え、まだ何かあるの…」って声に出てました。
ロゴの余白トラブルやらnvm/npmの件やらで、もう十分苦労した気になっていたので、正直油断していたところがありました。「ここまで来たらもう大丈夫でしょ」という謎の楽観、いつも痛い目を見るんですが、今回も例に漏れず、でした。
今度は謎のエラーでバンドルが落ちる
またかと思いました。テスト用に短い動画をレンダリングしてみようとしたら、今度はTypeError: Cannot read properties of undefined (reading 'readFile')というエラーで止まりました。読んでもピンとこないタイプのエラー文で、正直「はいはい、また何か壊れてるのね」と、若干やさぐれた気持ちで調査を始めました。
犯人はTypeScriptだった
犯人はTypeScript。エラーが出ている場所を見ると、Remotionのバンドラーがtypescript.sys.readFileを呼んでいるところで、そのtypescript.sys自体がundefinedになっていました。つまりTypeScript側の内部構造が、Remotionが期待している形と食い違っていたわけです。
原因はバージョン違い。npm install -D typescriptで何も考えずに最新版を入れていたんですが、確認してみたらバージョンが7系でした。これで「あ、そういうことか」と一気に腑に落ちました。TypeScript 7は内部がGoベースの新コンパイラ(通称tsgo)に置き換わっている大型バージョンで、API構造がガラッと変わっているらしく、Remotionが使っているバンドラー(esbuild-loader)がまだそこに追従できていなかった、というオチです。
ちなみにこのエラー、検索してもTypeScript 7自体への言及がほとんどヒットしませんでした。リリースされたばかりで、まだ世の中の誰も「これTS7のせいだよ」と書いていない段階だったんだと思います。情報が出揃う前の技術を触るときの、ちょっと心細い感じを久々に味わいました。逆に言うと、こうやって自分の実体験を記録しておくこと自体に、多少なりとも意味があるのかもしれません。
「最新版を入れる」が地雷だった
教訓は痛かったです。正直、普段何気なくやっているnpm install -D typescriptで最新版を突っ込む癖、今回みたいなメジャーバージョンの過渡期だと普通に地雷なんだなと痛感しました。PHPだと「とりあえず最新」で困ることはあまりないので、この感覚のズレに気づけたのは収穫でした。
対処は一瞬でした。対処自体はシンプルで、Claudeと相談しながらnpm install -D typescript@^5.7.0と明示的にバージョンを指定してインストールし直したら、あっさり直りました。5.9.3が入って、無事にレンダリングも通りました。原因さえ分かればものの数分の作業だったんですが、そこにたどり着くまでの「なんで動かないんだ…」の時間の方が体感で10倍くらい長かったです。
直したあと、念のためpackage.jsonを見返してみたら、他の依存パッケージもことごとく最新のメジャーバージョンが入っていて、ちょっと背筋が伸びました。今回は動いたからよかったものの、他の場所でも似たような地雷を踏んでいてもおかしくない状態だったんですよね。そのうち時間を見つけて、一つずつ動作確認しながらバージョンを見直す作業もやろうと思います(思うだけで終わらないようにしたい)。
新しいツールを触るときの、ちょっとした学び
学びはここでした。今回改めて思ったのは、慣れた言語圏(自分の場合はPHP/WordPress)だと無意識にできている「危なそうな匂いを嗅ぎ分ける勘」が、畑違いのツールだと全然働かないということです。TypeScript 7が出たばかりでまだ生態系全体が追いついていない、みたいな空気感を肌で知らないと、素直に最新版を入れて素直にハマる、という流れになりやすいんだなと。
知識としては知っていても、実際に自分の手でハマってみないと本当の意味で身につかないんだな、というのを久々に実感した出来事でした。
正直「動画を作る」と言い出してからまだ1本もまともに完成していないので、自分でもちょっと苦笑いしています。それでもこういう地味な足止めを一つずつ潰していく作業自体は嫌いじゃないというか、むしろ性に合っているんだろうなと思います。じゃなきゃそもそもこの仕事を選んでないですよね、たぶん。
まとめ
結論はシンプルです。Remotionでバンドル時にtypescript.sys関連のエラーが出たら、まずはtypescriptのバージョンを疑ってみてください。うちの場合はTypeScript 7系が原因で、5.x系に固定したら解決しました。地味なトラブルでしたが、「よく分からないツールほど、最新版を無邪気に入れないほうがいい」という当たり前だけど忘れがちな教訓を、また一つ体で覚えた一日でした。
追記: その後、TypeScript 7の正式版で改めて試したところ、この非互換は再現しませんでした(Remotion Agent Skillsを実際に入れてみた、あのTS7バグはどうなったのか)。今から読む方は、そちらもあわせてどうぞ。
この記事が参考になったら、応援クリックをお願いします
