Bład Reacta na Laravelu 13 - nie obsługuje plików jsx

tomixtomi0001

2026-09-16T12:21:29+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 215

0

Mam taki problem dopiero zaczynam przygode z reactem api i chciałem go sobie zaimportowac w moim nowym projuekcie laravel 13, Długo się męczyłem z tym, żeby działał z laravelem 13 i teraz mam taki problem.
Do instalacji reac api używałem róznych komend takich jak npm install. I to stworzyło plik w katalogu ./public/build/asset/ o nazwie app-BON39Dwa.js i tam jest kod reacta, tylko, że plik ma rozrzeżenie js, a jak próbuje załączyć jsx to nie wczytuje, ten plik jsx wygląda tak

Kopiuj

import { createRoot } from 'react-dom/client';

// Wyczyść istniejącą zawartość HTML
document.body.innerHTML = '<div id="app"></div>';

// Zamiast niej wyrenderuj swój komponent reactowy
const root = createRoot(document.getElementById('app'));
root.render(<h1>Witaj, mhcie!</h1>);

I tutaj jest fragment widoku .blade.php który to wczytuje

Kopiuj

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ config('app.name', 'Laravel') }}</title>

    @fonts

    <!-- Styles / Scripts -->
    @if (file_exists(public_path('build/manifest.json')) || file_exists(public_path('hot')))
        @viteReactRefresh
        @vite(['resources/css/app.css', 'resources/js/app.jsx'])


    @else
        <script type="module" src="{{ asset('build/assets/app.jsx') }}"></script>
       
    @endif
</head>

fragment pliku ./public/build/manifest.json

Kopiuj

  "resources/css/app.css": {
    "file": "assets/app-ZwUBQ0XB.css",
    "name": "app",
    "names": [
      "app.css"
    ],
    "src": "resources/css/app.css",
    "isEntry": true
  },
  "resources/js/app.jsx": {
    "file": "assets/app-BON39Dwa.js",
    "name": "app",
    "src": "resources/js/app.jsx",
    "isEntry": true
  }
}

John Gordon

2026-09-22T09:41:21+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 286

2

Zakładasz, że przeglądarka ma "załączyć plik .jsx". Tak to nie działa — żadna przeglądarka nie wykonuje JSX. <h1>Witaj</h1> wewnątrz JS to błąd składni. JSX musi zostać skompilowany do zwykłego JS i dokładnie to robi Vite: resources/js/app.jsx ──(vite build) -> public/build/assets/app-BON39Dwa.js . Plik app-BON39Dwa.js z hashem to poprawny, oczekiwany wynik, a nie objaw problemu. Drobiazg: nie tworzy go npm install, tylko npm run build (vite build)
manifest.json to mapa "wejście -> wynik". Dyrektywa @vite(['resources/js/app.jsx']) czyta ją i sama generuje <script type="module" src="/build/assets/app-BON39Dwa.js">.
Gałąź @else jest bezsensowna <script type="module" src="{{ asset('build/assets/app.jsx') }}"></script> - taki plik nie istnieje - źródło leży w resources/js/, nigdy nie trafia do public/ a nawet gdyby istniał, przeglądarka wysypałaby się na JSX. W oryginalnym welcome.blade.php w @else jest tylko awaryjny <style>, żeby strona powitalna wyglądała bez zbudowanych assetów. Zmieniłeś to na <script> i tak powstała pułapka: gdy nie ma ani manifest.json, ani public/hot, strona wchodzi w @else i dostaje 404. Wywal cały @if/@else, zostaw bezwarunkowo @viteReactRefresh + @vite(...).
"Długo się męczyłem, żeby działało" - prawdopodobnie męczyłeś się niepotrzebnie bo to działa od razu - dodaj @vitejs/plugin-react i config:

Kopiuj

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
        react(),
    ],
});'

i potem: npm i react react-dom i npm i -D @vitejs/plugin-react.

P.S. zobacz czy nie pomieszałeś trybów dev/prod: wykonaj npm run dev i zobaczy czy działa

John Gordon

2026-09-22T10:30:01+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 286

2

A tak w ogóle, to kolega chyba lubi "męczyć się" Wystarczy:

laravel new project --react

Wszsytko wygeneruje się samo, chociaż z pełnym zestawem (pewnie dorzuci i Tailwind i jeszcze kilka innych rzeczy, ale edukacyjnie to dobre żeby zobaczyć jak to działa)

tomixtomi0001

2026-09-23T15:16:26+02:00

Rejestracja: dni
Ostatnio: dni
Postów: 215

0

John Gordon napisał(a):

Zakładasz, że przeglądarka ma "załączyć plik .jsx". Tak to nie działa — żadna przeglądarka nie wykonuje JSX. <h1>Witaj</h1> wewnątrz JS to błąd składni. JSX musi zostać skompilowany do zwykłego JS i dokładnie to robi Vite: resources/js/app.jsx ──(vite build) -> public/build/assets/app-BON39Dwa.js . Plik app-BON39Dwa.js z hashem to poprawny, oczekiwany wynik, a nie objaw problemu. Drobiazg: nie tworzy go npm install, tylko npm run build (vite build)
manifest.json to mapa "wejście -> wynik". Dyrektywa @vite(['resources/js/app.jsx']) czyta ją i sama generuje <script type="module" src="/build/assets/app-BON39Dwa.js">.

Gałąź @else jest bezsensowna <script type="module" src="{{ asset('build/assets/app.jsx') }}"></script> - taki plik nie istnieje - źródło leży w resources/js/, nigdy nie trafia do public/ a nawet gdyby istniał, przeglądarka wysypałaby się na JSX. W oryginalnym welcome.blade.php w @else jest tylko awaryjny <style>, żeby strona powitalna wyglądała bez zbudowanych assetów. Zmieniłeś to na <script> i tak powstała pułapka: gdy nie ma ani manifest.json, ani public/hot, strona wchodzi w @else i dostaje 404. Wywal cały @if/@else, zostaw bezwarunkowo @viteReactRefresh + @vite(...).

"Długo się męczyłem, żeby działało" - prawdopodobnie męczyłeś się niepotrzebnie bo to działa od razu - dodaj @vitejs/plugin-react i config:
Kopiuj
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
        react(),
    ],
});'
i potem: npm i react react-dom i npm i -D @vitejs/plugin-react.

P.S. zobacz czy nie pomieszałeś trybów dev/prod: wykonaj npm run dev i zobaczy czy działa

Dzięki, nie wiedziałem, że po edycji pliku /resurcces/js.jsx muszę dawać za każdym razerm komendę npm run build.