ITの隊長のブログ

ITの隊長のブログです。Pythonを使って仕事しています。最近はWebに戻ってきたお（^ω^ = ^ω^）

Nuxt3.0.0-rc.11が動かない

Nuxt

結論からいうと、Nuxt3.0.0-rc.10で動きました。

環境

$ sw_vers
ProductName:    macOS
ProductVersion: 12.6
BuildVersion:   21G115

$ docker --version
Docker version 20.10.17, build 100c701

m1 macです（m2でも試しました）

試したこと

だいたいはドキュメント通りに試しました

$ docker pull node:16.16.0-slim
$ docker run --rm -p 4000:4000 -it node:16.16.0-slim /bin/bash
$ npx nuxi init nuxt-app
$ cd nuxt-app
$ yarn install
$ yarn dev -- --port 4000

するとこんなエラーが

[nuxt] [request error] [unhandled] [500] request to http://[::]:4000/__nuxt_vite_node__/manifest failed, reason: connect EADDRNOTAVAIL :::4000 - Local (:::0) ()
  at async $fetchRaw2 (./node_modules/ohmyfetch/dist/shared/ohmyfetch.c2a48baf.mjs:132:20)
  at async ./.nuxt/dev/index.mjs:457:20
  at async ./.nuxt/dev/index.mjs:526:64
  at async ./.nuxt/dev/index.mjs:106:22
  at async ./node_modules/h3/dist/index.mjs:592:19
  at async Server.nodeHandler (./node_modules/h3/dist/index.mjs:538:7)
$ curl localhost:4000/__nuxt_vite_node__/manifest

で、アクセスすると、返却されるんですが、エラーになる。わけがわからん。

解決

色々ぐぐってみたり、ソースコードも確認してみましたが、全然わからないので、ダウングレードしてみました。

$ yarn upgrade nuxt@3.0.0-rc.10

そしたらうまくいった！！！

ログが残っていないので気になるのは、manifestの結果が違うのが気になっています。（rc11の場合は、もっとスカスカでした）

$ curl localhost:4000/__nuxt_vite_node__/manifest | jq .
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   599  100   599    0     0   292k      0 --:--:-- --:--:-- --:--:--  292k
{
  "@vite/client": {
    "file": "@vite/client",
    "css": [
      "/node_modules/@nuxt/ui-templates/dist/templates/welcome.vue?vue&type=style&index=0&scoped=b35d5156&lang.css"
    ],
    "module": true,
    "isEntry": true
  },
  "/node_modules/@nuxt/ui-templates/dist/templates/welcome.vue?vue&type=style&index=0&scoped=b35d5156&lang.css": {
    "file": "/node_modules/@nuxt/ui-templates/dist/templates/welcome.vue?vue&type=style&index=0&scoped=b35d5156&lang.css",
    "resourceType": "style"
  },
  "/nuxt-app/node_modules/nuxt/dist/app/entry.mjs": {
    "resourceType": "script",
    "module": true,
    "file": "/nuxt-app/node_modules/nuxt/dist/app/entry.mjs",
    "isEntry": true
  }
}

物流について調べているメモ

雑メモ

今これを読んでいる

日本型ロジスティクス4.0-サービス多様化、物流費上昇、人手不足を一挙解決-

日本型ロジスティクス4.0-サービス多様化、物流費上昇、人手不足を一挙解決-

Amazon

今思ったけど、全く知らない業界を知るために本を読むのは僕は向いていないかも知れない。本ででてくる単語をある程度理解した上で読むとストレスなくてすっと入ってくるタイプなのかも。

話戻して、ロジスティクスってなんぞ？？？ってなっていましたが、ロジステック回帰じゃないのかとか思ってましたが、全然違いました。

ja.wikipedia.org

物流の英語じゃろ？って思ったけど、物流は物的流通の略語で物理の話で、英語にするとロジスティクスではあるが、これは全体を管理することを指すとのこと。

んで、バージョン（？）が1.0 ~ 4.0まであって、今から4.0をがんばろ！って感じとのこと。

まだ序盤だけどこんなふわっとした理解。

また、驚いたのが、物流のはじめは戦争だったらしい。兵士が各戦地へ物を配送するために管理、効率化することが始まりらしい。戦争っていろんな意味で恐ろしいなって思った。

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

React

useEffectを削除したら消えた。なるほど。

const { setValue } = useForm()
// 省略
useEffect(() => {
    // 省略
    setValue('variable.hoge', hoge)
}, [storeVariable])

こんな感じの処理を書いてた。

次に、useEffectを消さずに、setValueだけ消したらエラーは消えた。

で、色々探っていくと

  • useEffectで更新しているstoreと関係ないstoreを第二引数に渡していた
  • useEffectで更新しているstoreを第二引数に渡したらwarningが消えた
  • ただ、1番目で指定した関係ないstoreがなぜsetValueしたタイミングで更新されているのかがわからない

モヤッとしている感じでメモ

追記

どうやらsetValue関係なくて、useEffectの外で宣言しているyupのvalidationで再描画走っているときにstoreVariableが更新されるから無限ループするっぽい。なるほど〜

error TS2538: Type 'string[]' cannot be used as an index type.

TypeScript

なんじゃろ？ってぐぐってみると下記がわかりやすかった

qiita.com

bobbyhadz.com

要は動的に用意した変数の型がわからんままObjectの要素を指定しようとするとだめということらしい。

        // だめ
        // const key = Object.keys(current)[0]
        // OK
        const key: string = Object.keys(current)[0]
        result[key] = current[key]
        return result

解決。