search

andrefelipe / vite-php-setup

Example on how to run Vite on traditional PHP sites
https://github.com/vitejs/vite
358 stars 52 forks source link

[Question] Will this work with React? #11

Closed zeljkomarinkovic closed 2 years ago

zeljkomarinkovic commented 2 years ago

I have tested it with semi success. Works only with legacy codebase not with functional components. Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201 at Button.jsx:1:1 Have someone had similar problems?

DitaXoXo commented 2 years ago

Hello !

The solution is actually hinted by the backend integration doc from vite, you also have solutions https://github.com/vitejs/vite/issues/341#issuecomment-657039140 here and https://github.com/vitejs/vite/issues/1984 here

I edited the vite() function like this : 

function vite(string $entry)
{
    $vite_host = VITE_HOST;
    if (isDev()) {
        return <<<HTML
            <script type="module">
                import RefreshRuntime from "{$vite_host}/@react-refresh"
                window.\$RefreshReg$ = () => {}
                window.\$RefreshSig$ = () => (type) => type
                RefreshRuntime.injectIntoGlobalHook(window)
                window.__vite_plugin_react_preamble_installed__ = true
            </script>
            <script type="module" src="{$vite_host}/@vite/client"></script>
            <script type="module" src="{$vite_host}/assets/js/website.js"></script>
            <script src="{$vite_host}/{$entry}" type="module" defer></script>
        HTML;
    } else {
        return "\n" . jsTag($entry)
        . "\n" . jsPreloadImports($entry)
        . "\n" . cssTag($entry);
    }
}
andrefelipe commented 2 years ago

Sorry, I don't use React. Will leave this open in case someone finds the problem. Thanks all

zeljkomarinkovic commented 2 years ago

@DitaXoXo Sorry for late reply. Yeah, the solution was like you said in Vite docs, glad you worked that out.

andrefelipe commented 2 years ago

Thanks guys. Added this information to the README. Best regards

ainaarawaida commented 7 months ago

this is example for svelte https://github.com/ainaarawaida/svelte-php-framework