Twig Helpers, entrypoints.json & yarn Scripts

Using Encore in a Virtual Machine

https://symfony.com/doc/mas...

getting an error when compliling

Running webpack ...

ERROR Failed to compile with 1 errors 8:31:03 PM

error in ../../##DEV/covinated/assets/app.js 8:31:03 PM

Module build failed (from ../../##DEV/covinated/node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'C:\##DEV\covinated\node_modules\babel-loader\lib\index.js'
Require stack:
- C:\##DEV\covinated\node_modules\loader-runner\lib\loadLoader.js
- C:\##DEV\covinated\node_modules\loader-runner\lib\LoaderRunner.js
- C:\##DEV\covinated\node_modules\webpack\lib\NormalModule.js
- C:\##DEV\covinated\node_modules\@symfony\webpack-encore\lib\webpack-manifest-plugin\index.js
- C:\##DEV\covinated\node_modules\@symfony\webpack-encore\lib\plugins\manifest.js
- C:\##DEV\covinated\node_modules\@symfony\webpack-encore\lib\config-generator.js
- C:\##DEV\covinated\node_modules\@symfony\webpack-encore\index.js
- C:\##DEV\covinated\webpack.config.js
- C:\##DEV\covinated\node_modules\webpack-cli\lib\webpack-cli.js
- C:\##DEV\covinated\node_modules\webpack-cli\lib\bootstrap.js
- C:\##DEV\covinated\node_modules\webpack-cli\bin\cli.js
- C:\##DEV\covinated\node_modules\webpack\bin\webpack.js
- C:\##DEV\covinated\node_modules\@symfony\webpack-encore\bin\encore.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at loadLoader (C:\##DEV\covinated\node_modules\loader-runner\lib\loadLoader.js:19:17)
at iteratePitchingLoaders (C:\##DEV\covinated\node_modules\loader-runner\lib\LoaderRunner.js:182:2)
at runLoaders (C:\##DEV\covinated\node_modules\loader-runner\lib\LoaderRunner.js:397:2)
at NormalModule._doBuild (C:\##DEV\covinated\node_modules\webpack\lib\NormalModule.js:812:3)
at NormalModule.build (C:\##DEV\covinated\node_modules\webpack\lib\NormalModule.js:956:15)
at C:\##DEV\covinated\node_modules\webpack\lib\Compilation.js:1367:12

Entrypoint app 13.3 KiB = runtime.js 10.7 KiB app.js 2.61 KiB
webpack compiled with 1 error

Hey Frédéric H.!

Hmm, I'm not sure why this would be happening. It's failing because it can't find a vendor file (i.e. a file in node_modules) but that file should be there. Specifically, it seems like it can't find node_modules\babel-loader\lib\index.js.

Try removing your node_modules directory and re-running yarn install to install them fresh... perhaps there was some problem downloading those dependencies. If that doesn't work, try a yarn upgrade in case some old dependency is causing weird issues.

Let me know if any of this helps!

Cheers!

non still the same :( i'm using php 8.0 and the file is indeed there

Hey Frédéric H.!

Hmm. I just downloaded this course code and tried running webpack: I'm not having any problems :/. Did you also try running yarn upgrade? Do you have any custom config for webpack or babel? It's definitely a strange error...

Cheers!

i even tried with a blank project, and not even adding your course.

ok let's try that :)

Hello all. I'm mostly sure this comment should go not to this topic - but you're my last chance :D How could i use a twig macro function recursive for a multilevel dropdown menu? was trying to find some info on google, stackoverflow - and shamefully it was meaningless for me. I have builded a multidimensional array with parents and children that I'm sending to a twig template - but i don't know how to use it well :/ Would appreciate any comments or resources

Hey Andrejus,

Unfortunately, we don't have anything specific about this on SymfonyCasts. But I'll try to give you some tips :) First of all, you should create a template where declare that macro, and then import your macro on another template where you're going to print that menu. I suppose you did that already, and it should work well, because it's simple and we do this in your Twig tutorial. If you're not sure how to import the macro into a template and render it - watch that tutorial first. And then, I believe the trick will be in importing the macro in the same macro file, i.e. in your your template where is your macro definition, you can call this "{% import _self as macros %}" on the first line of the file. And this will give you an ability to call any macro on the same macro definition page via "macro.%yourMacroNameHere%", here's a little example:

{# path-to-your-macro/menu-macro.twig.html #}

{% import _self as macros %}

{% macro renderMenu() %}
    {# Render your menu here... #}

    {% if %yourExpressionThatChecksIfWeNeedToRenderNestedLevel% %}
        {# Render your submenu here, i.e. just call that renderMenu() recursively #}

        {{ macros.renderMenu() }}
    {% endif %}
{% endmacro %}

Well, you have to think about arguments, as you will need to path what you're going to render as an argument, but the general idea is that simple.

I hope this helps!

Cheers!

Hey, sorry for a late response. I managed to google it out - still a big thanks for a response, it will be more than useful for future projects)

Thanks for the great tutorial :)

The encore_entry_link_tags('app') and encore_entry_script_tags('app') functions return empty strings for me. The asset function worked fine before. Im running the code on an nginx docker if this is a reason for this? I don't get any 404 errors or errors in general.

Hey Keryx,

Are you sure you have "app" entry point in your webpack.config.js file? When you run encore "./node_modules/.bin/encore dev --watch" in your terminal, do you see "app.js" and "app.css" files in the output? Are they exist in the public/build/ directory?

Btw, any chance you're trying to render multiple times in the same request? Because it will be rendered only once when you run it the first time, and render empty output for all further times, see this for more info: https://github.com/symfony/...

Cheers!

Thanks so much I thought the multiple rendering wouldn't be the problem in my code. But watching the twig debug data showed me that this was the case. I got a symfony docker environment from a git repository (because I wanted to save setup time ^^° and also want to work with docker later on) . There were some basic examples in it and probably some kind of packages and configurations that caused this. I now set up a completely new symfony 5 project and followed the instructions again and now it works all fine. Also I now no for sure that I don't have any unnecessary packages in my project. Thanks for leading me to my solution :). I guess I tried to save time in the wrong place :D.

Have a wonderful day thanks :)

Hey Keryx,

You're welcome, I'm happy you solved this problem! :)

Cheers!

Hi there! Thanks for these tutorials!
If anybody is using npm (like me) just type "npm run watch"

Regards!

Hey Alex,

Thanks for this tip! ;)

Cheers!

after run" ./node_modules/.bin/encore dev "
I 4 files written to public/build
Entrypoint app [big] = vendors~app.css vendors~app.js app.css app.js

Hey HAMMOUDA,

Great!

Cheers!

but i have problem app.js and app.css 404 not found

how are you importing them in your template?

{{ encore_entry_script_tags('appt') }}

it should be "app" but I believe you have this right on your code

i think my problem in my container nginx

Oh, yes, that may be the problem. Nginx must serve the file if it exists, if not, it should pass the request into the front controller (public/index.php)

Cheers!