Installing Turbo

Hey @Thomas-D!

Hmmm. Let's see if we can get this sorted out! Did you just recently install WebpackEncoreBundle? I think you did - as I noticed the new version 2, which I think is what's causing the confusion.

Recently (about 3 weeks ago only), a new StimulusBundle was released. It basically just holds the Twig helpers like stimulus_controller(). But its Flex recipe also now holds the setup for integration with Symfony UX - e.g. the assets/controllers.json file and assets/bootstrap.js file. Do you have these? My guess is you don't, and that's ok! Try running:

composer require symfony/stimulus-bundle

That will install the new bundle and, more importantly, its recipe will add the files needed to integrate with Symfony UX (and its the integration with Symfony UX that ultimately loads Turbo).

Btw, if you ever want to triple-check if Turbo is being loaded at all, you can go into your console and run: console.log(Turbo). When Turbo is loaded, it's a rare situation where a global variable (Turbo) is added. so if Turbo has been loaded, that variable will be there. If not, it's not loaded yet.

If you install StimulusBundle and still hit any snags, let me know. This is a new change, we're trying to help people navigate it :).

Cheers!

Thank you for your reply !

I had both files with these values:

 cat assets/controllers.json
{
    "controllers": {
        "@symfony/ux-turbo": {
            "turbo-core": {
                "enabled": true,
                "fetch": "eager"
            },
            "mercure-turbo-stream": {
                "enabled": false,
                "fetch": "eager"
            }
        }
    },
    "entrypoints": []
}

cat assets/bootstrap.js
// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);

I still did the installation

composer require symfony/stimulus-bundle

Then I did it again :

npm install --force

npm run watch

However, this wasn't enough, I still have requests without ajax, and the console.log returns Turbo is not defined.

The two files (controllers.json, bootstrap.js) have not been modified.

Hello,

For your information, it seems that my problem came from the fact that I had installed turbo before stimulus. It must have given me some information or files for turbo to work properly. By trying again on a new project in the right order, everything works.

Thanks for sharing this @Thomas-D! Indeed, I think the problem was likely related to Flex recipes. By installing StimulusBundle first, its recipe executes and sets up some files that the Turbo recipe probably needs. I'd need to actually try this in the reverse order to know for sure, but anyway, I'm glad it's sorted!

Cheers!

That was not the error, I was using v1 of symfony-turbo, but now using version 2 I have a different problem
"../../vendor/symfony/ux-turbo/assets/dist/turbo_controller.js" contains a reference to the file "@hotwired/turbo".

my assets folder is not in the standard place

Hey @Xavier-V!

Sorry you're having problems - that's no fun! I think it's ok that your assets folder is not in a standard place. This error comes from this line, while trying to initialize Turbo: https://github.com/symfony/ux/blob/ce1bcfb93b55ee0aaa06bc8098644b17e1d34c8b/src/Turbo/assets/dist/turbo_controller.js#L2

The most likely problem is that the @hotwired/turbo package doesn't exist in your app. It's supposed to be added automatically for you when you install symfony/ux-turbo by the Flex recipe system. However, if your package.json is in a non-standard place, that may not have happened.

Try this:

npm add @hotwired/turbo -D

If you're still having issues, send over your package.json and we'll see if we can spot the problem.

Cheers!

Thanks for the response Ryan, but still not working
This is the current error now:

Module build failed (from ./node_modules/@symfony/stimulus-bridge/dist/webpack/loader.js):
Error: The file "@symfony/ux-turbo/package.json" could not be found. Try running "yarn install --force".
    at createControllersModule (/var/www/yns/app/yns_symfony/assets/admin_encore/node_modules/@symfony/stimulus-bridge/dist/webpack/loader.js:48:19)
    at Object.loader (/var/www/yns/app/yns_symfony/assets/admin_encore/node_modules/@symfony/stimulus-bridge/dist/webpack/loader.js:113:43)

I did the npm add, and also the npm force.
Our packages.json in this assets folder:

{
  "name": "admin_encore",
  "version": "1.0.0",
  "scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress",
    "prod": "NODE_ENV=production encore production"
  },
  "browserslist": [
    "> 5%"
  ],
  "devDependencies": {
    "@babel/core": "^7.21.8",
    "@babel/plugin-transform-runtime": "^7.21.0",
    "@babel/preset-env": "^7.20.2",
    "@hotwired/stimulus": "^3.0.0",
    "@hotwired/turbo": "^7.3.0",
    "@symfony/stimulus-bridge": "^3.2.0",
    "@symfony/webpack-encore": "^4.0.0",
    "autoprefixer": "^10.4.14",
    "babel-preset-minify": "^0.5.2",
    "core-js": "^3.23.0",
    "node-sass": "6.0.0",
    "postcss-loader": "^7.0.2",
    "regenerator-runtime": "^0.13.9",
    "stimulus-use": "0.51.0",
    "terser": "^5.17.4",
    "webpack": "^5.75.0",
    "webpack-bundle-analyzer": "^4.8.0",
    "webpack-cli": "^5.0.1",
    "webpack-concat-files-plugin": "^0.5.2",
    "webpack-notifier": "^1.15.0"
  },
  "dependencies": {
    "bootstrap": "^5.2.3",
    "bootstrap-icons": "^1.10.3",
    "glob": "8.0.3",
    "lodash": "4.17.21",
    "popper.js": "^1.16.1",
    "sass-loader": "^13.2.0",
    "sortable-tablesort": "^2.0.0",
    "stimulus-autocomplete": "^3.1.0",
    "vanillajs-datepicker": "^1.3.1",
    "vue": "^3.2.47"
  }
}

And also the controllers.json in the same folder

{
    "controllers": {
      "@symfony/ux-turbo": {
        "turbo-core": {
          "enabled": true,
          "fetch": "eager"
        }
      }
    },
    "entrypoints": []
}

Hey @Xavier-V!

Ah, thanks for posting the detailed code! I can see what I forgot. In package.json, add this to devDependencies:

"@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",

This is another thing that Flex adds for you (assuming it can find your package.json in the standard spot - but perhaps something in your setup made it miss doing this). The error:

The file "@symfony/ux-turbo/package.json" could not be found

happens because some JavaScript from @symfony/stimulus-bridge is looking for the @symfony/ux-turbo package, so it can read its package.json file.

Let me know if this fixes things!

Cheers!

Hey Ryan,
thanks for the answers and support. We made it work but with a trick.
I did all the steps you told me, but then compiling webpack encore I got this error (for both Stimulus and Hotwire)

Module build failed: Module not found:
"../../vendor/symfony/ux-turbo/assets/dist/turbo_controller.js" contains a reference to the file "@hotwired/stimulus".

After adding the line in packages json

"@symfony/ux-turbo": "file:../../vendor/symfony/ux-turbo/assets",

I run 'npm install' and 'npm list' indicated that the package was ok, but the reference problem persisted.
Trick: So, I installed both libraries in the other npm_modules folder which is at the same level as the vendor one, and it works.
The only bad thing is that I'm planning to move/remove that npm_modules folder in the future

Hey @Xavier-V!

Module build failed: Module not found:
"../../vendor/symfony/ux-turbo/assets/dist/turbo_controller.js" contains a reference to the file "@hotwired/stimulus".

This actually makes me think we have... sort of a "version" problem. Before version 3 (so v2 and v1), Stimulus was under a package called stimulus. Then, in version 3, it became @hotwired/stimulus. In UX, version 1 of symfony/ux-turbo relied on the stimulus package. Then, in v2, we updated to @hotwired/stimulus - https://github.com/symfony/ux/blob/2.x/src/Turbo/CHANGELOG.md#20

So my guess is that you're using symfony/ux-turbo v2, but maybe still had stimulus in your app, instead of @hotwired/stimulus. To make this extra confusing, this tutorial was created back with versions of things that still relied on stimulus - so if I'm correct about the mismatch, it's likely our fault.

Anyway, let me know if this helps!

Cheers!

Thanks for all the help.
As for the versioning we have:

• "symfony/ux-turbo": "^2.9", in composer.json
• "@symfony/stimulus-bridge": "^3.2.0", in packages.json

Hey @Xavier-V!

That all looks fine. In package.json, do you have stimulus or @hotwired/stimulus? You should have the 2nd... the error makes me think you have the first. But let me know.

Cheers!

Hey,
we have
"@hotwired/stimulus": "^3.0.0",
"@symfony/stimulus-bridge": "^3.2.0",

Hmm, that is a mystery! If you have @hotwired/stimulus in your package.json, then this error:

Module build failed: Module not found:
"../../vendor/symfony/ux-turbo/assets/dist/turbo_controller.js" contains a reference to the file "@hotwired/stimulus

doesn't make much sense! You mentioned that you have package.json directly in assets/? Are there 2 package.json? It just seems like Webpack is trying to load @hotwired/stimulus from a node_modules/ directory other than the one whose package.json file contains @hotwired/stimulus. Some small wires crossed somewhere...

Hey @Marc!

Hmm. That is weird. It sounds like Turbo is somehow being initialized twice. Internally, Turbo registers turbo-frame as a custom element (on CustomElementRegistry). So the error seems to be clearly saying that... this is somehow happening twice!

Is there anything special with your setup? Before you installed Turbo... is it possible it was already included somehow? I'm really not sure what could cause this to happen. Even if Turbo were imported multiple times (e.g. import * as Turbo from "@hotwired/turbo"), I'm pretty sure that this would still only result in it being registered once (as Turbo is smart enough not to allow itself to be initialized multiple times).

Let me know what you find out :).

Cheers!

Hi Ryan!

Thanks for your reply!

I found something interesting, this error is only triggered on debug mode, with the Symfony profiler. I put the environment in production mode and Turbo works like a charm!

Let me know if you have some idea why is loading twice on dev mode with the profiler!

Thanks!

If it is useful, my Symfony profiler (local) is loading by XHR requests while my coworkers not and our testing servers neather.

So this error is only happening to me.

Well... the fix was disable Xdebug... so weird

Woh... that IS weird. Both XDebug... and the fact that production mode fixed it. I'm not really sure what to say about this - but I'm glad I know that this could be a problem!

Cheers!

same problem here... I don't think disabling xdebug is a solution. I tried disabling xdebug with xdebu.mode=off but the ajaxtoolbar error still happens but the others dissapear. If I remove symfony/ux-turbo all is clean so is something with turbo and the profiler... the is no profilerpanel so it fails

https://symfony-devs.slack.com/archives/C3EQ7S3MJ/p1687255908010409

There are some incompatibilities with the Turbo JavaScript library and the web debug toolbar... but I've never had a chance to dive into them. However, they've never actually caused my any real issues. But, we really do need to hunt those down - the WDT is a complex piece of JavaScript machinery.

Hey Scott,

If you're interested in Symfony UX integration in EasyAdmin - please, take a look at this chapter where we're talking about it and integrates ChartJS via Symfony UX into EasyAdmin dashboard: https://symfonycasts.com/sc...

I hope that helps!

Cheers!

That link doesn't work, but you're talking about stimulus, and he is asking why turbo isn't working.
That is a really important question: how do you integrate turbo into easy admin?
I have implemented turbo frames, but I cannot get turbo drive to work because it messes up the javascript with the easy admin bundle.

Hey Nick!

I was just answering almost the same question for someone else this evening :). In short, while you can use Turbo Frames in some places (nice job getting this working btw!), you cannot use Turbo Drive with EasyAdmin. As you noticed, their JavaScript just isn't set up to work without full page refreshes. This is something that EasyAdmin will need to fix, and I would absolutely love to see it (and wouldn't mind helping with it). A fully Turbo-powered EasyAdmin would be awesome and could also much more easily power things like modals.

Sorry I can't give a better answer. But because we don't control the EasyAdmin JavaScript, and that JavaScript needs to be executed in a different way to support Turbo, our hands are tied.

Btw, I've just opened up an issue to discuss this - https://github.com/EasyCorp/EasyAdminBundle/issues/6051

Cheers!

Looking at the bundle's assets directory, there isn't that much javascript. I think the fastest, easiest way to tackle this is to just throw the javascript files into chatgpt and convert them all to stimulus controllers.

It is amazing when you get symfony ux in there. I add/remove rows on my index pages and update menu badges in real time with mercure and turbo streams from webhooks. Also, overriding any of the form templates and surrounding it in a turbo frame lets you have a modal anywhere that can load the crud forms for any entity. I've also gotten live components to work with custom actions.

Hey @Nick-F!

You might be right that I'm thinking this is BIGGER than it actually is - that would be great!

It is amazing when you get symfony ux in there. I add/remove rows on my index pages and update menu badges in real time with mercure and turbo streams from webhooks. Also, overriding any of the form templates and surrounding it in a turbo frame lets you have a modal anywhere that can load the crud forms for any entity. I've also gotten live components to work with custom actions.

This seriously sounds epic. What are you using to open the modals? Are you opening Bootstrap modals that point to the page's URL that has the turbo-frame? What about closing the modal? I go into modals in a big way in this tutorial - and I'm super happy with it. But I also like to see what others are doing so that we can (soon) publish some tools or docs with the BEST repeatable pattern for modals.

Anyway, thanks for posting this - pretty inspiring to to hear about this setup in EasyAdmin already today. If the existing JS could be converted into Stimulus controllers, then Turbo made to be an "opt in", in theory, this could be done without a major release.

Cheers!

1. Override the easyadmin layout.html.twig

2. In the body tag, set the following attributes

   data-controller="dashboard-modal"
   data-dashboard-modal-current-page-value="{{ ea.request.requestUri }}"
   

3. Create the dashboard modal controller

import { Controller } from "@hotwired/stimulus";
import Modal from "bootstrap/js/src/modal";

export default class extends Controller{

    static targets = ["turboFrame", "frameModal", "modalTitle"];

    static values = {
        'currentPage': String
    }

    connect() {
        this.formModal = new Modal(this.frameModalTarget);
    }

    // You need to set the data-action="dashboard-modal#menuItemClicked" attribute on the 
    // button you want to trigger the modal
    menuItemClicked(event){
        event.preventDefault();
        this.modalTitleTarget.innerHTML = event.currentTarget.dataset.modalTitle;
        // This just displays a spinner while the modal is loading
        this.turboFrameTarget.innerHTML =
        `
        <div class="d-flex justify-content-center align-items-center" style="height: 200px;">
            <span class="fa fa-spinner fa-spin align-self-center" style="font-size: 1.75em;"></span>
        </div>
        `;
        this.turboFrameTarget.src = event.currentTarget.href;
        this.formModal.show();
    }

    // This submits the form to the correct crud controller and adds the current page to the
    // form so that the current page can be reloaded
    submitted(event){
        let button = event.currentTarget;
        button.removeAttribute('data-action');
        button.innerHTML = '<span class="fa fa-spinner fa-spin"></span>';

        let form = this.turboFrameTarget.querySelector('form');
        // Causes the form to be submitted to the same route that rendered it
        form.setAttribute('action', this.turboFrameTarget.src);
        // Create a new hidden input element used in getRedirectResponseAfterSave() method
        // to reload the same page that user was viewing
        let input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'submittingPage';
        input.value = this.currentPageValue; 
        form.appendChild(input);
        form.submit();
    }
}

4. At the bottom of the layout.html.twig body, include a template fragment for the modal. The modal body is a turbo frame with an id of "dashboard-modal-frame"

<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true" data-dashboard-modal-target="frameModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0">
            <div class="modal-header bg-success border-bottom-0">
                <h5 class="modal-title text-white" data-dashboard-modal-target="modalTitle"></h5>
                <button type="button" class="btn-close btn-close-white" data-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body" style="min-height: 200px;">
                <turbo-frame id="dashboard-modal-frame" data-dashboard-modal-target="turboFrame">
{# THIS IS WHERE THE MAGIC HAPPENS #}
                </turbo-frame>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary mx-3 px-4" data-dismiss="modal">{{ "action.close"|trans(domain = 'EasyAdminBundle') }}</button>
                {# MAKE SURE THIS IS NOT A TYPE="SUBMIT" BUTTON #}
                <button type="button" class="btn btn-primary px-4" data-action="dashboard-modal#submitted" id="dashboard-modal-submit">
                    {{ "action.save"|trans(domain='EasyAdminBundle') }}
                </button>
            </div>
        </div>
    </div>
</div>

5. Override the easy admin new.html.twig and/or edit.html.twig templates and surround the form block with a turbo frame with the same id.

<turbo-frame id="dashboard-modal-frame">
    {% block new_form %}
     ...               
    {% endblock new_form %}
</turbo-frame>

6. Now, anywhere your app, you just make sure that you set the data-action, data-modal-title, and href attributes on a link or a button. The href can be generated by the AdminUrlGenerator. An example of creating a modal triggering button in the configureActions method:

$editUserSettings = Action::new('editUserSettings', 'Edit User Settings')
            ->linkToUrl(function (){
                return $this->urlGenerator->setController(UserCrudController::class)
                    ->setAction(Action::EDIT)
                    ->setEntityId($this->getUser()->getId())
                    ->generateUrl();
            })
            ->setHtmlAttributes([
                'data-action' => 'dashboard-modal#menuItemClicked',
                'data-modal-title' => 'Update Your Settings!'
            ])
        ;

7. In my crud controllers that are accessed this way, I add a DashboardModalForm trait that contains a single method called reloadSamePage(), that parses the submittingPage input on the modal form and redirects to that route. Then in the getRedirectResponseAfterSave method, it's simply:

if ($context->getRequest()->request->has('submittingPage')){
    return $this->reloadSamePage($context);           
}

You can have links all over your page that target that single modal, and it will reload its contents from their href attributes.

Epic - I've just highlighted your comment!

Hey julien_bonnier

Thanks for informing us, I've just fixed it :)

Cheers!