Dev Blog

Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.

改善後のコード

  • resources/views/app.blade.php に @viteReactRefreshを追加して解決
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @inertiaHead
        + @viteReactRefresh
        @vite(['resources/css/app.css', 'resources/js/app.jsx'])
    </head>
    <body class="antialiased">
        @inertia
    </body>
</html>

@viteReactRefreshの目的

  • Reactのホットリロードは他のどのJSよりも先に、グローバルな初期設定が必要
  • Vueならvite標準なので問題ないが、viteでlaravelとreactを連携するために必要

元のコード

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @inertiaHead
        @vite(['resources/css/app.css', 'resources/js/app.jsx'])
    </head>
    <body class="antialiased">
        @inertia
    </body>
</html>