Packaging JS and CSS with Encore

Wanted to let you know :

Stimulus (Bootstrap.js) was removed around version 2.0 of symfony/webpack-encore-bundle.
From the changelog, it look like it was moved to symfony/stimulus-bundle.

Looked into the recipe for symfony/stimulus-bundle and installing it add the files that would be missing if we now only installed Webpack Encore .

When I installed symfony, I got v7.0.7 that doesn't have stimulus (see comment from Arnaud-G). I tried symfony/webpack-encore-bundle:1.14 but that required downgrading symfony/config, symfony/dependency-injection, symfony/http-kernel to ^6.4 instead of ^7, and I still got an error:

Fatal error: Declaration of Symfony\WebpackEncoreBundle\CacheWarmer\EntrypointCacheWarmer::doWarmUp($cacheDir, Symfony\Component\Cache\Adapter\ArrayAdapter $arrayAdapter): bool must be compatible with Symfony\Bundle\FrameworkBundle\CacheWarmer\AbstractPhpFileCacheWarmer::doWarmUp(string $cacheDir, Symfony\Component\Cache\Adapter\ArrayAdapter $arrayAdapter, ?string $buildDir = null): bool in /{path}/projects/mixed_vinyl/vendor/symfony/webpack-encore-bundle/src/CacheWarmer/EntrypointCacheWarmer.php on line 30

so I went the other way with composer require symfony/stimulus-bundle followed by yarn install and was able to follow the tutorial that way.

npm run watch

Is there a way to run this command in the background ? equivalent to symfony server:start -d
It locks up the command line so I can't type anything anymore. I can open a new one but would prefer to having single one running is more convenient.

Hi There I seem to be getting an error when I run yarn watch. Also when I install webpack, the bootstrp.js file didnt get added to my asset folder so I copied it from you "new" file attached to this tutorial.

....\mixed_vinyl>yarn watch
yarn run v1.22.19
$ encore dev --watch
Running webpack ...

WARNING Webpack is already provided by Webpack Encore, also adding it to your package.json file may cause issues.
ERROR Failed to compile with 2 errors 9:56:47 am

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.

"./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 [big] 1.54 MiB (1.02 MiB) = runtime.js 13 KiB vendors-node_modules_fontsource_roboto-condensed_index_css-node_modules_fortawesome_fontaweso-2f69db.css 1.52 MiB app.css 1.82 KiB app.js 4.56 KiB 22 auxiliary assets
webpack compiled with 2 errors

This is the bootstarp.js file. Mabe the error is because I copie just the bootstarp file and the remaing files are still mine and im missing a lie thats added to a file later hence the unresolved error? not sure but I am a bit stuck.

The build of the app doesn't work for me. I get this error which is a massive stacks of callbacks :
TypeError: The 'compilation' argument must be an instance of Compilation

at NormalModule.getCompilationHooks (C:\Users\antoi\symfony\test_project\node_modules\webpack\lib\NormalModule.js:231:10)
at C:\Users\antoi\symfony\test_project\node_modules\@symfony\webpack-encore\lib\webpack-manifest-plugin\index.js:56:24
at _next29 (eval at create (C:\Users\antoi\Symfony\test_project\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:97:1)
at _next7 (eval at create (C:\Users\antoi\Symfony\test_project\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:189:1)
at Hook.eval [as call] (eval at create (C:\Users\antoi\Symfony\test_project\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:223:1)
at Hook.CALL_DELEGATE [as _call] (C:\Users\antoi\Symfony\test_project\node_modules\tapable\lib\Hook.js:14:14)
at Compiler.newCompilation (C:\Users\antoi\Symfony\test_project\node_modules\webpack\lib\Compiler.js:1126:26)
at C:\Users\antoi\Symfony\test_project\node_modules\webpack\lib\Compiler.js:1170:29
at Hook.eval [as callAsync] (eval at create (C:\Users\antoi\Symfony\test_project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\antoi\Symfony\test_project\node_modules\tapable\lib\Hook.js:18:14)
at Compiler.compile (C:\Users\antoi\Symfony\test_project\node_modules\webpack\lib\Compiler.js:1165:28)
at C:\Users\antoi\Symfony\test_project\node_modules\webpack\lib\Compiler.js:524:12
at Compiler.readRecords (C:\Users\antoi\Symfony\test_project\node_modules\webpack\lib\Compiler.js:989:5)
at C:\Users\antoi\Symfony\test_project\node_modules\webpack\lib\Compiler.js:521:11
at Hook.eval [as callAsync] (eval at create (C:\Users\antoi\Symfony\test_project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:34:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\antoi\Symfony\test_project\node_modules\tapable\lib\Hook.js:18:14)
at C:\Users\antoi\Symfony\test_project\node_modules\webpack\lib\Compiler.js:518:20
at Hook.eval [as callAsync] (eval at create (C:\Users\antoi\Symfony\test_project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:23:1)
at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\Users\antoi\Symfony\test_project\node_modules\tapable\lib\Hook.js:18:14)
at run (C:\Users\antoi\Symfony\test_project\node_modules\webpack\lib\Compiler.js:515:25)
at Compiler.run (C:\Users\antoi\Symfony\test_project\node_modules\webpack\lib\Compiler.js:538:4)
at webpack (C:\Users\antoi\Symfony\test_project\node_modules\webpack\lib\webpack.js:155:15)
at WebpackCLI.f [as webpack] (C:\Users\antoi\Symfony\test_project\node_modules\webpack\lib\index.js:72:16)
at WebpackCLI.createCompiler (C:\Users\antoi\Symfony\test_project\node_modules\webpack-cli\lib\webpack-cli.js:1789:29)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async WebpackCLI.runWebpack (C:\Users\antoi\Symfony\test_project\node_modules\webpack-cli\lib\webpack-cli.js:1890:20)
at async Command.<anonymous> (C:\Users\antoi\Symfony\test_project\node_modules\webpack-cli\lib\webpack-cli.js:912:21)
at async Promise.all (index 1)
at async Command.<anonymous> (C:\Users\antoi\Symfony\test_project\node_modules\webpack-cli\lib\webpack-cli.js:1372:13)

Now, I saw the comment by Arnaud-G and realized I am on webpack 2.0. But I installed the stimulus bundle.
I couldn't find how to install an older version of webpack either. I am on Windows and I am not familiar with command line based systems. :(

Either I fix this error, or I find the way to install the older version from that tutorial. And I definitely need help for either of those!
Hoping a good samaritan will have some time to help. Thanks.

Is there an option to embed the app.js (or {entry}.js for that matter) on the HTML head?

Reasoning:
In the enterprise context I would like to maintain sensitive data protected by password instead of hosting is as static. I don't care to expose the pkgs used thou. An example of exposing too much is when you use React Admin. Even if you protects your API documentation it will expose it in the build. Although embedding RA entirely might be a bad idea it illustrates the concern with exposing sensitive enterprise data models.

Hi,
I've Been watching quite a few of your tutorials now and in the past and think they are great. Even more important they surely helped me update my knowledge on using Symfony to build an app.
I'm not a frequent "user" anymore and I'm a bit rusty (comes with the age). I used to work in IT for more than 35 years now and the last time I have been really using Symfony (it was Symfony2 I think) dates back to 2013.
When I retired from IT and stepped into business at my own home (bookkeeping and accountancy) together with my wife, I wanted to start improve our own IT and make a few of our own apps in an "online" environment running locally on a self-hosted internal webserver from home. I decided to use Symfony and started to refresh my skills. I watched the videos, typed along all of the code and almost all worked fine for me. Up untill...and the same thing happens now...Encore Webpack and Node JS and/or Yarn becomes the topic.
Not so much the Symfony-part of Encore but the Node and/or Yarn part of the story which really sents me into the woods (so to speak).

Now I learned Yarn is part of NPM and because of that it could be used both (syntax differs I understand) but I can't get it to work.

Especially in this tutorial you mention you use Yarn (watch) instead of NPM. You follow along using Yarn and skip the alternative when using NPM. Also in the script of the videos nor in the conversations I could find a resolution.

To me it feels the NPM and/or Yarn stuff is quite a jungle (with version maintained and abadoned and you using a version that is not the latest version).

I'm sorry for this lengthy story behind my "problem", As experienced as I think I am in IT related problems, I'm lost.
Can you please help me in the right direction for getting this "watch-thing" up and working?

How can I get something simple (as it seems) as "yarn watch" to work without using Yarn, since Yarn is part of NPM?

Kind Regards,
Wim.

hi,if i add function or const on assets/app.js:

const demo='ok'

function test(){
    alert('this is test')
}

yarn run build

then i want call the test() function on Twig:

<button onclick='test()'>Test</button>

i got error, how to use it?

Using Symfony 6.1.6 and yarn 1.22.19.

running yarn Watch I get

getting. Error: Cannot find module 'webpack/bin/webpack'

I also received "Error: Cannot find module '@babel/core" but for that I could do yarn add @babel/core

How do I solve this ?

Hi,
my usecase is the following:
I have 3rd-party page template and organized the js-files in a separate folder in /assets. I imported them in a separate template.js. All compiles flawlessly. I use the entry_tags in my twig template. All good.

But when I load the page it tries to load some of the imported .js-files directly with https://localhost:port1234/path/like/in/assets/folder Obviously that path doesn't exist on the local dev server as the compiled files are in /build so it fails and the respective js-plugins don't work.

I have no clue were the GET to the files on that path is coming from and why it tries to load them like that at all. Can anyone help?

Hi Everyone

I've come to this part of the tutorial for some help, hopefully. I've recently update a webapp to Symfony v6.1 and all appeared well until I ran yarn watch. Everything was fine in v6.0

I got this error in terminal
Error: Cannot find module '@babel/core'
I ran yarn add @babel/core
Sorted.

Running yarn watch now gives me:
Error: Cannot find module 'webpack/bin/webpack'
Require stack:

• /Users/steve/Sites/symfony/v6/webapps/node_modules/@symfony/webpack-encore/bin/encore.js

And now I'm stuck. Is this related in anyway to you guys now using Stimulus or is it something else i'm missing? I've not got as far as using Stimulus yet.

I've tried removing and re-adding Webpack encore (this did initially remove my package.json file too, not sure if that's a problem)

Thank you

Steve

Just a short question about the javascript embedding. Should it embed at the end oft the html instead of the head areas?

although the site works correctly but they show me these errors in the console

Hello, i have JS error in console,

Uncaught (in promise) TypeError: Cannot destructure property 'eligibleURLPatterns' of 'Jt' as it is undefined companion-bubble.js:1436
at companion-bubble.js:1436:11909
at Generator.next (<anonymous>)
at tn (companion-bubble.js:1436:11431)

Uncaught TypeError: Cannot read properties of null (reading 'style') (index):212
at renderAjaxRequests ((index):212:10065)
at finishAjaxRequest ((index):212:15943)
at (index):212:21834
at xhr.onreadystatechange ((index):212:7896)

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'style') (index):212
at renderAjaxRequests ((index):212:10065)
at finishAjaxRequest ((index):212:15943)
at (index):212:18218

Hello, I feel like there's something I'm doing wrong, but I simply cannot figure out what it is; the background color of the page won't change regardless of what I do, it always stays "lightgrey" and keeps overwriting the custom app.css that I copied earlier from the tutorial folder.
The issue I'm facing specifically is that even when I update assets/styles/app.css to a different color (let's say "maroon"), it stay lightgrey, even though the "maroon" is stated in app.css in the /build directory. According to the developer tools, the file that overwrites the color of <body> stems from webpack///assets/styles/app.css. I also noticed that the console log specified in app.js will never go through either, the console stays empty.
Everything else works as intended, yarn apparently works, but I've had this default lightgrey color there from the very beginning of the whole course and I can't figure out how to rewrite it.