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.

I had the same problem, and i think i now know why. The "--webapp" option installs "Asset Mapper" as default. This will be in conflict with the recipes from Encore. Symfony Flex does not know how to deal with that. So you have two options:

1. Remove everything related to AssetMapper

or

2. Just start a new project without --webapp option

I did the latter, and so far there are no errors when starting "npm run watch". Also, when adding "ux-turbo" it properly updated the "package.json" with the new packages. This didn't happen with Asset Mapper, and whatever its companions are, still around.

Please be aware, that starting the project without webapp option, will install the absolute bare bones of the project. You will have to add components like "template", "MakerBundle" and others yourself.