Importing External Libraries & Global Variables

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.

We already added the app entry files to our base layout: the <script> tag and the <link> tag both live here:

<!doctype html>
<html lang="en">
<head>
... lines 5 - 8
{% block stylesheets %}
{{ encore_entry_link_tags('app') }}
... lines 11 - 14
{% endblock %}
</head>
<body>
... lines 19 - 90
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
... lines 93 - 105
{% endblock %}
</body>
</html>

This means that any time we have some CSS or JavaScript that should be included on every page, we can put it in app.js.

Look down at the bottom:

<!doctype html>
<html lang="en">
... lines 3 - 17
<body>
... lines 19 - 90
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script>
$('.dropdown-toggle').dropdown();
$('.custom-file-input').on('change', function(event) {
var inputFile = event.currentTarget;
$(inputFile).parent()
.find('.custom-file-label')
.html(inputFile.files[0].name);
});
</script>
{% endblock %}
</body>
</html>

Ah... we have a few script tags for external files and some inline JavaScript. Shame on me! Let's refactor all of this into our new Encore-powered system.

The first thing we include is jQuery... which makes sense because we're using it below. Great! Get rid of it. Not surprisingly... this gives us a nice, big error:

$ is not defined

Installing a Library (jQuery)

No worries! One of the most wondrous things about modern JavaScript is that we can install third-party libraries properly. I mean, with a package manager. Find your terminal and run:

yarn add jquery --dev

The --dev part isn't important. Technically we only need these files during the "build" process... they don't need to be included on production... which is why the --dev makes sense. But in 99% of the cases, it doesn't matter. We'll talk about production builds and deploying at the end of the tutorial.

And... that was painless! We now have jQuery in our app.

Importing a Third-Party Library

We already know how to import a file that lives in a directory next to us. To import a third party library, we can say import $ from, and then the name of the package: jquery:

15 lines assets/js/app.js
... lines 1 - 7
// any CSS you require will output into a single css file (app.css in this case)
import '../css/app.css';
import $ from 'jquery';
... lines 12 - 15

The critical thing is that there is no . or ./ at the start. If the path starts with a ., Webpack knows to look for that file relative to this one. If there is no ., it knows to look for it inside the node_modules/ directory.

Check it out: open node_modules/ and ... there's it is! A jquery directory! But how does it know exactly which file in here to import? I'm so glad you asked! Open jQuery's package.json file. Every JavaScript package you install... unless it's seriously ancient, will have a main key that tells Webpack exactly which file it should import. We just say import 'jquery', but it really imports this specific file.

Global Variables inside Webpack

Cool! We've imported jQuery in app.js and set it to a $ variable. And because that <script> tag is included above our inline code in base.html.twig:

<!doctype html>
<html lang="en">
... lines 3 - 17
<body>
... lines 19 - 90
{% block javascripts %}
{{ encore_entry_script_tags('app') }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script>
$('.dropdown-toggle').dropdown();
$('.custom-file-input').on('change', function(event) {
var inputFile = event.currentTarget;
$(inputFile).parent()
.find('.custom-file-label')
.html(inputFile.files[0].name);
});
</script>
{% endblock %}
</body>
</html>

The $ variable should be available down here, right?

Nope! $ is still not defined! Wait, the second error is more clear. Yep, $ is not defined, coming from our code in base.html.twig.

This uncovers a super important detail. When you import a file from a 3rd party library, that file behaves differently than if you add a <script> tag on your page that points to the exact same file! Yea!

That's because a well-written library will contain code that detects how it's being used and then changes its behavior.

Check it out: open jquery.js. It's not super easy to read, but look at this: if typeof module.exports === "object". That's key. This is jQuery detecting if it's being used from within an environment like Webpack. If it is, it exports the jQuery object in the same way that we're exporting a function from the get_nice_message.js file:

export default function(exclamationCount) {
... line 2
};

But if we are not in a module-friendly environment like Webpack... specifically, if jQuery is being loaded via a script tag in our browser, it's not too obvious, but this code is creating a global variable.

So, if jQuery is in a script tag, we get a global $ variable. But if you import it like we're doing here:

15 lines assets/js/app.js
... lines 1 - 10
import $ from 'jquery';
... lines 12 - 15

It does not create a global variable. It returns the jQuery object, which is then set on this local variable. Also, all modules... or "files", in Webpack live in "isolation": if you set a variable in one file, it won't be available in any other file, regardless of what order they're loaded.

That is probably the biggest thing to re-learn in Webpack. Global variables are dead. That's awesome. But it also changes everything.

Forcing a Global jQuery Variable

The ultimate solution is to refactor all of your code from your templates and un-Webpack-ified JavaScript files into Encore. But... if you're upgrading an existing site, phew! You probably have a ton of JavaScript that expects there to be global $ or jQuery variables. Moving all of that into Encore all at once... it's, uh... not very realistic.

So, if you really want a global variable, you can add one with global.$ = $:

16 lines assets/js/app.js
... lines 1 - 10
import $ from 'jquery';
global.$ = $;
... lines 13 - 16

That global keyword is special to Webpack. Try it now: refresh! It works!

But... don't do this unless you have to. I'll remove it and add some comments to explain that this is useful for legacy code:

17 lines assets/js/app.js
... lines 1 - 10
import $ from 'jquery';
// uncomment if you have legacy code that needs global variables
//global.$ = $;
... lines 14 - 17

Let's properly finish this next by refactoring all our code into app.js, which will include installing two more libraries and our first jQuery plugin... It turns out that jQuery plugins are a special beast.

Leave a comment!

  • 2020-08-06 weaverryan

    Hey fd6130!

    Hmm. Is this when you run yarn add jquery or just when you run yarn install? Are you using the "start" code in the project?

    The interesting thing is that the package - @xtuc/long DOES exist... and version 4.2.2 exists - https://www.npmjs.com/packa... - so the error doesn't make sense. From some quick searching, I've seen a few users that needed to their .npmrc file - https://github.com/facebook... - which is an npm config file that can live in a few places - https://docs.npmjs.com/conf...

    That is a *total* guess though - something is somehow wrong with the communication to the npm registry... or with yarn... or something else. Sorry I can't be more helpful!

    Cheers!

  • 2020-08-06 fd6130

    When i try to yarn install it give me the following error:

    error Couldn't find package "@xtuc/long@4.2.2" required by "@webassemblyjs/wast-parser@1.9.0" on the "npm" registry.
    info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
    /code>

  • 2020-03-23 Victor Bocharsky

    Hey Kevin,

    Try to completely remove node_modules/ directory, install it again with yarn install, and try again. If the problem is still persist - please, give us a bit more context about what exactly you're trying to do when you see this error :)

    Cheers!

  • 2020-03-20 Kevin Sossou

    I have this error :
    Cannot find module 'jquery'
    But jquery folder exists in node_modules.
    What can I do about this?
    Thanks !

  • 2019-07-17 Victor Bocharsky

    Hey Bertin,

    Yeah, it might be confusing some times... but really, don't think too much about it, because it's not really important. And yes, you totally can put all your node deps into the "dependencies" section and it will be totally ok. However, let me try to explain the point of you behind of this. First of all, Webpack Encore just build all the files you need on production, and after you got all the files in the public/build/ directory generated by Encore you can forget about package.json at all. Well, this mean that you can totally remove your node_modules/ folder along with the package.json file, because you don't care, you don't need it. Everything, really *everything* you need on production was put into that public/build/ directory. This means that you do NOT use Node packages on production at all. And if so - all your dependencies in package.json are just dev dependencies and therefore should be in devDependencies section. The exception is when you do really use a Node library on production, like calling a Node script via PHP process for do something - in this case, that library should be in "dependencies" section, agree.

    So, to recap, as long as you use only Webpack Encore that builds all the assets for you, you even don't need a NodeJS installed on your production server. You can totally build the assets locally, in your *dev* environment, then commit them to the repo and then use it on production even without having node_modules/ and package.json there. That's it. And actually that's exactly what devs are doing in Symfony Demo: https://github.com/symfony/... - when someone changes assets, then assets are rebuild with Webpack Encore and commit directly to the repo. And this allows other devs running Symfony Demo application without even having NodeJS on his laptops because assets are already built and committed to the repository

    I hope this helps to understand ;)

    Cheers!

  • 2019-07-08 Bertin van den Ham

    Hi!.
    Still not getting the --dev part. It will add the package to devDependencies. I though this was used for dev only (something like composer require-dev).

    Like said in the video the --dev isn't important, technically only need these files during the "build process" and don't need to be included on production.
    Is build process not the same as production?

    Could you explain further?

  • 2019-05-20 Alex Beis

    Hi @Diego Aguilar, Yes!! Just checked right now! Thanks for your reply :)

  • 2019-05-20 Diego Aguiar

    Hey Alex Beis

    That file is generated because splitEntryChunks() feature is enabled, what it basically does is to split your assets into smaller files based on algorithm. You can learn more about it in this chapter: https://symfonycasts.com/sc...

    Cheers!

  • 2019-05-20 Victor Bocharsky

    Hey Giacomo,

    Could you explain a bit more what exactly you're doing when see this error? Because "import" syntax works only on server side. But if you try to do this import on client side, i.e. just point to this source file (without processing it with Webpack) in your HTML - it will fail.

    Cheers!

  • 2019-05-19 Alex Beis

    Hi! Importing jQuery, generates me another file called: vendor~app.js . Why this? I have seen thats it's jQuery inside and not inside app.js.. Should I remove it to follow next videos? Thanks!

  • 2019-05-17 Giacomo Balloccu

    import $ from 'jquery' doesn't work for me i get the error while compiling:
    import $ from 'jquery';
    ^

    SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at NativeCompileCache._moduleCompile (C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\v8-compile-cache\v8-compile-cache.js:240:18)
    at Module._compile (C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\v8-compile-cache\v8-compile-cache.js:186:36)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\webpack-cli\bin\utils\convert-argv.js:115:13)
    at requireConfig (C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\webpack-cli\bin\utils\convert-argv.js:117:6)
    at C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\webpack-cli\bin\utils\convert-argv.js:124:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\webpack-cli\bin\utils\convert-argv.js:122:15)
    at yargs.parse (C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\webpack-cli\bin\cli.js:71:45)
    at Object.parse (C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\yargs\yargs.js:567:18)
    at C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\webpack-cli\bin\cli.js:375:3)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
    at Function.Module._load (internal/modules/cjs/loader.js:531:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (C:\Users\Giaco\Desktop\TribunaleMinori\TribunaleMinori\node_modules\webpack\bin\webpack.js:156:2)
    at Module._compile (internal/modules/cjs/loader.js:701:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
    at Module.load (internal/modules/cjs/loader.js:600:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:539:12)

  • 2019-05-13 Victor Bocharsky

    Hey Krzysztof,

    Thanks for updating on it, good to know it works :)

    Cheers!

  • 2019-05-11 Krzysztof Krakowiak

    seems that IE11 still cannot see jQuery :/

    Update: ok works, IE is sometimes is very confusing, something else was failing but it was not obvious for me ;)