Webpack Encore: JavaScript Greatness

ok, I'm just dumb :D

.enableStimulusBridge('./assets/controllers.json');

did the trick :D

Hi Moulaye!

Excellent question! Yes and no :). Let me explain:

1) Node makes it very easy to read environment variables - it's process.env.foo if you want to read the foo environment variable.

2) The .env files are a standard format. I've never tried it, but you should be able to install this package - https://www.npmjs.com/package/dotenv - and use it to load the .env (and .env.local if you want) files at the top of webpack.config.js. Then, you can access them like I mentioned in (1).

Let me know if that helps!

Cheers!

Thank you alot

I will make I try and let you know.

Good week, cheers!

Hey Fernando,

Sometimes if you make any changes to the JS file but don't see any changes in the browser - it might be browser cache. To exclude it, try to open the same page in Chrome Incognito mode for example. If you still don't see changes - most probably it's the problem in your code - you would need to double check it. First of all, make sure you ran the webpack encore with "--watch" mode, otherwise you would need to re-run encore again to recompile all your assets after any change you made. Also, if you have any errors - Chrome Dev Tools should show it, find "Console" tab there, reload the page and watch for any errors.

Those were a few tips that should help you to find some problems in your project. Usually, it's enough to find some obvious problems you missed. If you still have some problems - you would need to debug your code more carefully to find what exactly is missing.

Cheers!

Found I did a mistake

I copy paste twice
{{ encore_entry_link_tags('app') }}

Instead
{{ encore_entry_script_tags('app') }}
for the script.
Thank you

Hey Fernando,

Great, I'm glad you found it! It was easy to miss, and the most obvious problems are usually hardest.

Cheers!

Hey @Easwaran_Chinraj

I'm not sure why the "$" variable is not being defined anymore but try using jQuery (or jquery) instead of $

Cheers!

Dear MolloKhan,

Thank you for your suggestion. I appreciate your effort to assist me. Unfortunately, I still encountered the same "not defined" JavaScript error after attempting to use jquery or jQuery instead of $.

On a positive note, I successfully found an alternate solution using the vanilla JavaScript approach:

'parseInt(document.querySelectorAll(".js-vote-total")[2].textContent, 10) > %d'

This approach effectively resolved the issue for me.

To further verify this solution, I increased the wait time from 5 seconds to 30 seconds and changed the JavaScript condition from > to <. As expected, the condition did not pass, and the script waited for 30 seconds before proceeding.

Going forward, I'll leverage vanilla JavaScript for writing wait conditions in Behat tests and reserve jQuery for performing those events.

Thank you again for your time and assistance.

Cheers,

Easwaran Chinraj

I'm glad you could solve your problem, and yes, using vanilla JS in your tests will make them more reliable

Cheers!

Hey Szymon,

Well, that's unexpected. Can you double-check that your Encore build was successful? Also, check the web debug console, you may have got an error.
Oh, and sometimes it's recommended to do a hard-refresh in your Browser just to be 100% sure that it's loading the new assets

Cheers!

Hello again,
Probably I found solution.
Yarn created folder assets with app.js, bootstrap.js files, and additional directories: styles>app.css and controllers>hello_controller.js

In asset>app.js bootstrap is imported separetly

// start the Stimulus application
import './bootstrap';

same as styles

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';

I deleted lines above (I was suggesting that I have something different than in the tutorial - probably I have newer version of Yarn) and also created folders same like in video (separated js folder and css) so that caused problems.
I used "git stash" and revert changes, make all chapter 17 i 18 from beginning and now all working properly :)

Hey Szymon,

I'm glad to know that you could fix your problem. You're almost right, you got a newer version of a library, but it was not Yarn, it was Webpack Encore, the new recipe version adds those two files.
Oh, by the way, we have a note add the top of the script mentioning it :)

Cheers!

Hello MolloKhan,
Yes Encore was build successful. I tried on different browser and problem is the same. I see in page source that css is not loaded. I don't know why. Have you some ideas?

Hey Jimmy!

We're sad to hear this course was too difficult for you! Feel free to ask questions in the comments below the video if you didn't get the topic we're explaining in the video or get suck somewhere following the course - our support will help :)

Also, did you watch this course from the beginning? Or did you watch the videos selectively? In your account I don't even see you either started this course or finished it, did you leave it? We definitely would like to have more feedback about what exactly you didn't understand or where you got stuck.

Cheers!

Hey Victor,

thanks for your reply. i've started from the very beginning on another account until i got my own one. I think the explanations are a bit too quick. I need to pause too many times. And sometimes a bit less explanation would be better. If not necessary why do i need to know then. I will definitely finish it and hopefully will understand more in the end.

Cheers!

Hey Jimmy,

Ah, I see now... Yeah, the explanation might be a bit fast for you, especially if you're not a native English speaker... but mostly this should not be a problem because as you said you can pause the video whenever you want as also re-watch the video as many times as you want too. Also, a little known fact, that you can configure the playback speed for the video player, like play the video on 0.75x or 0.5x speed - it might help too. But the reason behind the video is quick is that we don't want to stretch it... our way of recording a bit different than some youtube live streams when you see a lot of pauses and videos for 1 topic might take hours, but still we are trying to make the video understandable for most people. I hope it sounds reasonable to you :)

Yeah, give it another try! The webpack encore tool is awesome, and webpack is really feature-rich - that's why we showed only part of all available features in it, i.e. only those we think are most important and valuable for most users. But webpack abilities are even bigger. Sometimes, to save some time in the tutorial, we just mention that there are other cool features exist but we won't cover them in the current course. And if some users are interested in those features - they will be able to read the docs and know more about it, we want to make them aware of those other feature at least.

And if you get lost of get stuck in the middle of the course - feel free to ask questions in the comments section below the video and we will try to help ;)

Cheers!

Hey Julien,

Most probably our system things that you have not finished some chapters. Please, go to the course intro page: https://symfonycasts.com/sc... - and make sure you have "check" icon near every chapter. If any chapter does not have that check icon - please, watch it again till the end. Also, make sure you have all challenges completed and they are green.

If you still have this issue and can't figure out what chapter you missed - write to us via the contact form https://symfonycasts.com/co... and we will help you, we need to know your email address to be able to look at it :)

Cheers!

I have also added bootstrap and I have put it as you have explained and it does not detect it. It puts bootstrap not found and $ not defined. I don't know what could happen, well I have the latest version of Symfony, that may be the problem. All the best

Hello again!! I already fixed the error. It is that I had misunderstood the concept of the webpack and did not add what is necessary in the css and js files within the assets directory. Another note is that the import $ from jquery line that you uncommented in the video did not come in my file and you have to add it directly. But all fixed. I just need more practice to get the hang of it, because Symfony and all its plugins look easier and more powerful. Thank you very much and congratulations for this very good tutorial, at least for me. All the best

Thanks for your kind words, I'm glad to know you could fix your problem.
Cheers!

Hey Hey Pasquale,

If you're talking about this code block: https://symfonycasts.com/sc... - it's not an issue, because first of all that jQuery import line is commented out by default from Symfony recipe. And if you will follow this chapter further, we uncomment that line in https://symfonycasts.com/sc... after we installed jQuery as a Yarn dependency in our project.

Cheers!

Hi victor may be the reason that i added jquery without the --dev option ?

Hey Pasquale,

Wait, do you mean we display incorrect code in our code block or do you have some problems with importing jQuery? I just can't "link" your first comment with this one. Could you explain your problem better?

But answering to your question, it does not matter if you add that --dev option or no when we're talking about Webpack, it will compile the result assets into public/build/ directory. If you have some issues with jQuery import - probably restart your Webpack server and try in Chore Incognito mode just in case of any browser cache.

Cheers!

ok, I'll try it, thanks

Hey there!

That's a good question. I'd recommend you to watch next our Stimulus tutorial https://symfonycasts.com/sc...
and if you want to reinforce your knowledge, just create a new project and add a few pages to it. It could be a product's gallery site where you can see all the products, select one to see more information, etc.

Cheers!

Hey there!

Haha, that's a tricky question that we hear often :) But the answer is simple! You literally don't use all those dependencies on production (not only jQuery and bootstrap, but also other deps that you're passing through the Webpack Encore). Why? Because everything you're passing through the Webpack Encore compiles into build/ dir, i.e. as soon as you compiled your assets - you can literally remove the node_modules/ directory and it will still work. In other words, technically, you only need all those deps to generate the compiled version of them. That's why we can consider those deps as dev deps only, we're not using them directly on production, we use their compiled version from builds/.

But, it does not matter too much, you can put it wherever you want in your packages.json file, either in dev or prod section, it will still work :) So, don't think too much on it :)

I hope it's clearer for you now!

Cheers!

Hey Jakub

Where did you get that error, in a different file than app.js? Remember that the scope of the import variables it's on the file only. What you require on file A.js won't be accesible on file B.js

Cheers!

MolloKhan had same problem like guy below. Everything was fine. Incognito mode didnt work or anything. I just ended for yesterday and started watching new series. Today it works fine. Webs are weird sometimes

Ha! Yes, indeed. Usually, when I get into a problem like that one I clear the cache and force a full page refresh. Cheers!

Hey Arthur,

Hm, from your output I see that "5 files written to public/build" directory, don't you see them? Could you run "ls -la public/build" in the project root directory? Do you see any output? The same for node_modules/ dir, try to run "ls -la node_modules" in your terminal while you're in project root dir - it should list the folders in your node_modules/ dir. So, as far as you can see them in terminal - great! What about Sublime - I'm not sure, probably try to close the project and open again so it re-index the new files. Or, I'd better recommend you to open the project in PhpStorm that we're using in this course.

Anyway, as far as those files exist - you should be able to run the project successfully. Those files are autogenerated, so you should not care about them too much, i.e. you don't need to view or open them in your editor, they just should exist. Just try to run the project in your browser - if no errors - then perfect, now you can start coding :)

I hope this helps!

Cheers!

Hey Farry,

You're missing this section on your package.json file

// package.json
{
  ...
  "scripts": {
    ...
    "watch": "encore dev --watch"
  }
}

Give it a try and let me know if it worked. Cheers!

Ive added your code. It says install webpack notifier. When I try to instal it, it says package.json: No licence field.

Hey @Farry7!

That error - "No license field" - should just be a "warning" - it's trying to encourage you to add a license field to your package.json file. But it shouldn't be required - and the webpack notifier library should have installed normally. So, did webpack notifier actually install (and this was just a warning)? Or did it cause an actual error and not install?

EDIT: I realized I was replying to your comments out of order - apologies! I'm happy you got things working!

Cheers!

Hey Tanguy D.!

Hmm. So I'm pretty sure I know what this is communicating. When you add a image (e.g. background-image) in app.css, Webpack parses that image path. It actually parses it like a JavaScript import/require internally. I'm telling you that because, if your path to the image isn't *just* right, the error you'll get is this one: "Module not found". The module in this case is actually the image file!

What does your CSS code look like and where is your image relative to your CSS file? Double-check the path. It could be something more subtle or deeper, but the first thing to check is that the path to the image is correct - it should be a relative path from the source CSS file to the source image file (e.g. don't worry about where the image and CSS file will eventually be moved to).

Cheers!