Importing External Libraries & Global Variables

Hey Krzysztof,

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

Cheers!

Hey Pascal!

Ah, that's no fun! Ok, let's do some debugging! My guess is that you have something like this:

// app.js

// I'm not sure why you need this exact path - it must be due to how the library is set up
// I got this from their docs
import anime from 'animejs/lib/anime.es.js';

global.anime = anime;

Is that about right? If so, that should work. So check your HTML source on your page. Do your script tags have a "defer" attribute on them? If so, that's the problem. To fix it, set this line to false: https://github.com/symfony/recipes/blob/master/symfony/webpack-encore-bundle/1.9/config/packages/webpack_encore.yaml#L9

If I'm correct, here is some more info about the change: https://symfony.com/blog/moving-script-inside-head-and-the-defer-attribute

If I'm not correct... let me know ;).

Cheers!

Hey weaverryan , thanks for your help. It works now . :D

nioapp.js file
script.js file

Hi @Shu!

Hmm. It looks like the nioapp.js script isn't setup to work well with "modules". It doesn't export a value, which is why your import doesn't work. For these old scripts, it's pretty common for them to at least set a global variable, but I can't tell if that is true in this case or not. If it IS, you should be able to do this:

import './vendors/nioapp/nioapp.min';

// now immediately start referencing NioApp because nioapp.min.js set it as a global variable

But I'm guessing that NioApp is set as a global variable - I'm not sure. It many only be set as a "local" variable in nioapp.min.js, which is why you can't access it from script.js. And... if that's the case, there's nothing you can really do but copy nioapp.min.js into your code or fix nioapp.min.js to export a value.

Cheers!

Hey fd!

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/package/@xtuc/long/v/4.2.2 - 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/create-react-app/issues/7466#issuecomment-519922774 - which is an npm config file that can live in a few places - https://docs.npmjs.com/configuring-npm/npmrc.html#files

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!

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!

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!

Hey 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/screencast/webpack-encore/code-splitting

Cheers!

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!