Setting up Webpack Encore

...Package sensio/framework-extra-bundle is abandoned, you should avoid using it. Use Symfony instead.
 Generating optimized autoload files
 78 packages you are using are looking for funding.
 Use the `composer fund` command to find out more!
 
 Symfony operations: 1 recipe (e7b2756031f9cac8a16f25d37c761953)
   - Configuring symfony/stimulus-bundle (>=2.13): From github.com/symfony/recipes:main
 Executing script cache:clear [KO] 
  [KO] 
 Script cache:clear returned with error code 255 
 !!  
 !!  Fatal error: Declaration of Symfony\Component\String\Slugger\AsciiSlugger::getLocale() must be compatible with Symfony\Contracts\Translation\LocaleAwareInterface::getLocale(): string in /Users/alphacentauri/Documents/symfony/code-stimulus/start/vendor/symfony/string/Slugger/AsciiSlugger.php on line 93
 !!  PHP Fatal error:  Declaration of Symfony\Component\String\Slugger\AsciiSlugger::getLocale() must be compatible with Symfony\Contracts\Translation\LocaleAwareInterface::getLocale(): string in /Users/alphacentauri/Documents/symfony/code-stimulus/start/vendor/symfony/string/Slugger/AsciiSlugger.php on line 93
 !!  Symfony\Component\ErrorHandler\Error\FatalError {#4148
 !!    #message: "Compile Error: Declaration of Symfony\Component\String\Slugger\AsciiSlugger::getLocale() must be compatible with Symfony\Contracts\Translation\LocaleAwareInterface::getLocale(): string"
 !!    #code: 0
 !!    #file: "./vendor/symfony/string/Slugger/AsciiSlugger.php"
 !!    #line: 93
 !!    -error: array:4 [
 !!      "type" => 64
 !!      "message" => "Declaration of Symfony\Component\String\Slugger\AsciiSlugger::getLocale() must be compatible with Symfony\Contracts\Translation\LocaleAwareInterface::getLocale(): string"
 !!      "file" => "/Users/alphacentauri/Documents/symfony/code-stimulus/start/vendor/symfony/string/Slugger/AsciiSlugger.php"
 !!      "line" => 93
 !!    ]
 !!  }
 !!  
 Script @auto-scripts was called via post-update-cmd 
 Failed to install packages for  ./composer.json.

Hey Hans,

Try to manually remove the cache dir, i.e. run: rm -rf var/cache/ and try again. Btw, if you're trying to use composer.json file from the Vladyslav comment above - you may need to drop your composer.lock file first before installing the dependencies probably, something that is worth trying. Otherwise, you may need to update the dependencies, the current set of dependencies is causing some conflicts.

I hope that helps!

Cheers!

Hey @Vladyslav-Chernyshov

Would it work if you just run composer upgrade before installing the package?

Thanks for sharing your solution. Cheers!

Unfortunately not. Only if you'll replace all "5.2.*" to "5.*". Version 5.4.* needed.

Got it, the version constraint needs to be updated too

Hey Amine,

That makes sense as you can see this course is based on Symfony v5.2. The symfony/stimulus-bundle requires at least Symfony 5.4, so to be able to install it - you need to upgrade your dependencies first. The error message already suggest you a possible solution: re-run that command with --with-all-dependencies, but it still may not be enough, you need to make sure you allow upgrading to Symfony 5.4 in your composer.json file. This upgrade may also require more work from you, but in theory this minor upgrade should not contain any BC breaks.

Cheers!

Hi Victor,

That's true. I can show the site right now, but I still have one error (which I commented directly in the vendor).

• LocaleAwareInterface
  • public function getLocale(); instead of public function getLocale(): string;

Hey Amine,

Glad to hear you got it working! Though it's a bad idea to do any changes in the vendor/ dir. Seems you need to upgrade more packages because their versions mismatch, take a look at the package version where you see that error, and at the interface it implements from for getLocale(), I think you just need to update more packages :)

Cheers!

Hey Mepcuk

Yea, you're right, we don't say anything about git in the README, though, it's quite simple, you only have to run git init on the root of your project and answer the questions. I hope it helps

Cheers!

Thanks a lot, i know... but if this tutorial will watch young developer, it maybe create him a problem. Just all tuto is step by step, there are look missing small step..

Thanks for reply 😉

Yea, I agree. I'm going to talk about it with the team. Thanks for your feedback!

Hey Stuart,

I see you're on Windows, I personally haven't had an experience with Yarn and Node on it, but Windows might be the problem. I wonder if Node / Yarn works in your other projects? Also, I see your Yarn version is v1.22.22, but what version of NodeJS do you have? node --version should show it to you.

Seeing some warnings during the yarn install is OK, and as I see from your output the install command was successfully finished and created the lock file without errors (warnings no count).

So, you need to install deps with the yarn install first, and then run the yarn watch, it still does not work for you? Could you try just yarn dev or yarn build commands? Do you have any errors executing them? Do you see the build dir after them? Probably you have problems on Windows with the listener that watches changes.

Cheers!

Node version is v22.3.0

I am also going to bring by version of PHP down to 7.4 I believe is better for Yarn.

Must be one of few that prefer PC for learning code..

Hey Stuart,

I don't think your PHP version is important to Yarn / Node as those are JS tools anyway. I just upgrade node and yarn locally to the latest:

$ yarn --version
1.22.22
$ node --version
v22.4.0

Then I downloaded the course code, moved to the finish/ directory, and ran next command:

$ composer install
$ yarn install
$ yarn watch

And indeed I see an issue with running yarn watch on this course project code, the error is:

Running webpack ...

node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:130:10)
    at BulkUpdateDecorator.hashFactory (/Users/victor/Downloads/code-stimulus (1)/finish/node_modules/webpack/lib/util/createHash.js:144:18)
    at BulkUpdateDecorator.digest (/Users/victor/Downloads/code-stimulus (1)/finish/node_modules/webpack/lib/util/createHash.js:79:21)
    at NormalModule._initBuildHash (/Users/victor/Downloads/code-stimulus (1)/finish/node_modules/webpack/lib/NormalModule.js:757:53)
    at /Users/victor/Downloads/code-stimulus (1)/finish/node_modules/webpack/lib/NormalModule.js:795:10
    at processResult (/Users/victor/Downloads/code-stimulus (1)/finish/node_modules/webpack/lib/NormalModule.js:605:12)
    at /Users/victor/Downloads/code-stimulus (1)/finish/node_modules/webpack/lib/NormalModule.js:692:5
    at /Users/victor/Downloads/code-stimulus (1)/finish/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/victor/Downloads/code-stimulus (1)/finish/node_modules/loader-runner/lib/LoaderRunner.js:251:18 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

First of all, seems this tutorial works only on legacy Node v16 version, so I downgraded my Node js (actually installed legacy version along with the latest and temporarily switched to the v16, or v16.20.2 to be specified). And then instead of yarn watch you need to run:

NODE_OPTIONS=--openssl-legacy-provider yarn watch

to fix a problem due to a change in the default OpenSSL version used by Node.js starting from version 17. This change can cause issues with Webpack, which relies on certain cryptographic functions.

So this way yarn commands work for me, but I'm on Mac. You can try this on Windows, but if it will not work - you will need to export that NODE_OPTIONS=--openssl-legacy-provider env var somehow in the CLI and then run yarn commands. AI suggests me that this way should work on Windows:

set NODE_OPTIONS=--openssl-legacy-provider
yarn watch

But once again, you would probably need to downgrade your Node version to v16.

I understand that it's not an ideal solution for you but still a valid workaround. We will try to fix this properly for other Node versions, but I don't have any estimations for this. I hope that helps!

Cheers!

Thank you for all your time and assistance. I'll try out your suggestions and let you know.

Much appreciated 👏

Hey @Tac-Tacelosky!

I'm ridiculously excited about not needing this step

There are a few rough edges still (which we talk about in the tutorial), but yea, it's fun :).

In the meantime, is it possible to use both AssetMapper and WebpackEncore in the same project, while migrating to just AssetMapper?

Probably not. Well, it definitely is possible, but I think it will be too easy to "cross wires" both in the code and mentally for this to be worth it. Migrating is both simple but tedious:

A) Most items (everything you actually USE in your JavaScript, so everything except for encore, & other build toolds) in package.json should be added to importmap.php via importmap:require
B) All ./relative imports need to change to ./relative.js
C) CSS needs to be updated to add a link tag to base.html.twig (and anywhere you're importing CSS from inside a JS file needs to be reworked).

... and I think that might be it. I did it on ux.symfony.com and Jolicode did it on a fun app they built - https://github.com/jolicode/qotd/pull/53. The reason I won't typically recommend that people switch (unless they really want to) is that it's a bunch of work that takes you from a functional system to a functional system :P. Not a lot of immediate gain. But if the build system is giving you a headache, then it could totally be worth it.

Cheers!

Hey Chris,

We're sorry for this. Yes, this course should work on PHP 8, you're right. We will take a closer look why it does not work. Could you share a bit more information what exactly was wrong on PHP 8? Did you have any errors in the console?

P.s. thanks for sharing a temporary workaround with others suggesting using PHP 7.4!

Cheers!

No problem. I've just downloaded the project code again. Using the "start" directory.
PHP 8.0.16 - Composer version 2.2.6 2022-02-04 17:00:38 (MacOS 12.2.1, PHP, etc, installed via brew)
`composer install` produces the new "trust" prompt from composer for symfony/flex - I choose 'y'
Composer seems to run just fine. The post-install scripts run (cache:clear, assets:install)

```
~/Downloads/code-stimulus/start
❯ composer require encore
Using version ^1.14 for symfony/webpack-encore-bundle
./composer.json has been updated
Running composer update symfony/webpack-encore-bundle
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
- Locking symfony/webpack-encore-bundle (v1.14.0)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
- Installing symfony/webpack-encore-bundle (v1.14.0): Extracting archive
Generating optimized autoload files
75 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

Run composer recipes at any time to see the status of your Symfony recipes.

Executing script cache:clear [OK]
Executing script assets:install public [OK]
```
No evidence the flex recipes have run. No package.json, the bundles.php has not been modified.

However, running the same steps from PHP 7.4.28 and everything works as expected.

I hope this helps.

Hey Chris N.!

Sorry for the short reply - Victor wanted to continue helping you with this, but he's currently unavailable. But I'm happy to fill in :).

This is *super* weird. I just tried it myself and it works. However, 12 days ago (so 2 days after you posted this), we added the little change to composer.json so that Flex is already trusted (without it needing to ask you). But even without this, I can't imagine what difference PHP 7.4 would make vs PHP 8 for this - that is a mystery.

Cheers!

I agree, super weird. I've not had any other Flex related issues - but then, I don't install a fresh project that often. Maybe just a weird combination of packages and bad timing. Composer, Symfony, etc, have all had updates since I first posted this. If I get change, I'll try it again and will only post if it still fails.
Thanks all. Keep up the great work.

Hey Marco,

First of all, commit all the changes in the project to have a clear repo. Then, upgrade your symfony/webpack-encore-bundle to the latest available version. You can do it with Composer, execute:

$ composer update symfony/webpack-encore-bundle

And make sure you have the latest version installed, currently I see it's v1.12.0.

Then, upgrade its recipe, you can do this with Composer again:

$ composer recipe:install symfony/webpack-encore-bundle --force

And after this use git diff to check the changes, you may want to revert some default code to your custom that you had before, but you want to keep the new changes related to Stimulus. After you validate the changes and sync them together - it should work. Don't forget to run "yarn install" and "yarn watch" after to make sure you pull new Node JS dependencies.

I hope this helps!

Cheers!

I tried this , but after
yarn add bootstrap --dev
get message
<blockquote>error @symfony/webpack-encore@2.1.0: The engine "node" is incompatible with this module. Expected version "^12.13.0 || >=14.0.0". Got "12.5.0"
error Found incompatible module.</blockquote>
My configuration
node v16.16.0, php 8.1.6 npm 8.15.1

How can I solve this better ?

yarn install --ignore-engines enable to run yarn watch, but it not perfect i suppose.

Hey Pawel,

Hm, are you sure you have Node v16 installed? Because the error message says that you have v12.5.0. Please, double check the node version. And it seems like you have to upgrade it to the ^12.13.0 at least as it's said in the error message.

I think you can check it with "node --version" in your terminal.

Another possible solution - try to upgrade dependencies, it might help, but also may cause more issue.

Cheers!

yes, command "node -v" return value v16.16.0

Hey Pawel,

Ah, looks like the error is related to the "engine" key in that package.json of that @ symfony/webpack-encore package, for example see that file https://github.com/symfony/... . So, looks like the package installed in the project requires the node 12.5.0 explicitly, and most probably you either need to downgrade your NodeJS to that version, or upgrade dependencies that may cause some issues but probably might be worth to try, or just use that "--ignore-engines" option when you install Yarn deps - it should be OK for learning purposes when you work around the course project code to follow the tutorial.

I hope this helps!

Cheers!

`Running webpack ...

WARNING Webpack Encore requires version ^4.0.0 || ^5.0.0 of postcss-loader, but your version (3.0.0) is too old. The related feature will probably not work correctly.
WARNING Webpack Encore requires version ^4.0.0 || ^5.0.0 of postcss-loader, but your version (3.0.0) is too old. The related feature will probably not work correctly.
WARNING Webpack Encore requires version ^9.0.1 || ^10.0.0 || ^11.0.0 || ^12.0.0 of sass-loader, but your version (8.0.0) is too old. The related feature will probably not work correctly.
WARNING Webpack Encore requires version ^4.0.0 || ^5.0.0 of postcss-loader, but your version (3.0.0) is too old. The related feature will probably not work correctly.
WARNING Webpack Encore requires version ^9.0.1 || ^10.0.0 || ^11.0.0 || ^12.0.0 of sass-loader, but your version (8.0.0) is too old. The related feature will probably not work correctly.
WARNING Webpack Encore requires version ^4.0.0 || ^5.0.0 of postcss-loader, but your version (3.0.0) is too old. The related feature will probably not work correctly.
WARNING Webpack Encore requires version ^15.9.5 of vue-loader, but your version (15.9.1) is too old. The related feature will probably not work correctly.
RECOMMEND To create a smaller (and CSP-compliant) build, see https://symfony.com/doc/current/frontend/encore/vuejs.html#runtime-compiler-build
[webpack-cli] Error: Compiling RuleSet failed: Properties generator are unknown (at ruleSet[0].rules[0].oneOf[1]: [object Object])

at RuleSetCompiler.error (/Users/prest90/development/DataNet/node_modules/webpack/lib/rules/RuleSetCompiler.js:373:10)
at RuleSetCompiler.compileRule (/Users/prest90/development/DataNet/node_modules/webpack/lib/rules/RuleSetCompiler.js:196:15)
at /Users/prest90/development/DataNet/node_modules/webpack/lib/rules/RuleSetCompiler.js:154:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (/Users/prest90/development/DataNet/node_modules/webpack/lib/rules/RuleSetCompiler.js:153:16)
at RuleSetCompiler.compileRule (/Users/prest90/development/DataNet/node_modules/webpack/lib/rules/RuleSetCompiler.js:192:30)
at /Users/prest90/development/DataNet/node_modules/webpack/lib/rules/RuleSetCompiler.js:154:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (/Users/prest90/development/DataNet/node_modules/webpack/lib/rules/RuleSetCompiler.js:153:16)
at RuleSetCompiler.compileRule (/Users/prest90/development/DataNet/node_modules/webpack/lib/rules/RuleSetCompiler.js:184:30)
at /Users/prest90/development/DataNet/node_modules/webpack/lib/rules/RuleSetCompiler.js:154:9
at Array.map (<anonymous>)
at RuleSetCompiler.compileRules (/Users/prest90/development/DataNet/node_modules/webpack/lib/rules/RuleSetCompiler.js:153:16)
at RuleSetCompiler.compile (/Users/prest90/development/DataNet/node_modules/webpack/lib/rules/RuleSetCompiler.js:68:22)
at VueLoaderPlugin.apply (/Users/prest90/development/DataNet/node_modules/vue-loader/lib/plugin-webpack5.js:45:39)
at createCompiler (/Users/prest90/development/DataNet/node_modules/webpack/lib/webpack.js:74:12)

error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
`

i tried but i get the following errors, unfortunately these packages are needed!

i have updated these packages and everything seems to work, now i have to do some testing.

Thank you very much for helping!

Hi, after updating on some older browsers I get the error ReferenceError: Can't find variable: globalThis. Is there any setting in webpack to solve the problem? Thank you

Hey Marco,

Hm, could you link me to the chapter where we have that "globalThis" variable? I can't find it, probably you made a misprint in yoir code? Try to do "git grep globalThis" to find that spot, or search in files with PhpStorm, it should help too. Most probably you just need to fix that misprint :)

Cheers!

I noticed that after the update
(self.webpackChunk = self.webpackChunk || [])
has become
(globalThis ["webpackChunk"] = globalThis ["webpackChunk"] || [])
could it be something related to Babel?

Hey Marco,

Hm, that file is autogenerated, and so different versions may generate a slightly different code. What exactly it should be - difficult to say, I'd suppose that the code you have in that file is correctly generated by the Webpack. I think you need to find a problem in a different place. First of all, make sure you upgraded your symfony/webpack-encore-bundle which is v1.12.0 for today, you can check it with "composer info symfony/webpack-encore-bundle". Then, sync its recipe in your project. You can do it by leveraging "symfony recipe:installl --force" command or manually, coping the latest changes in the recipe manually into your project from https://github.com/symfony/... . Then, make sure you use the same minimum constraints for the JS dependencies in package.json and install the deps with "yarn install". I'd suggest you to completely remove the node_modules/ directory first and install the fresh deps from scratch just in case. And finally, compile your assets with webpack, usually it's just "yarn watch" but depends on your project.

Also, after recompiling the assets, I'd recommend you to try in Chrome Incognito mode just in case the browser cached some JS files locally.

I hope this helps!

Cheers!

Hi, thanks for the help you are giving me! I have compared the symfony/webpack-encore-bundle files with my project and I can't find any differences. Then I compared the @babel folder in node_modules with a working project and there are differences. I tried to replace this folder with the one of the working project but the yarn watch and yarn build scripts no longer work! Luckily I had made a backup and put everything back in place. Can @babel be updated without breaking everything? Before making updates I would like to know how to make a backup, thank you very much for your patience

Hey Marco,

Hm, are you sure the constraints you have in your packages.json for deps are exactly the same as in the recipe? If you think that Babel version installed in your project is the problem - try to figure out what version is installed on working project, and install the exact same version in your project, you can specify the exact version of Babel in packages.json. I only see this way of solving then

Cheers!

hi Victor,
the problem is that in the package.json file of the two projects there is no babel, only @babel/preset-react is present but in node_modules I have @babel, babel-loader etc ... I think they have been installed as a dependency of some other package.

Cheers!

Hey Marco,

Yes, you're right, most probably that was installed as a dependency of another direct dependency that you have in your packages.json file.

Cheers!

Hi .... I'm going crazy! When I install a package with yarn I get these warnings:

warning "@symfony/webpack-encore> @babel/preset-env> @babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@ 7.14.5" has incorrect peer dependency "@babel/core @^7.13.0 ".`<br />warning "@symfony/webpack-encore> @babel/preset-env> @babel/plugin-proposal-class-static-block @7.14.5" has incorrect peer dependency "@babel/core @^7.12.0".

I think they could be the cause of the problem!
Thank you

Hey Marco P.

Have you tried upgrading and clearing Yarn's cache? those warnings seems odd to me. I'd try deleting the node_modules directory and reinstall it, in case nothing works

Cheers!

Hi,
I deleted the node_modules directory and launched yarn run ... the errors remain. Fortunately, everything still seems to work! The problem is that since I updated webpack-encore-bundle to make Stimulus work, after compiling with yarn build I get all the .js files with the globalThis variable as they were previously generated with self. The application is run by several browsers and not all of them support globalThis. Cheers!

Ohh that makes sense. I think you're missing Babel's polyfill, try installing it in your project https://babeljs.io/docs/en/...

Cheers!

Hi Diego,
actually polifill was not installed, I ran: yarn add @babel/polyfill ...the error remains! I realized that the packages that give the error require a more up-to-date version of @babel/core so I ran yarn add @babel/core. Then I installed the packages that made the compilation fail: yarn add @babel/plugin-syntax-dynamic-import, yarn add @babel/plugin-proposal-class-properties, yarn add @babel/preset-env. There are no more errors !!! ... but the GlobalThis variable remained🙁

It seems like the GlobalThis is not part of Babel's polyfill. I found this library that may help you out, you can give it a try :)
https://www.npmjs.com/packa...

Cheers!

is in several files: runtime.js jsonp chunk loading, line 46 var chunkLoadingGlobal = globalThis ["webpackChunk"] = globalThis ["webpackChunk"] || []; but there are others

Hey Macarena I.

It seems like your Node version it's kind of old, try upgrading it to version 12.13 at least, and give it another shot.

Cheers!