[ERROR] Module build failed: Module not found: @symfony/stimulus-bundle

[BAD-WOLF]

I'm creating a project using Symfony and I'm having problems with the @symfony/stimulus-bundle package reference.

Apparently this package is not available on npm and yarn, I installed it via composer as the documentation recommends.

These are the steps I reproduced until I came across the error:

Creating Symfony App

  composer create-project symfony/skeleton symfony_skeleton

Package installation

  composer require webapp

  composer require symfony/asset-mapper symfony/asset symfony/twig-pack symfony/stimulus-bundle

  composer require webpack

The problem

When I run yarn watch i'm facing this error:

I ran the commands before running yarn watch: (bin/console asset-map:compile && yarn install)

yarn run v1.22.21
$ encore dev --watch
Running webpack ...

 ERROR  Failed to compile with 1 errors                                                                                        20:21:03

Module build failed: Module not found:
"./assets/bootstrap.js" contains a reference to the file "@symfony/stimulus-bundle".
This file can not be found, please check it for typos or update it if the file got moved.

Entrypoint app [big] 671 KiB = runtime.js 14.6 KiB vendors-node_modules_hotwired_stimulus_dist_stimulus_js-node_modules_core-js_modules_es_date_-bf8a9b.js 634 KiB app.css 735 bytes app.js 21.6 KiB
webpack compiled with 1 error

Bootstrap file which was mentioned in the log above

import { startStimulusApp } from '@symfony/stimulus-bundle';

const app = startStimulusApp();
// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);

I found someone on Stack Overflow with a slightly different context but dealing with the same error and he reports that the problem was resolved by downgrading from version 7.0 to 6.4

"The problem encountered was that I was using Symfony 7.0.1, while this method works for Symfony 6.4"

Is there any way to get around this during the project creation and dependency installation process? I wanted to keep my project in version 7.0 and find a way to solve the problem

References

Installing & Setting up the Symfony Framework


StimulusBundle: Symfony integration with Stimulus


StackOverflow - Bootstrap cannot find symfony/stimulus-bundle

[MatTheCat]

The StackOverflow question you provide already had an accepted answer which seems to make sense. Did you try configuring or removing the AssetMapper component?

[MatTheCat]

Am I correctly understanding that I'm unable to use AssetMapper?

It’s not that you cannot use it, but it’s supposed to avoid using a bundler so I guess it’s expected it does not work with webpack. In a new symfony webapp installation you don’t need a build step: @symfony/stimulus-bundle is resolved through an importmap.php file to a file located in your vendors. Webpack won’t know this mapping so it will fail.

Regarding stimulus-bridge it seems the error tells you what to do?

[BAD-WOLF]

VIDEO SHOWING WITHOUT WEBPACK

[MatTheCat]

Err you ask for a home controller while only having a hello controller.

Anyways seeing that video it seems you managed to use the AssetMapper so I guess your problem is solved?

[BAD-WOLF]

I understand, besides the error you told me

"Err you ask for a home controller while only having a hello controller."

also find out something else I was doing wrong

{% block body %}
    {{ stimulus_controller('hello') }}
{% endblock %}

In this case, the result obtained is in fact the string 'data-controller'hello'. Since the controller was not linked to an HTML element, but rather written in the "body" of the document, the correct way to use it would be:

{% block body %}
    <div {{ stimulus_controller('hello') }}>...</div>
{% endblock %}

Thank you for your attention and help

[Raghav9888]

Please help me
it gives me the error Module not found. in bootstrap.js
how I fix this one. because '@hotwired/stimulus' was already pre-install when we installed the new project
$ yarn watch
yarn run v1.22.19
$ encore dev --watch
Running webpack ...

ERROR Failed to compile with 2 errors 10:27:11 am

Module build failed: Module not found:
"./assets/bootstrap.js" contains a reference to the file "@symfony/stimulus-bundle".
This file can not be found, please check it for typos or update it if the file got moved.

"./assets/bootstrap.js" contains a reference to the file "@symfony/stimulus-bridge/lazy-controller-loader".
This file can not be found, please check it for typos or update it if the file got moved.

Entrypoint app/js 15.6 KiB = runtime.js 12.8 KiB app/js.js 2.86 KiB
webpack compiled with 2 errors