Bootstrap cannot find symfony/stimulus-bundle

Question

Context

I am learning Symfony through "ENI learning" course "Learn to Develop web applications with PHP and Symfony (2nd edition)", by Yves ROCAMORA.

In the section "Webpack Encore", he explains how to use Sass and Vue.js to preprocess CSS and Javascript.

However, I am unable to make Webpack-Encore work alongside Bootstrap.

The Problem

• I used symfony new --webapp to create the structure of the application.
• Then, composer require symfony/webpack-encore-bundle to install Webpack Encore.
• I installed sass-loader, node-sass and bootstrap with npm. npm install returns a clean installation.
• I did modify webpack.config.js to enable Sass loader.

When I run npm run watch, I am confronted by the following error:

 ERROR  Failed to compile with 1 errors                                  9:54:06

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.

What am I expecting

npm run watch should correctly build the application.

What I tried

First of all, I tried using composer to install the missing package, but it appears that stimulus-bundle is part of Webpack-Encore, and it already is on my project.

I noticed that the guide had a different package.json: mine was missing @hotwired/stimulus and @symfony/stimulus-bridge, so I tried to install them with composer, but those package cannot be installed this way. I even tried to add them manually (it is a bad habit, right?), and then run a npm install, but npm run watch still fails with the same error statement.

After cleaning my project and then punctiliously following each and every step of the guide, I still get the same error.

Edit

The problem encountered was that I was using Symfony 7.0.1, while this method works for Symfony 6.

Answer 1

The process is described on Switch from AssetMapper section of Webpack Encore's doc:

# Remove AssetMapper & Turbo/Stimulus temporarly
composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundle

# Add Webpack Encore and Turbo/Stimulus back
composer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle

# Install and build assets
npm install
npm run dev