#78 RemixとRemix SWAが動かネェ ─ 個人開発者向けのサービスの開発記録

tyshgc
·

本日の作業

仕事の方も個人開発もRemixなので仕事の方で実装進めてたらRemix PWAの関係でバージョンアップを余儀なくせねばならなくなり本日はその対応。

  • 🚴 Remixのバージョンアップ作業

  • 🚴 画面設計・実装

    • 🚴 全体のレイアウトデザインと実装

    • 🚴 日報の画面設計・実装

      • 🚴 設計

      • 🚴 実装

  • サインインの実装

    • 認証画面実装

    • 認証ロジック実装(主にClient側)

    • Server側の認証チェック実装

    • Client側の認証チェック実装

  • 🛑 🚴 イベントストーミングとサービスブループリンの融合についてzennにまとめる

  • 🛑 🚴 Feature-Sliced Designについてzennにまとめる

RemixとRemix PWAのバージョンアップ

Remix PWA、3/28にver4(各ライブラリはv3だけど何故か4らしい)がリリースされていた。これは主にRemixのvite正式対応に合わせた形ぽい。Remixの方も元々がv2.1.12で現在はv2.8.1だったのでとりあえず原因探る旅が困難そうなので全部最新にしてやります。

Remix PWAの謎エラー

worker-runtimeに必要なvirtual:entry-swというパッケージがないらしい。

Remix PWAのv3 -> v4へのアップデート

ドキュメントがわかりにくい…😇

Remixをviteにする

以下のあたりを参考にすれば良い。

しかし動かぬRemix

というわけでRemixを最新のv2.8.1にし、上のドキュメント(特に三番目のドキュメント)を元に各種変更した。また、Remix SWAを各種バージョンアップした。Remix SWAはcacheとstrategyが不要になるそうなのでこいつらは削除した。

Remix SWAはRemixのLiveReloadコンポーネントをラップした独自のLiveReloadコンポーネントをapp.tsxに置く様にしていたがそもそもviteではLiveReloadコンポーネントは不要なので削除。

あとRemix SWAがあると動かないので一旦SWA用のHooks「useSWEffect」もコメントアウト。

Tailwindの参照は「import "tailwind.css"」だけで良くなったのでそれに変更。しかしTailwindが適応されず!

理由はpostcss.configがRemixと同じディレクトリ(apps/{アプリ名})にないことが問題だった(Tureborepoでconfig類は別のnpmディレクトリにおいているため)。多分packagesディレクトリpostcss.configをRemixのpostcss.configでimportすればいくとは思うが一旦直置き。

で、とりあえずPWAない状態では動いた。

本丸、Remix SWAに取り組む。

とりあえずentry.worker.tsも一部変更が必要ぽい。元々はzennにまとめているので気になる人はこちらを参照あれ。

で、entry.worker.tsの雛形を作ろうとRemix PWAのドキュメントにある様に「npx remix-pwa sw」を実行してみたがエラー。

詰んだ。pkgJson[0].versionがないと…。尚、npx remix-pwa swは廃止になるので「npx remix-pwa@lates init」せよとあるので試したが…。

ねぇ。オラのRemix PWAにはなんもねぇ。

どうしたらいいんだこれわ。。

というわけで、issue挙げておいた。

あととりあえずRemix PWAのGithub Repositoryに参考になりそうなコードを見つけた。

ただ、今日はもう寝る。明日個人開発も仕事の方もRemixのバージョンアップして片付けないといけない仕事があるのでそちらを対応してから続きやる。

その他、メモ

  • RemixもRemix PWAも午前中まで何事もなく実行できていいたのに、Firebase周りのユーティリティとコンポーネントの構成を変更したりした際にnpmのpackageの依存解決などしていったら突如動かなくなった。しかしファイル差分見てもそれらしい変更はないし謎すぎる。

  • というわけで日を跨いでしまった…。やらなくていいことで時間削られるのは辛いなー。

← #77 #79 →

@tyshgc
デザインファーム及びスタートアップ(上場)などを経てフリーランスとして、様々なスタートアップや大手企業の新規事業の立ち上げ期における事業設計・アプリケーションの設計・開発、サービスのUX分析とデザインとエンジニアリングの両軸でお手伝いさせていただいています。 現在、個人開発者向けの支援サービスを個人開発中。 X Account: @tyshgc