Flask + Inertia + Vite + ReactなWebアプリつくる

ピン留めされたアイテム

BonyChops

記事完成！

BonyChops

この過程も大いに有意義だと思ったので書き留めておく

BonyChops

現状

npm create vite@latest frontendでfrontendを作った後、以下のconfigにしてflask_viteからリクエストを受け付けられるようにしたところ
(configでflask側からエントリーポイント(main.js)を変更するすべがなさそうなので注意)
真っ白で画面には何も出ない

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    strictPort: true,
  },

  resolve: {
    alias: {
      '@': '/src',
      '/main.js': path.resolve(__dirname, 'src/main.tsx')
    }
  },
  build: {
    rollupOptions: {
      input: 'src/main.tsx', // specify your new entry point
    },
  },
})

BonyChops

これDjangoのときにも出たんだけどどうやって直したっけなあ
何かしらのタグが足りてなかったような

Error: React refresh preamble was not loaded. Something is wrong.
    at App.tsx:1:169
（匿名）	@

BonyChops

天才、これだわ

<script type="module">
  import RefreshRuntime from 'http://localhost:3000/@react-refresh'
  RefreshRuntime.injectIntoGlobalHook(window)
  window.$RefreshReg$ = () => {}
  window.$RefreshSig$ = () => (type) => type
  window.__vite_plugin_react_preamble_installed__ = true
</script>

こいつを入れたらとりあえず動くようになるっぽい
なお原理は全くわかっていない

BonyChops

本番環境に入れないようにする

is_debug = app.debug
environment = app.env

{% if debug and env == 'development' %}
    <script type="module">
        import RefreshRuntime from 'http://localhost:3000/@react-refresh'
        RefreshRuntime.injectIntoGlobalHook(window)
        window.$RefreshReg$ = () => {}
        window.$RefreshSig$ = () => (type) => type
        window.__vite_plugin_react_preamble_installed__ = true
    </script>
{% endif %}

BonyChops

画像が出ない問題は過去の自分が解決してたわ

こればっかりはGPTやClaudeに聞いても応えてくれなかったんだよなあ
自分のプロンプトがよくないのかな

BonyChops

あとはinertia導入するだけか
案外すんなりいきそう

BonyChops

Djangoの記事で書いたmain.tsxに書き換え
app.pyにinertia導入
など

で今エラー

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'default')
    at @inertiajs_react.js?v=ad123412:6172:161
    at async V (@inertiajs_react.js?v=ad123412:6172:188)

BonyChops

きた！！！

BonyChops

main.tsxのパスが間違ってた。前に書いたやつも間違ってるってことか？

-           return pages[`./pages/${name}.tsx`];
+           return pages[`./pages/${name}/index.tsx`];

BonyChops

あとはstaticなassetsをどうやって管理するか考えないとな
flask-viteはdist/assetsをホストするっぽい

BonyChops

これ結局強引に解決してしまった
vite-flask側にオプションがないとむりそう？調査後にPR出してみたい

+@app.route('/_vite-static/<path:path>') # Vite側のアセットを表示するのに必要
+def send_public(path):
+    return send_from_directory('vite/dist', path)

BonyChops

これもとのソース見に行ったけど、 URLの _vite も、その先の参照先 vite/dist/assets もハードコーディングされていたのでPR必要ですね

BonyChops

きた

このスクラップは2ヶ月前にクローズされました