React を勉強してる中で Remix というフレームワークがあるのを知りました。
あわせて読みたい
Remix – Build Better Websites
Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user e…
Remix は基本的にSSR（Server Side Rendering）で動くのですが、GitHub Pagesで公開したいのでSPA（Single Page Application）で使おうと思いました。
ちなみにSSRとかSPAについては以下の記事が分かりやすいです。
Qiita
【図解】SPA、SSR、SSGの違いについて – Qiita
何番煎じだという感じかもしれませんが、「SPA、SSR、SSGの違い」について記事にしていきたいと思います。業務でVue.jsやNuxt.jsを使用していますが、SPA、SSR、SSGのそれ…
Remix では便利なことにテンプレートがあるため、こちらを使おうと思ったのです。
npx create-remix@latest --template remix-run/remix/templates/spaすると、なんとエラーが！！
node:internal/modules/cjs/loader:1242
throw err;
^
Error: Cannot find module 'fs-extra'
Require stack:
- C:\Users\akasaka\AppData\Local\npm-cache\_npx\5164864a48bff686\node_modules\create-remix\dist\index.js
- C:\Users\akasaka\AppData\Local\npm-cache\_npx\5164864a48bff686\node_modules\create-remix\dist\cli.js
at Function._resolveFilename (node:internal/modules/cjs/loader:1239:15)
at Function._load (node:internal/modules/cjs/loader:1064:27)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)
at Module.require (node:internal/modules/cjs/loader:1325:12)
at require (node:internal/modules/helpers:136:16)
at Object.<anonymous> (C:\Users\akasaka\AppData\Local\npm-cache\_npx\5164864a48bff686\node_modules\create-remix\dist\index.js:19:11)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Object..js (node:internal/modules/cjs/loader:1698:10)
at Module.load (node:internal/modules/cjs/loader:1303:32) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'C:\\Users\\akasaka\\AppData\\Local\\npm-cache\\_npx\\5164864a48bff686\\node_modules\\create-remix\\dist\\index.js',
'C:\\Users\\akasaka\\AppData\\Local\\npm-cache\\_npx\\5164864a48bff686\\node_modules\\create-remix\\dist\\cli.js'
]
}
どうやら fs-extra がないって怒られてしまったようです。
目次
解決方法
まずは create-remix をインストールします。
npm i create-remix続いて足りてない fs-extra をインストールします。
npm i fs-extraそして最後にテンプレートを動かします。
npx create-remix@latest --template remix-run/remix/templates/spaこれでようやく、テンプレートの対話が始まりました！
良かった良かった！
