Uncaught Error: @vitejs/plugin-react can't detect preamble on Mantis-Dashboard

ckanitz commented 2 weeks ago

vite-plugin-symfony version

6.4.7

vite-bundle version

6.4.7

your OS, node version, Symfony version, PHP version

MacOS 14, node 20.11.0, Symfony 6.4.x

Description

I've got the extended version of the Mantis Dashboard (https://github.com/codedthemes/mantis-free-react-admin-template) which uses vite. I followed the migration guide to replace webpack with vite. My build-pipeline + dev-serv stack works fine on npm start:

"scripts": { "start": "composer install && npm install && npm run build && npm run serve", "build": "vite build", "dev": "vite", "serve": "docker-compose up -d && symfony serve -d", "stop": "docker-compose stop && symfony local:serve:stop", ... },

But on npm run dev (after npm start) I'll get the following error in my console: Uncaught Error: @vitejs/plugin-react can't detect preamble on Mantis-Dashboard also pointing to a (3 year old & closed) GitHub discussion: https://github.com/vitejs/vite-plugin-react/issues/11#discussion_r430879201

How to reproduce

Setup a symfony project.

Setup vite.

Grab the free mantis dashboard project https://github.com/codedthemes/mantis-free-react-admin-template

Create a script.js in the <symf>/assets/ folder (will be used for everything unrelated to the dashboard, like analytics)

Create a folder <symf>/src-dashboard

Copy the contents of <mantis>/src to <symf>/src-dashboard

Add (dev)dependencies needed by mantis to symfony project

Adjust the <symf>/vite.config.mjs:

// https://github.com/vitejs/vite/discussions/3448
import path from 'path';
import { defineConfig } from 'vite';
import jsconfigPaths from 'vite-jsconfig-paths';
import react from '@vitejs/plugin-react';
import symfonyPlugin from 'vite-plugin-symfony';

export default defineConfig({
    root: '.',
    plugins: [react(), jsconfigPaths(), symfonyPlugin()],
    // https://github.com/jpuri/react-draft-wysiwyg/issues/1317
    base: process.env.VITE_APP_BASE_NAME,
    define: {
        global: 'window'
    },
    build: {
        outDir: 'public/build',
        emptyOutDir: true,
        rollupOptions: {
            input: {
                app: './src-dashboard/index.jsx',
                payment: './assets/payment.js'
            }
        }
    },
    resolve: {
        alias: [
            {
                find: /^~(.+)/,
                replacement: path.join(process.cwd(), 'node_modules/$1')
            },
            {
                find: /^src(.+)/,
                replacement: path.join(process.cwd(), 'src-dashboard/$1')
            }
        ]
    }
});

Copy jsconfig.json and adjust src to src-dashboard

For completion, my index.html.twig looks like this:

<!doctype html>
<html class="no-js">

<head>
  <meta charset="utf-8">
  <title>Loading ...</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    {% block stylesheets %}
        {{ vite_entry_link_tags('app') }}
    {% endblock %}

    {% block javascripts %}
        {{ vite_entry_script_tags('app') }}
    {% endblock %}

    <script>
    window.reactApp = {{ settings|json_encode|raw }};
    </script>
</head>

<body>
  <!-- Add your site or application content here -->
  <div id="root"></div>
</body>

</html>

Possible Solution

No response

lhapaipai commented 2 weeks ago

hi @ckanitz , I think you forgot to add react as dependency in your twig function documentation

    {% block javascripts %}
        {{ vite_entry_script_tags('app', { dependency: 'react'}) }}
    {% endblock %}

ckanitz commented 2 weeks ago

hi @ckanitz , I think you forgot to add react as dependency in your twig function documentation
    {% block javascripts %}
        {{ vite_entry_script_tags('app', { dependency: 'react'}) }}
    {% endblock %}

I feakin' love you man <3 BANZAI!

ckanitz commented 2 weeks ago

https://github.com/lhapaipai/symfony-vite-dev/issues/30#issuecomment-2176052400 resolved the issue, thx again

lhapaipai / symfony-vite-dev