Closed15
Flask + Inertia + Vite + ReactなWebアプリつくる
ピン留めされたアイテム
記事完成!
この過程も大いに有意義だと思ったので書き留めておく
現状
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
},
},
})
これDjangoのときにも出たんだけどどうやって直したっけなあ
何かしらのタグが足りてなかったような
Error: React refresh preamble was not loaded. Something is wrong.
at App.tsx:1:169
(匿名) @
天才、これだわ
<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>
こいつを入れたらとりあえず動くようになるっぽい
なお原理は全くわかっていない
本番環境に入れないようにする
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 %}
画像が出ない問題は過去の自分が解決してたわ
こればっかりはGPTやClaudeに聞いても応えてくれなかったんだよなあ
自分のプロンプトがよくないのかな
あとはinertia導入するだけか
案外すんなりいきそう
- 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)
きた!!!
main.tsx
のパスが間違ってた。前に書いたやつも間違ってるってことか?
- return pages[`./pages/${name}.tsx`];
+ return pages[`./pages/${name}/index.tsx`];
あとはstaticなassetsをどうやって管理するか考えないとな
flask-viteはdist/assetsをホストするっぽい
このスクラップは2ヶ月前にクローズされました