Flag of Ukraine
SymfonyCasts stands united with the people of Ukraine
This tutorial has a new version, check it out!

Webpack Encore: JavaScript Greatness

Video not working?

It looks like your browser may not support the H264 codec. If you're using Linux, try a different browser or try installing the gstreamer0.10-ffmpeg gstreamer0.10-plugins-good packages.

Thanks! This saves us from needing to use Flash or encode videos in multiple formats. And that let's us get back to making more videos :). But as always, please feel free to message us.

Tip

The recipe now adds these 2 files in a slightly different location:

  • assets/app.js
  • assets/styles/app.css

But the purpose of each file is exactly the same.

Okay: here's how this whole thing works. The recipe added a new assets/ directory with a couple of example CSS and JS files. The app.js file basically just console.log()'s something:

15 lines assets/js/app.js
/*
* Welcome to your app's main JavaScript file!
*
* We recommend including the built version of this JavaScript file
* (and its CSS file) in your base layout (base.html.twig).
*/
// any CSS you import will output into a single css file (app.css in this case)
import '../css/app.css';
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
// import $ from 'jquery';
console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

The app.css changes the background color to light gray:

body {
background-color: lightgray;
}

Webpack Encore is entirely configured by one file: webpack.config.js:

var Encore = require('@symfony/webpack-encore');
// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
// directory where compiled assets will be stored
.setOutputPath('public/build/')
// public path used by the web server to access the output path
.setPublicPath('/build')
// only needed for CDN's or sub-directory deploy
//.setManifestKeyPrefix('build/')
/*
* ENTRY CONFIG
*
* Add 1 entry for each "page" of your app
* (including one that's included on every page - e.g. "app")
*
* Each entry will result in one JavaScript file (e.g. app.js)
* and one CSS file (e.g. app.css) if your JavaScript imports CSS.
*/
.addEntry('app', './assets/js/app.js')
//.addEntry('page1', './assets/js/page1.js')
//.addEntry('page2', './assets/js/page2.js')
// When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
.splitEntryChunks()
// will require an extra script tag for runtime.js
// but, you probably want this, unless you're building a single-page app
.enableSingleRuntimeChunk()
/*
* FEATURE CONFIG
*
* Enable & configure other features below. For a full
* list of features, see:
* https://symfony.com/doc/current/frontend.html#adding-more-features
*/
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
// enables hashed filenames (e.g. app.abc123.css)
.enableVersioning(Encore.isProduction())
// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
// enables Sass/SCSS support
//.enableSassLoader()
// uncomment if you use TypeScript
//.enableTypeScriptLoader()
// uncomment to get integrity="..." attributes on your script & link tags
// requires WebpackEncoreBundle 1.4 or higher
//.enableIntegrityHashes(Encore.isProduction())
// uncomment if you're having problems with a jQuery plugin
//.autoProvidejQuery()
// uncomment if you use API Platform Admin (composer req api-admin)
//.enableReactPreset()
//.addEntry('admin', './assets/js/admin.js')
;
module.exports = Encore.getWebpackConfig();

We won't talk much about this file - we'll save that for the Encore tutorial - but it's already configured to point at the app.js and app.css files: it knows that it needs to process them.

Running Encore

To execute Encore, find your terminal and run:

yarn watch

This is a shortcut for running yarn run encore dev --watch. What does this do? It reads those 2 files in assets/, does some processing on them, and outputs a built version of each inside a new public/build/ directory. Here is the "built" app.css file... and the built app.js file. If we ran Encore in production mode - which is just a different command - it would minimize the contents of each file.

Including the Built CSS and JS Files

There's a lot more cool stuff going on, but this is the basic idea: we code in the assets/ directory, but point to the built files in our templates.

For example, in base.html.twig, instead of pointing at the old app.css file, we want to point at the one in the build/ directory. That's simple enough, but the WebpackEncoreBundle has a shortcut to make it even easier: {{ encore_entry_link_tags() }} and pass this app, because that's the name of the source files - called an "entry" in Webpack land.

... line 1
<html>
<head>
... lines 4 - 5
{% block stylesheets %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spartan&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
... lines 13 - 33
</html>

At the bottom, render the script tag with {{ encore_entry_script_tags('app') }}.

... line 1
<html>
... lines 3 - 12
<body>
... lines 14 - 25
{% block javascripts %}
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
{{ encore_entry_script_tags('app') }}
{% endblock %}
</body>
</html>

Let's try it! Move over and refresh. Did it work? It did! The background color is gray... and if I bring up the console, there's the log:

Hello Webpack Encore!

If you look at the HTML source, there's nothing special going on: we have a normal link tag pointing to /build/app.css.

Moving our Code into Encore

Now that this is working, let's move our CSS into the new system. Open public/css/app.css, copy all of this, then right click and delete the file. Now open the new app.css inside assets/ and paste.

127 lines assets/css/app.css
body {
font-family: spartan;
color: #444;
}
.jumbotron-img {
background: rgb(237,116,88);
background: linear-gradient(302deg, rgba(237,116,88,1) 16%, rgba(51,61,81,1) 97%);
color: #fff;
}
.q-container {
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
background-color: #efefee;
}
.q-container-show {
border-top-right-radius: .25rem;
border-top-left-radius: .25rem;
background-color: #ED7458 ;
}
.q-container img, .q-container-show img {
border: 2px solid #fff;
border-radius: 50%;
}
.q-display {
background: #fff;
border-radius: .25rem;
}
.q-title-show {
text-transform: uppercase;
font-size: 1.3rem;
color: #fff;
}
.q-title {
text-transform: uppercase;
color: #444;
}
.q-title:hover {
color: #2B2B2B;
}
.q-title h2 {
font-size: 1.3rem;
}
.q-display-response {
background: #333D51;
color: #fff;
}
.answer-link:hover .magic-wand {
transform: rotate(20deg);
}
.vote-arrows {
font-size: 1.5rem;
}
.vote-arrows span {
font-size: 1rem;
}
.vote-arrows a {
color: #444;
}
.vote-up:hover {
color: #3D9970;
}
.vote-down:hover {
color: #FF4136;
}
.btn-question {
color: #FFFFFF;
background-color: #ED7458;
border-color: #D45B3F;
}
.btn-question:hover,
.btn-question:focus,
.btn-question:active,
.btn-question.active,
.open .dropdown-toggle.btn-question {
color: #FFFFFF;
background-color: #D45B3F;
border-color: #D45B3F;
}
.btn-question:active,
.btn-question.active,
.open .dropdown-toggle.btn-question {
background-image: none;
}
.btn-question.disabled,
.btn-question[disabled],
fieldset[disabled] .btn-question,
.btn-question.disabled:hover,
.btn-question[disabled]:hover,
fieldset[disabled] .btn-question:hover,
.btn-question.disabled:focus,
.btn-question[disabled]:focus,
fieldset[disabled] .btn-question:focus,
.btn-question.disabled:active,
.btn-question[disabled]:active,
fieldset[disabled] .btn-question:active,
.btn-question.disabled.active,
.btn-question[disabled].active,
fieldset[disabled] .btn-question.active {
background-color: #ED7458;
border-color: #D45B3F;
}
.btn-question .badge {
color: #ED7458;
background-color: #FFFFFF;
}
footer {
background-color: #efefee;
}

As soon as I do that, when I refresh... it works! Our CSS is back! The reason is that - if you check your terminal - yarn watch is watching our files for changes. As soon as we modified the app.css file, it re-read that file and dumped a new version into the public/build directory. That's why we keep this running in the background.

Let's do the same thing for our custom JavaScript. Open question_show.js and, instead of having a page-specific JavaScript file - where we only include this on our "show" page - to keep things simple, I'm going to put this into the new app.js, which is loaded on every page.

29 lines assets/js/app.js
... lines 1 - 13
/**
* Simple (ugly) code to handle the comment vote up/down
*/
var $container = $('.js-vote-arrows');
$container.find('a').on('click', function(e) {
e.preventDefault();
var $link = $(e.currentTarget);
$.ajax({
url: '/comments/10/vote/'+$link.data('direction'),
method: 'POST'
}).then(function(data) {
$container.find('.js-vote-total').text(data.votes);
});
});

Then go delete the public/js/ directory entirely... and public/css/. Also open up templates/question/show.html.twig and, at the bottom, remove the old script tag.

{% extends 'base.html.twig' %}
{% block title %}Question: {{ question }}{% endblock %}
{% block body %}
... lines 6 - 57
{% endblock %}

With any luck, Encore already rebuilt my app.js. So if we click to view a question - I'll refresh just to be safe - and... click the vote icons. Yes! This still works.

Installing & Importing Outside Libraries (jQuery)

Now that we're using Encore, there are some really cool things we can do. Here's one: instead of linking to a CDN or downloading jQuery directly into our project and committing it, we can require jQuery and install it into our node_modules/ directory... which is exactly how we're used to doing things in PHP: we install third-party libraries into vendor/ instead of downloading them manually.

To do that, open a new terminal tab and run:

yarn add jquery --dev

This is equivalent to the composer require command: it adds jquery to the package.json file and downloads it into node_modules/. The --dev part is not important.

Next, inside base.html.twig, remove jQuery entirely from the layout.

... line 1
<html>
... lines 3 - 12
<body>
... lines 14 - 25
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
{% endblock %}
</body>
</html>

If you go back to your browser and refresh the page now... it's totally broken:

$ is not defined

...coming from app.js. That makes sense: we did just download jQuery into our node_modules/ directory - you can find a directory here called jquery - but we're not using it yet.

How do we use it? Inside app.js, uncomment this import line: import $ from 'jquery'.

29 lines assets/js/app.js
... lines 1 - 9
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
import $ from 'jquery';
... lines 14 - 29

This "loads" the jquery package we installed and assigns it to a $ variable. All these $ variables below are referencing the value we imported.

Here's the really cool part: without making any other changes, when we refresh, it works! Webpack noticed that we're importing jquery and automatically packaged it inside of the built app.js file. We import the stuff we need, and Webpack takes care of... packaging it all together.

Tip

Actually, Webpack splits the final files into multiple for efficiency. jQuery actually lives inside a different file in public/build/, though that doesn't matter!

Importing the Bootstrap CSS

We can do the same thing for the Bootstrap CSS. On the top of base.html.twig, delete the link tag for Bootstrap:

... line 1
<html>
<head>
... lines 4 - 5
{% block stylesheets %}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spartan&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous" />
{{ encore_entry_link_tags('app') }}
{% endblock %}
</head>
... lines 12 - 28
</html>

No surprise, when we refresh, our site looks terrible.

To fix it, find your terminal and run:

yarn add bootstrap --dev

This downloads the bootstrap package into node_modules/. This package contains both JavaScript and CSS. We want to bring in the CSS.

To do that, open app.css and, at the top, use the good-old-fashioned @import syntax. Inside double quotes, say ~bootstrap:

129 lines assets/css/app.css
@import "~bootstrap";
... lines 3 - 129

In CSS, this ~ is a special way to say that you want to load the CSS from a bootstrap package inside node_modules/.

Move over, refresh and... we are back! Webpack saw this import, grabbed the CSS from the bootstrap package, and included it in the final app.css file. How cool is that?

What Else can Encore Do?

This is just the start of what Webpack Encore can do. It can also minimize your files for production, supports Sass or LESS compiling, comes with React and Vue.js support, has automatic filename versioning and more. To go further, check out our free Webpack Encore tutorial.

And... that's it for this tutorial! Congratulations for sticking with me to the end! You already understand the most important parts of Symfony. In the next tutorial, we're going to unlock even more of your Symfony potential by uncovering the secrets of services. You'll be unstoppable.

As always, if you have questions, problems or have a really funny story - especially if it involves your cat - we would love to hear from you in the comments.

Alright friends - seeya next time!

Leave a comment!

53
Login or Register to join the conversation

hey weaverryan how are things going. it's been a while, happy new year :D

man, i've been trying wp and im getting this controllers.json not found error at every turn.

  btx  main ≢ -2 | +1 ~3    yarn watch
yarn run v1.22.17
$ encore dev --watch
Running webpack ...

ERROR Failed to compile with 1 errors 1:22:00 PM

error in ./node_modules/@symfony/stimulus-bridge/controllers.json 1:22:00 PM

Module build failed (from ./node_modules/@symfony/stimulus-bridge/dist/webpack/loader.js):
Error: Your controllers.json file was not found. Be sure to add a Webpack alias from "@symfony/stimulus-bridge/controllers.json" to *your* controllers.json file.
at createControllersModule (C:\vhosts\btx\node_modules\@symfony\stimulus-bridge\dist\webpack\loader.js:37:15)
at Object.loader (C:\vhosts\btx\node_modules\@symfony\stimulus-bridge\dist\webpack\loader.js:107:43)

Entrypoint app [big] 1.36 MiB = runtime.js 14.5 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-3d222b.css 878 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-3d222b.js 482 KiB app.css 426 bytes app.js 17.9 KiB
webpack compiled with 1 error

1 Reply

ok, I'm just dumb :D

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

did the trick :D

1 Reply

Hi Ryan and Victor.
I would like to know if there a way to expose "symfony environment variables" .env, .env.local ...
In symfony/vue webpack encore app.
Thank you

1 Reply

Hi Moulaye CISSE!

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/packa... - 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!

1 Reply

Thank you alot

I will make I try and let you know.

Good week, cheers!

Reply
Default user avatar
Default user avatar Fernando Gómez Gil | posted 2 years ago

At the moment I deleted the code in the file show.html.twig of the old javascript, doesn't work Voting Up and Down don't work. I don't know how to solve it.
Also, I didn't give to much importance but when in the previous video you did the checking the console was not appearing the text to me.

1 Reply

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!

Reply
Default user avatar
Default user avatar Fernando Gómez Gil | victor | posted 2 years ago

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

Reply

Hey Fernando,

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

Cheers!

Reply

Hey there,

I completed this course, but it still shows as 98% complete. For some reasons it looks like the last challenge won't register. Can you please look into it?

Cheers!

Reply

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!

Reply
Juanma C. Avatar
Juanma C. Avatar Juanma C. | posted 7 months ago

Hi there!!! I have followed your steps and reached this point, where I install the encore webpack with node and yarm installed. I also downloaded jquery and when I proceed to uncomment the import $ from 'jquery' line in the app.js file, it just doesn't show up and gives me undefined $. Greetings and thank you

Reply
Juanma C. Avatar

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

Reply
Juanma C. Avatar

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

1 Reply

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

Reply
Paskuale Avatar

commented line -> import $ from 'jquery'; missed, it's a version issue ?

Reply

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!

Reply
Paskuale Avatar

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

Reply

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!

Reply
Paskuale Avatar

ok, I'll try it, thanks

Reply
Elchanan B. Avatar
Elchanan B. Avatar Elchanan B. | posted 1 year ago

Hello,
Now, at this course's end, can you please suggest ideas for "do it yourself" project to do before continuing to the next course? (or it will be better if I'll wait after the next course? after gaining some more knowledge about symfony?)

Reply

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!

1 Reply
Elchanan B. Avatar
Elchanan B. Avatar Elchanan B. | posted 1 year ago

Hey,
Why were the jQuery and bootstrap packages installed with --dev? is that because webpack build the prod parts so they aren't really necessary in production? did I get it right 😬?

Reply

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!

1 Reply
Jakub Avatar

After i downloaded jquery and added that line
import $ from 'jquery';
to the app.js it still doesnt work. Console says
Uncaught ReferenceError: $ is not defined
so it looks like that import doesnt work. I checked and there is downloaded jquery module. I tried to check it on incognito page and still same. Any ideas?

Edit. i checked that also bootstrap looks like doesnt work so maybe it may help

Reply

Hey HudyWeas

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!

Reply
Jakub Avatar

Diego Aguiar 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

Reply

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

Reply
Arthur B. Avatar
Arthur B. Avatar Arthur B. | posted 1 year ago

Hi, I follow the instruction but neither the node_modules or the build folder appear on sublime text but the terminal tell me that they are created.
But only the background change to grey and the console did not put the message, I don't know what to do

Here is my terminal :

➜ cauldron_overflow git:(master) ✗ composer require encore
Using version ^1.11 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
Nothing to modify in lock file
Installing dependencies from lock file (including require-dev)
Nothing to install, update or remove
Generating optimized autoload files
42 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]

Nothing to unpack
➜ cauldron_overflow git:(master) ✗ yarn install
yarn install v1.22.10
[1/4] 🔍 Resolving packages...
success Already up-to-date.
✨ Done in 0.34s.
➜ cauldron_overflow git:(master) ✗ yarn watch
yarn run v1.22.10
$ encore dev --watch
Running webpack ...

DONE Compiled successfully in 976ms 6:43:25 PM

5 files written to public/build
Entrypoint app [big] 543 KiB = runtime.js 14.1 KiB vendors-node_modules_symfony_stimulus-bridge_dist_index_js-node_modules_core-js_modules_es_ob-7db861.js 510 KiB app.css 390 bytes app.js 18.5 KiB
webpack compiled successfully
Reply

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!

Reply
Farshad Avatar
Farshad Avatar Farshad | posted 1 year ago

When I run 'yarn watch' it says: error Command "watch" not found.

Reply

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!

Reply
Farshad Avatar

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

Reply

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!

Reply
Tanguy D. Avatar
Tanguy D. Avatar Tanguy D. | posted 2 years ago

Hey guys, as soon as I try to add images via app.css, i've got this error

ERROR Failed to compile with 1 errors

error in ./assets/css/app.css

Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve

Reply

Hey TanguyD!

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!

Reply
Peter D. Avatar
Peter D. Avatar Peter D. | posted 2 years ago

I'm trying to use a bootstrap theme in my Symfony project. I have imported the CSS and JS files from the theme but when I run encore I get the following error:

$ yarn run encore dev
yarn run v1.22.4
$ /Users/shaunthornburgh/Development/devfeed/node_modules/.bin/encore dev
Running webpack ...

ERROR Failed to compile with 7 errors 12:04:22

These dependencies were not found:

* core-js/modules/es.array.filter in ./assets/js/theme.min.js
* core-js/modules/es.array.for-each in ./assets/js/dashkit.min.js
* core-js/modules/es.array.map in ./assets/js/theme.min.js
* core-js/modules/es.array.slice in ./assets/js/theme.min.js
* core-js/modules/es.object.assign in ./assets/js/theme.min.js
* core-js/modules/es.parse-int in ./assets/js/theme.min.js
* core-js/modules/web.dom-collections.for-each in ./assets/js/theme.min.js

To install them, you can run: npm install --save core-js/modules/es.array.filter core-js/modules/es.array.for-each core-js/modules/es.array.map core-js/modules/es.array.slice core-js/modules/es.object.assign core-js/modules/es.parse-int core-js/modules/web.dom-collections.for-each
Entrypoint js/app [big] = runtime.js vendors~js/app.js js/app.js
Entrypoint css/app [big] = runtime.js vendors~css/app.css vendors~css/app.js css/app.css
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I am confused as core-js seems to be included in my webpack.config.js file


var Encore = require('@symfony/webpack-encore');

if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('js/app', [
'./node_modules/jquery/dist/jquery.slim.js',
'./node_modules/popper.js/dist/popper.min.js',
'./node_modules/bootstrap/dist/js/bootstrap.min.js',
'./node_modules/holderjs/holder.min.js',
'./assets/js/dashkit.min.js',
'./assets/js/theme.min.js'
])
.addStyleEntry('css/app', [
'./node_modules/bootstrap/dist/css/bootstrap.min.css',
'./assets/css/theme.min.css'
])
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())

// enables @babel/preset-env polyfills
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
;

module.exports = Encore.getWebpackConfig();
Reply

Hey Peter Dickins !

Hmm, it could be one simply thing. You *do* have that corejs stuff in webpack.config.js, but you also need to make sure it's installed. Try running: yarn add core-js.

That might be all you need. Let me know :).

Cheers!

Reply
Default user avatar
Default user avatar Jose Camacho | posted 2 years ago

Hey! I followed this course and everything was great until uncomment jQuery import. As soon I did that, a console error was showed up "Uncaught SyntaxError: Cannot use import statement outside a module" any cue?

Reply
Default user avatar

nvm! I was using the built file instead the assets/

Reply
Default user avatar

Hi, I followed all the tutorial and it was great. Just a question... When you created the file "question_show.js" and only imported it in "show.html.twig" I assumed it was to reduce space usage or something related to component re-utilization like every framework. But now, that you moved that script to "app.js" file, it will be imported in every file. Is this right?

Reply

Hey Martin!

Really happy you enjoyed the tutorial. And you noticed an excellent thing! Yes, when I originally created question_show.js, the idea was "Hey! This is JavaScript that's only needed on the question show page. So, instead of putting that into a JavaScript file that will be included on every page - and thus making people download that extra code even if they never go to the question show page - let's put it in its own file". So, indeed, the idea is (a) organization but also (b) not making users download JavaScript they won't need. This isn't something you should go crazy trying to optimize, but this is why I did it.

So, when I refactored to Encore, why did I suddenly put it in app.js? Because, you are 100% correct: a user that goes to *any* page will now download this code. The reason was just simplicity :). Encore has a concept of "multiple entries", which allow you to have page-specific code. For example, I would have an "app" entry (we do have this) that includes "global" JavaScript that I want on every page. The app.js file would be included on every page (i.e. in the layout). Then I would create a "question_show" entry, put the question show JavaScript there, and only include the question_show.js script tag on that ONE PAGE. That would be a more optimal solution - I just skipped it here because i didn't want to get too deep into Encore.

Cheers!

1 Reply

Hi, the moment I put my js in the assets/js directory my css doesn't get loaded anymore

IIRC this has something to do with the trans piling of webpack. So you have to link your css in your js file

Reply

Hey Pleaseenteryourname

You can require CSS files in your JS scripts and let Webpack handle it. Webpack will build a CSS and a JS file, you need to include both in your HTML template so everything works as expected.

Cheers!

Reply
Mickaël M. Avatar
Mickaël M. Avatar Mickaël M. | posted 2 years ago

I followed all the tutorial but when I do yarn run dev, only my CSS is load. My jquery isn't load and I have still the console.log despite I delete it. I don't know what happened

Reply

Hey Micka Bup

Are you running in the dev environment?
What happens if you hard refresh your browser?

Reply
Mickaël M. Avatar

Hi @Diego Aguiar

Honnestly, I stopped for a few moment trying to understand why it didn't work and I started to play Civilization. After my game, I came back on my project and... everything work ! I did nothing and I don't know why now it work. By the way thanks for your response ;)

Reply

Aha! Playing Civilization was the key! You know now what to do next time you get a weird problem :D

Reply
Luis M. Avatar
Luis M. Avatar Luis M. | posted 2 years ago

When adding jquery via yarn, you said that the "--dev" part was not important. So why did you put it there then? :D

Reply
Cat in space

"Houston: no signs of life"
Start the conversation!

This tutorial also works great for Symfony 6!

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.3.0 || ^8.0.0",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "easycorp/easy-log-handler": "^1.0.7", // v1.0.9
        "sensio/framework-extra-bundle": "^6.0", // v6.2.1
        "symfony/asset": "5.0.*", // v5.0.11
        "symfony/console": "5.0.*", // v5.0.11
        "symfony/debug-bundle": "5.0.*", // v5.0.11
        "symfony/dotenv": "5.0.*", // v5.0.11
        "symfony/flex": "^1.3.1", // v1.17.5
        "symfony/framework-bundle": "5.0.*", // v5.0.11
        "symfony/monolog-bundle": "^3.0", // v3.5.0
        "symfony/profiler-pack": "*", // v1.0.5
        "symfony/routing": "5.1.*", // v5.1.11
        "symfony/twig-pack": "^1.0", // v1.0.1
        "symfony/var-dumper": "5.0.*", // v5.0.11
        "symfony/webpack-encore-bundle": "^1.7", // v1.8.0
        "symfony/yaml": "5.0.*" // v5.0.11
    },
    "require-dev": {
        "symfony/profiler-pack": "^1.0" // v1.0.5
    }
}