create-react-appからviteに移行してからハマったこと

proxy設定

MERN stackで開発していると、よくpackage.jsonにproxy設定を入れてバックエンドのデータにアクセスさせているが、どうもviteはvite.config.jsにproxy設定を入れるみたい・・・知らんがなw

//　vite.config.js

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

export default defineConfig({
  plugins: [reactRefresh()],

  //以下部分を追記すると/apiへのすべてのリクエストがhttp://localhost:5000にプロキシされる
  server: {
    proxy: {
      '/api': 'http://localhost:5000'
    }
  }
})

これからもハマったことをここに追記して忘れないようにしていきます。

vscodeのprops validationエラー対策

create-react-appの時はvscodeにprops validationエラーが出てなかったと思うのだが、viteに変えてから出るようになった・・・うぜーです。（エラーじゃないし！！！）
一つ一つpropTypesで型のチェックをすればいいのだが、やってられないのでとりあえず型定義してなくてもエラーにならないようにする方法。
viteでのインストール後に作成される.exlintrc.cjsファイルに以下ルールを追記するとエラーが出なくなります。（入れたところでpropTypesが無効になる訳ではありません）

  rules: {
    "react/prop-types": "off"　　　// rulesにこれを追記
  }