ES6 Import & Export

Hi

I have a file with multiple functions.
In the HTML

<li onclick="clickOnListElementGoFrom('parameter 1') class="list-group-item list-group-item-action">Option 1</li>

In the .js file I set the export for function as in .

export  { clickOnListElementGoFrom, getRelatedCitiesWeb }

in the app.js I have set the import.

import {clickOnListElementGoFrom, getRelatedCitiesWeb }  from "./flight";

and I always receiving a

Uncaught ReferenceError: clickOnListElementGoFrom is not defined
    at HTMLLIElement.onclick (eb5f9aaf04e3078e01a03dd62c568b27:278)
onclick @ eb5f9aaf04e3078e01a03dd62c568b27:278

Can somebody please help me with an idea?

Hey Bogdan,

As far as I see it from the code you paste here - you missed a closing quote for that onclick attr, it should be like this I suppose:

<li onclick="clickOnListElementGoFrom('parameter 1')" class="list-group-item" list-group-item-action="">Option 1</li>

Please, first if all, double check your attribute quotes on that "li" tag and try again. Does it help?

If not, I probably may know what's the problem. Webpack isolates all that code in a special scope, so you can't access that function from outside. I'd recommend you to add a custom CSS class to that element, .e.g "js-custom-css-class" and then add a listener in that app.js where you import this function. If you need to pass an extra data from the HTML - you can use data attributes, e.g. data-parameter="1". Then, in the code you will be able to read that data. If you use jQuery - it will be as easy as call .data('parameter') on the jQuery element.

I hope this helps!

Cheers!

Hi,

Again, great tutorials :).

I have one question regarding Encore. I'm using code splitting for importing js file only when needed.
It works fine, but the imported files are name only with numeric value (like 0.js, 1.js, etc ...).

I jnow we can change this when we use webpack directly, but I can't find any option in Encore.

Thanks for any help.

Hey Chuck norris!

Cool question :). The answer is that you do this the exact same way as in Webpack :), because the filename is determined at the time when you do the code splitting. The exact code depends on which method your using for splitting (require vs import). But, for example: https://webpack.js.org/guides/code-splitting/#dynamic-imports

Specifically, the do return import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {

That should be all you need: there is nothing in your webpack config that needs to change for this :). If you see something different, let me know. But also... usually... those 0.js and 1.js names are fine - you shouldn't normally need to refer to these.

Cheers!

Hi Ryan,

thanks for your answer.
In my previous full front project, I used require.ensure, like this :

in webpack :

module.exports = {
  output : {
    chunkFilename: '[name].bundle.js',
  }

And in my app.js

if (something) {
  require.ensure([], () => {
    require('./my-component');
  }, 'my-component-name');
}

Now, in my symfony project, I'm using import like that :

if (something) {
  import(/* webpackChunkName: "my-component-name" */ './my-component').then(...).catch(...);
}

But this doesn't work.
I think its because there is no chunkFilename option inmy webpack.config.js
I don't knwo how to set it with Encore.
I looked inside Encore options and the closest I found is configureFilenames.

So I tried setting in webpack :

.configureFilenames({
   js: '[name].js',
 })

That doesn't work either.

Thanks for any help.

Hey Chuck norris!

Hmm, so I think you're getting confused because there are a few different ideas floating around at the same time. Let's see if we can clear then up!

1) You shouldn't need to do any special setup in Encore (or even Webpack) to get this lazy-chunk loading to work. That may not make sense yet, but keep reading :).

2) require.ensure and using import() as a function (like you did above) are actually different syntaxes for doing the exact same thing. For simplicity, let's use require.ensure, because using import() like this requires one extra bit of setup.

So, big picture: you normally run around using either require or import to get import a module you need. And, as you know, when you do this, Webpack/Encore will find all the pieces of JavaScript you need, and eventually put them into the final, built file - e.g. app.js.

But, suddenly, you realize that there is one module that you only need sometimes, and so you don't want it to be packaged in app.js: it makes that file unnecessarily big. So instead, you want to load this file only when you need it. That's when you use require.ensure or import() as a function. It should look similar to your code above:

// app.js
if (something) {
  require.ensure(['./my-component'], (require) => {
    // the last .default is needed if you're using the "export default" format in my-component
    const myComponent = require('./my-component').default;
    // use myComponent
  });
}

As soon as you have code like this (yea, the syntax is a bit odd), Webpack will NOT package my-component into the built app.js anymore. Instead, it will generate a separate JavaScript file that contains only the code for my-component. It will probably call this 0.js, but actually, you don't care :). Why? Because, at runtime, when your code gets inside the if statement, Webpack will automatically make an AJAX call to 0.js and then execute the callback (2nd argument to require.ensure) once that file has finished downloading. So, you never need to know or care what this filename is called: you just say "load this lazily", and Webpack takes care of the rest.

Does that makes sense? I was confused by how you seemed to try to lazily load this file in app.js and then also again in your "Symfony project" via a different method. Btw, when you mean "in your Symfony project", did you mean from inside a Twig template?

Let me know if this helps!

Cheers!