Open15

remix

DPonDPon
npx create-remix@latest

これで作れるがクイックスタートは要素理解のため、一個ずつやってく

DPonDPon
npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom

これで依存関係の警告が出てきた

npm warn ERESOLVE overriding peer dependency
npm warn While resolving: remix-minimum-app@1.0.0
npm warn Found: react@18.3.1
npm warn node_modules/react
npm warn   react@"*" from the root project
npm warn   2 more (@remix-run/react, react-dom)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^18.0.0" from @remix-run/react@2.15.2
npm warn node_modules/@remix-run/react
npm warn   @remix-run/react@"*" from the root project
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: remix-minimum-app@1.0.0
npm warn Found: react@18.3.1
npm warn node_modules/react
npm warn   react@"*" from the root project
npm warn   2 more (@remix-run/react, react-dom)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^18.3.1" from react-dom@18.3.1
npm warn node_modules/react-dom
npm warn   react-dom@"*" from the root project
npm warn   1 more (@remix-run/react)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: remix-minimum-app@1.0.0
npm warn Found: react@18.3.1
npm warn node_modules/react
npm warn   react@"*" from the root project
npm warn   2 more (@remix-run/react, react-dom)
npm warn
npm warn Could not resolve dependency:
npm warn peer react@"^18.3.1" from react-dom@18.3.1
npm warn node_modules/react-dom
npm warn   react-dom@"*" from the root project
npm warn   1 more (@remix-run/react)
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: remix-minimum-app@1.0.0
npm warn Found: react-dom@18.3.1
npm warn node_modules/react-dom
npm warn   react-dom@"*" from the root project
npm warn   1 more (@remix-run/react)
npm warn
npm warn Could not resolve dependency:
npm warn peer react-dom@"^18.0.0" from @remix-run/react@2.15.2
npm warn node_modules/@remix-run/react
npm warn   @remix-run/react@"*" from the root project

added 142 packages, and audited 143 packages in 56s

28 packages are looking for funding
  run `npm fund` for details

6 low severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

このままこの後のviteのインストールをやろうとしてもこけてしまう

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: remix-minimum-app@1.0.0
npm error Found: react@19.0.0
npm error node_modules/react
npm error   react@"^19.0.0" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^18.0.0" from @remix-run/react@2.15.2
npm error node_modules/@remix-run/react
npm error   @remix-run/react@"^2.15.2" from the root project
npm error   peer @remix-run/react@"^2.15.2" from @remix-run/dev@2.15.2
npm error   node_modules/@remix-run/dev
npm error     dev @remix-run/dev@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
DPonDPon
npm install react@18.3.1 react-dom@18.3.1

18でinstallしなおして解消

DPonDPon

ビルドすると、
build/client
build/server
が作成される

そういえばそうだった

DPonDPon

手順通り、package.jsonのtype指定とremix-serve実行で初手の実行確認

DPonDPon

少し空いてしまったが、手順通りにquickstartは終了。viteの開発モードで変更が即時に反映されるまでを確認

DPonDPon

一度やったはずだが、大分忘れている。

  • LinksFunctionで、linkタグを設定しており、cssを読み込ませている
  • Outletは親ルートが子ルートをレンダリングするためのもの。laravelやってた身としてはyieldとsectionに近い印象
  • useLoaderDataで定義したloaderの実行結果を取得している。
  • loaderはサーバサイドで実行される
DPonDPon

loaderの引数にparamsを追加すればリクエストパラメータが取得できる