yarn encore dev --watch fails

[Linuxmaker]

trafficstars

When in my project yarn encore dev --watch run, I get this error message

yarn run v1.22.19
$ /var/www/html/testsymfony/node_modules/.bin/encore dev --watch
Running webpack...
  ERROR Failed to compile with 1 error 12:41:43
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 16.1 KiB = runtime.js 11.7 KiB app.css 735 bytes app.js 3.67 KiB
webpack compiled with 1 error

Before that I had symfony/stimulus-bundle with me

composer require symfony/stimulus-bundle

installed. So I assume that the file "@symfony/stimulus-bundle" exists. That's why I don't understand the yarn error.

My packages.json:

{
    "devDependencies": {
        "@babel/core": "^7.17.0",
        "@babel/preset-env": "^7.16.0",
        "@symfony/webpack-encore": "^4.0.0",
        "core-js": "^3.23.0",
        "regenerator-runtime": "^0.13.9",
        "webpack": "^5.74.0",
        "webpack-cli": "^4.10.0",
        "webpack-notifier": "^1.15.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production --progress"
    }
}

and the assets/bootstrap.js:

// Registers Stimulus controllers from controllers.json and in the controllers/ directory

// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);
import { startStimulusApp } from '@symfony/stimulus-bundle';

Maybe you can help me to understand the problem.

Greetings Andreas

[stof]

import { startStimulusApp } from '@symfony/stimulus-bundle' is the code that should be there where using StimulusBundle with the AssetMapper component, not with webpack. For webpack-encore, the code should have import { startStimulusApp } from '@symfony/stimulus-bridge'; (with the usage of startStimulusApp being also different).

Flex recipes should be inserting the right code in assets/bootstrap.js depending on whether symfony/webpack-encore-bundle or symfony/asset-mapper is installed in your project.

[Linuxmaker]

Thank you for your feedback. That explains a lot.

[Linuxmaker]

Well, I've had time to test your thoughts. Unfortunately, this doesn't work either with "stimulus-bridge" or with "stmulus-bundle" in bootstrap.js

yarn encore dev --watch
yarn run v1.22.19
$ /var/www/html/testsymfony/node_modules/.bin/encore dev --watch
Running webpack...

  ERROR Failed to compile with 1 error 17:19:20

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

Entrypoint app 16.1 KiB = runtime.js 11.7 KiB app.css 735 bytes app.js 3.67 KiB
webpack compiled with 1 error
  WAIT Compiling... 17:19:43

  ERROR Failed to compile with 1 error 17:19:43

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 16.1 KiB = runtime.js 11.7 KiB app.css 735 bytes app.js 3.66 KiB
webpack compiled with 1 error

are installed

...
├─ @symfony/[email protected]
│ ├─ @nuxt/friendly-errors-webpack-plugin@^2.5.1
│ ├─ [email protected]
│ │ └─ color-convert@^2.0.1
│ ├─ [email protected].*
│ ├─ babel-loader@^8.2.5
│ ├─ chalk@^4.0.0
│ ├─ [email protected]
│ │ ├─ ansi-styles@^4.1.0
│ │ └─ supports-color@^7.1.0
│ ├─ clean-webpack-plugin@^4.0.0
│ ├─ [email protected]
│ │ └─ color-name@~1.1.4
│ ├─ [email protected]
│ ├─ css-loader@^6.7.0
│ ├─ css-minimizer-webpack-plugin@^5.0.0
│ ├─ fast-levenshtein@^3.0.0
│ ├─ [email protected]
│ │ └─ yallist@^4.0.0
│ ├─ mini-css-extract-plugin@^2.6.0
│ ├─ pkg-up@^3.1.0
│ ├─ pretty-error@^4.0.0
│ ├─ resolve-url-loader@^5.0.0
│ ├─ semver@^7.3.2
│ ├─ [email protected]
│ │ └─ lru-cache@^6.0.0
│ ├─ style-loader@^3.3.0
│ ├─ [email protected]
│ │ └─ has-flag@^4.0.0
│ ├─ sync-rpc@^1.3.6
│ ├─ tapable@^2.2.1
│ ├─ terser-webpack-plugin@^5.3.0
│ ├─ tmp@^0.2.1
│ ├─ webpack-dev-server@^4.8.0
│ ├─ [email protected]
│ └─ yargs-parser@^21.0.0
...

Basically, I follow this tutorial because I want to create modules with forms. And when I try to reproduce this yarn command in the course, this error occurs.

[Linuxmaker]

I'll put the question the other way around. Where in the Symfony project directory tree can I find "stimulus-bridge"? What does the "'@symfony/stimulus-bridge'" syntax mean?

[weaverryan]

Hey @Linuxmaker!

I'm not sure what went wrong, but it looks like something weird happened when you originally installed Encore & Stimulus. Basically, all of this setup work should have been done automatically for you by the recipe system. @symfony/stimulus-bridge is referring to a node package, which you can install via:

yarn add @symfony/stimulus-bridge

But, again, that should have been added for you automatically via the recipe, so something went weird and there could be other problems. For example, if you run the following commands, you will start a new project and get Encore + Stimulus installed successfully (and you could, at least, use this as a reference):

symfony new encore_ux_app
cd encore_ux_app
composer require twig encore symfony/stimulus-bundle

Btw, as mentioned in the tutorial - https://symfonycasts.com/screencast/symfony/webpack-encore - the latest version of the encore package (which is an alias to symfony/webpack-encore-bundle) also needs symfony/stimulus-bundle if you want to use the Stimulus stuff (which we do in that tutorial).

Let me know if that helps!

[Linuxmaker]

Thank you for your feedback. I grep my history times after the installation commands. So I can say that I am using this practice project composer create-project symfony/skeleton:"^6.3" testsymfony had created. I also had

composer require symfony/asset-mapper
composer require symfony/webpack-encore-bundle
composer require symfony/stimulus-bundle
yarn add @symfony/stimulus-bundle @hotwired/stimulus --dev
yarn add @symfony/stimulus-bundle @symfony/stimulus --dev

carried out. Maybe that was unnecessary? But I didn't know when I installed it, because I didn't know anything yet. Frankly I find it a bit confusing to have multiple installation methods side by side. Strictly speaking, there would still be nmp. Is there a way to cleanly delete these installed packages like under Linux, e.g. "apt purge package"? Maybe with "composer del", "yarn del" to get the old state back? Or which directories are deleted in this project thread and which files are corrected?

If I now implement "symfony new encore_ux_app", how does that differ from 'composer create-project symfony/skeleton:"^6.3" testsymfony', with which I explicitly install Symfony 6.3?

[Linuxmaker]

I deleted the project again and started as suggested. Up to this point everything is ok. Many thanks for the support.

[stof]

My guess is that by requiring both the asset-mapper component and the webpack-encore-bundle, you confused the Flex configurators as it is unexpected to use both asset management systems in a single project.

[Linuxmaker]

My guess is that by requiring both the asset-mapper component and the webpack-encore-bundle, you confused the Flex configurators as it is unexpected to use both asset management systems in a single project.

That's quite possible. Maybe I got something wrong there.