I am installing a new Symfony 7.1 / PHP 8.3.8 app with asset mapper and stimulus bundle and I am encountering issues with making stimulus functional :
-
symfony new my_project_directory --version="7.1.*" --webapp
-
check for the
/config/routes/attributes.yaml
file, otherwise create it as specified here https://symfony.com/doc/current/routing.html#creating-routes-as-attributes -
create a base controller to render a basic twig file
-
add
<div data-controller="hello"></div>
in the rendered twig file.
When I load the page I have an error in the console Uncaught TypeError: The specifier “@hotwired/stimulus” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.
boostrap.js file looks like this :
import { startStimulusApp } from '@symfony/stimulus-bundle';
const app = startStimulusApp();
hello_controller.js
import { Controller } from '@hotwired/stimulus';
export default class extends Controller {
connect() {
this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
}
}
and importmap.php
<?php
return [
'app' => [
'path' => './assets/app.js',
'entrypoint' => true,
],
'@symfony/stimulus-bundle' => [
'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
],
];
This issue is documented here : https://symfony.com/doc/current/frontend/asset_mapper.html#issues-and-debugging
But the provided solutions
php bin/console importmap:require @symfony/stimulus-bundle
or
php bin/console importmap:require @hotwired/stimulus
did not work for me as it returned
[OK] 0 new items () added to the importmap.php
and I still have the same error even after a php bin/console cache:clear
I have also noticed that the generated importmap was slightly different than the documentation here so I tried to change
'@symfony/stimulus-bundle' => [
'path' => './vendor/symfony/stimulus-bundle/assets/dist/loader.js',
],
to
'@symfony/stimulus-bundle' => [
'path' => '@symfony/stimulus-bundle/loader.js',
],
But still no success
Am I missing a step ? I could use webpack but the server that we are going to use for deployment does not provide node/npm.
Thanks in advance for any tips