SymfonyCasts stands united with the people of Ukraine
gstreamer0.10-ffmpeg
gstreamer0.10-plugins-good packages.
Wouldn't it be cool if when we click on a link or even submit a form, instead of that triggering a full page reload, it made an Ajax call... then updated the page with the new HTML? Well, that's exactly what Turbo Drive does. And it's a huge step towards making our app feel like a single page application.
Turbo itself is... just a JavaScript library! It has nothing to do with Symfony. But Symfony does have a package that makes it easier to use. Let's go get that package installed.
Head back to your terminal, open a new tab and run:
composer require "symfony/ux-turbo:^1.3"
After this finishes... run: git status to see what its recipe did:
git status
Ok: it looks like it installed a new bundle... called TurboBundle. It also changed our package.json file... let's go find that. It added two new packages including turbo itself. The recipe also updated our controllers.json file, which we learned about in the Stimulus tutorial. This adds a new Stimulus controller to our app. More on what that controller does a bit later.
| { | |
| "controllers": { | |
| "@symfony/ux-chartjs": { | |
| "chart": { | |
| "enabled": true, | |
| "fetch": "lazy" | |
| } | |
| }, | |
| "@symfony/ux-turbo": { | |
| "turbo-core": { | |
| "enabled": true, | |
| "fetch": "eager" | |
| } | |
| } | |
| }, | |
| "entrypoints": [] | |
| } |
But... you probably noticed that we have an error from yarn:
The file
@symfony/ux-turbo/package.jsoncould not be found. Try runningyarn install --force.
That makes sense! As we learned about in the first tutorial, we need to re-install our yarn dependencies so it can copy the new @symfony/ux-turbo package from our vendor/ sdirectory into the node_modules/ directory. Let's do it:
yarn install --force
When that finishes... run yarn watch again and... it's happy!
yarn watch
Cool! So the @hotwired/turbo JavaScript package is now installed. Now... what do we need to do to activate Turbo Drive?
The answer is... nothing! It's already working!
Head back to your browser and refresh the page. Start clicking around. Woh! It's alive! And it feels fast!
Open up your browser tools... and then go to network tools and watch for XHR requests - or Ajax request. Yep! Every single click is now an Ajax request. There are zero full page reloads!
We now have... dare I say... a single page app! Tutorial finished! Good luck!
Okay, okay... of course the tutorial isn't finished yet. Turbo Drive feels like black magic... and that's never a great feeling. So next, let's discover how Turbo Drive works behind the scenes. We'll also see how Turbo was magically activated simply by installing it and I'll introduce you to a few subtle features of Turbo Drive that are already making the experience feel extra quick.
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!
Xavier-V
| posted 4 months ago
Is it possible that it only works with Stimulus v2, and not v3?
npm ERR! notarget No matching version found for @hotwired/stimulus@^2.0.0.
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:
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!
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...
Hi,
I installed turbo and I get this error:DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "turbo-frame" has already been used with this registry
Hi I installed turbo and I get this error
DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "turbo-frame" has already been used with this registry
I don't know why
thnaks!
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.
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.
He Ryan,
How do you get this to work with easyadmin. I have installed the @symfony/ux-turbo and added it to the easy admin dashboard with the configureAssets like so:
public function configureAssets(): Assets
{
return Assets::new()
->addWebpackEncoreEntry('app');
}
you can see that it has been added to the easyadmin head script:
/build/vendors-node_modules_symfony_stimulus-bridge_dist_index_js-nodemodules<b>symfony_ux-turbo</b>_dist-d2694b.js
Wat am i missing here?
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!
Hello,
There is a problem with the course code. assets/controllers/featured-product-react_controller.js is referencing to assets/components/FeaturedProduct.js but the file is actually called assets/components/FeatureProduct.js (missing d in Featured).
Cheers
// composer.json
{
"require": {
"php": ">=8.1",
"ext-ctype": "*",
"ext-iconv": "*",
"composer/package-versions-deprecated": "1.11.99.1", // 1.11.99.1
"doctrine/annotations": "^1.0", // 1.13.1
"doctrine/doctrine-bundle": "^2.2", // 2.3.2
"doctrine/orm": "^2.8", // 2.9.1
"phpdocumentor/reflection-docblock": "^5.2", // 5.2.2
"sensio/framework-extra-bundle": "^6.1", // v6.1.4
"symfony/asset": "5.3.*", // v5.3.0-RC1
"symfony/console": "5.3.*", // v5.3.0-RC1
"symfony/dotenv": "5.3.*", // v5.3.0-RC1
"symfony/flex": "^1.3.1", // v1.18.5
"symfony/form": "5.3.*", // v5.3.0-RC1
"symfony/framework-bundle": "5.3.*", // v5.3.0-RC1
"symfony/property-access": "5.3.*", // v5.3.0-RC1
"symfony/property-info": "5.3.*", // v5.3.0-RC1
"symfony/proxy-manager-bridge": "5.3.*", // v5.3.0-RC1
"symfony/runtime": "5.3.*", // v5.3.0-RC1
"symfony/security-bundle": "5.3.*", // v5.3.0-RC1
"symfony/serializer": "5.3.*", // v5.3.0-RC1
"symfony/twig-bundle": "5.3.*", // v5.3.0-RC1
"symfony/ux-chartjs": "^1.1", // v1.3.0
"symfony/ux-turbo": "^1.3", // v1.3.0
"symfony/ux-turbo-mercure": "^1.3", // v1.3.0
"symfony/validator": "5.3.*", // v5.3.0-RC1
"symfony/webpack-encore-bundle": "^1.9", // v1.11.2
"symfony/yaml": "5.3.*", // v5.3.0-RC1
"twig/extra-bundle": "^2.12|^3.0", // v3.3.1
"twig/intl-extra": "^3.2", // v3.3.0
"twig/string-extra": "^3.3", // v3.3.1
"twig/twig": "^2.12|^3.0" // v3.3.2
},
"require-dev": {
"doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.0
"symfony/debug-bundle": "^5.2", // v5.3.0-RC1
"symfony/maker-bundle": "^1.27", // v1.31.1
"symfony/monolog-bundle": "^3.0", // v3.7.0
"symfony/stopwatch": "^5.2", // v5.3.0-RC1
"symfony/var-dumper": "^5.2", // v5.3.0-RC1
"symfony/web-profiler-bundle": "^5.2", // v5.3.0-RC1
"zenstruck/foundry": "^1.10" // v1.10.0
}
}// package.json
{
"devDependencies": {
"@babel/preset-react": "^7.0.0", // 7.13.13
"@fortawesome/fontawesome-free": "^5.15.3", // 5.15.3
"@hotwired/turbo": "^7.0.0-beta.5", // 1.2.6
"@popperjs/core": "^2.9.1", // 2.9.2
"@symfony/stimulus-bridge": "^2.0.0", // 2.1.0
"@symfony/ux-chartjs": "file:vendor/symfony/ux-chartjs/Resources/assets", // 1.1.0
"@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/Resources/assets", // 0.1.0
"@symfony/ux-turbo-mercure": "file:vendor/symfony/ux-turbo-mercure/Resources/assets", // 0.1.0
"@symfony/webpack-encore": "^1.0.0", // 1.3.0
"bootstrap": "^5.0.0-beta2", // 5.0.1
"chart.js": "^2.9.4",
"core-js": "^3.0.0", // 3.13.0
"jquery": "^3.6.0", // 3.6.0
"react": "^17.0.1", // 17.0.2
"react-dom": "^17.0.1", // 17.0.2
"regenerator-runtime": "^0.13.2", // 0.13.7
"stimulus": "^2.0.0", // 2.0.0
"stimulus-autocomplete": "https://github.com/weaverryan/stimulus-autocomplete#toggle-event-always-dist", // 2.0.0
"stimulus-use": "^0.24.0-1", // 0.24.0-2
"sweetalert2": "^11.0.8", // 11.0.12
"webpack-bundle-analyzer": "^4.4.0", // 4.4.2
"webpack-notifier": "^1.6.0" // 1.13.0
}
}
Hello,
I tried to follow the tutorial with Symfony 6 and with these dependency versions
And I couldn't get Turbo to work by going to links. Should I add class in the link or in a parent div? Or do I have to use turbo frame?
To explain better, I have this nav in my <body>, for example, and clicking on it reloads the entire page.