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.

Daph

Symfony version? There are significant differences between v5 & v6 for webpack-encore and stimulus bundles. – Anemone

@Anemone I am using symfony 7.0.1, while the ressource I am using is for symfony 6. I tried to build the application using symfony 6.4.1, and it does work. Thanks. I will search for a solution using symfony 7. – Whorled

Symfony 6+ will require symfony/stimulus-bridge separately from webpack-encore bundle. symfony/stimulus-bridge didn't exist before Symfony 6 and its stimulus functions were included in webpack-encore bundle. – Anemone

@Anemone but why such error occurs in fresh installation? It will come with correctly updated bootstrap.js – Waterman

I had the same problem. I guess it's because of asset-mapper. It is installed by default, and probably interferes with encore. So i removed it and tried installing it again. This time it actually updated the package.json to include "file:vendor/symfony/ux-turbo/assets". But "stimulus-bundle" was still missing. So i've added it like this to package.json: "@symfony/stimulus-bundle": "file:vendor/symfony/stimulus-bundle/assets", Force install and then it started working. – Leucoma

Answer 1

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.

Leucoma

Answer 2

I had the same problem recently and resolved it thanks to a friend. I wanted to use Symfony UX Autocompletion.

From a blank project, I executed these commands :

symfony new my_project
cd my_project
composer require webapp

composer remove symfony/asset-mapper
composer require symfony/webpack-encore-bundle
composer require symfony/stimulus-bundle
composer require symfony/ux-autocomplete

npm install -f
npm run build

To solve the problem I did these commands and steps :

• Check if the package "@symfony/stimulus-bridge" is installed in package.json
• In assets/app.js add the line import './bootstrap.js';
• In assets/bootstrap.js change the bundle to bridge > import { startStimulusApp } from '@symfony/stimulus-bridge';
• In webpack.config.js add the line .enableStimulusBridge('./assets/controllers.json') to import the controllers file
• Delete node_modules folder then install and re-build node_modules again

rm -rf node_modules
npm i -f
npm run build

Idk if some steps are useless, but it works for me even on Symfony 6.4 and 7.0.

Sources:

• https://mcmap.net/q/1324309/-symfony-6-4-use-encore-webpack-instead-asset-mapper
• https://symfony.com/bundles/StimulusBundle/current/index.html

Fluting

Worked for me with Symfony 7.0.4, thanks ! I think what did the trick was : In assets/bootstrap.js change the bundle to bridge : import { startStimulusApp } from '@symfony/stimulus-bridge'; – Without

Worked for me too with Symfony 7, thanks a lot! – Pathfinder

I have a bundle that requires the AssetMapper but I also want to use Vue, so removing the AssetMapper is not a solution for me. – Bacciform

Answer 3

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

Barricade

This worked for me with Symfony 7.0.7. – Breadroot

Answer 4

I had the same issue, so I decided to erase my current project and create a new Symfony app with the command:

symfony new my_project_directory --version="7.0.*" --webapp

• Then, I installed and initialized the Tailwind Bundle with these two commands:

composer require symfonycasts/tailwind-bundle

php bin/console tailwind:init

• In the base.html.twig template, add:

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('styles/app.css') }}">
{% endblock %}

• To start compiling:

php bin/console tailwind:build --watch

This time, I had no errors when compiling, the taillwing.config.js file was automaticly configured and Tailwind classes worked correctly.

See more details in the documentation here:

Tailwind CSS for Symfony

Opium