I wanted to use flask-vite to add some React ponents to my app.
I started by using the flask-vite Flask plugin to add Vite to my Flask project.
Then I installed React and carefully updated the configuration files, using a freshly created React project that I made with Vite as a reference.
I couldn't get my React ponents to show up, and the only clue was this console message:
@vitejs/plugin-react can't detect preamble. Something is wrong.
I searched for this message and found lots of pages that weren't very helpful.
I wanted to use flask-vite to add some React ponents to my app.
I started by using the flask-vite Flask plugin to add Vite to my Flask project.
Then I installed React and carefully updated the configuration files, using a freshly created React project that I made with Vite as a reference.
I couldn't get my React ponents to show up, and the only clue was this console message:
@vitejs/plugin-react can't detect preamble. Something is wrong.
I searched for this message and found lots of pages that weren't very helpful.
Share Improve this question asked Feb 10, 2024 at 4:56 Joel SullivanJoel Sullivan 1,7751 gold badge15 silver badges14 bronze badges2 Answers
Reset to default 7If you are using Laravel.
Simply add this in the HTML head in Laravel blade file(app.blade.php) @viteReactRefresh
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
@viteReactRefresh
@vite(['resources/css/app.css', 'resources/js/Website/app.jsx'])
@inertiaHead
</head>
<body>
@inertia
</body>
</html>
I got React to work by adding this HTML to my templates/base.html Jinja template:
<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>
This can go right before or after the <html> opening tag, and is crucial for giving React access to the DOM. I found it at https://vitejs.dev/guide/backend-integration.html.
After that flask-vite worked well for integrating React ponents into my Flask app.