Get js variable transpiled by Symfony4 Webpack Encore in twig / FosJsRouting bundle

Question

I use fos_js_routing bundle on symfony4 . I need to get the Routing object reachable in my twig view. I defined Routing in assets/js/app.js, a transpiled js file with Webpack Encore. Because my Routing object is correctly built in this file, I want to access it in a Twig view.

// assets/js/app.js
const routes = require('../../web/js/fos_js_routes.json');
import Routing from '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';

Routing.setRoutingData(routes);

I got this line in my webpack config:

Encore      
  .setOutputPath('public/build/')
  .setPublicPath('/build')
  .cleanupOutputBeforeBuild()
  .enableSourceMaps(!Encore.isProduction())
  .addEntry('js/app', './assets/js/app.js')

I get my twig view, where the transpiled app.js is reachable and succesfully transpiled by webpack Encore. But the variable Routing is not reachable ( I got client error : Routing is not defined),

 // in my twig view, inside a script block
 var redirectionUrl = Routing.generate('my_route', {arg: arg}); // Routing is not defined

probably because is defined as let in the transpilation process, and I want it as a var, to be reachable in each twig view where I include transpiled app.js ( public/build/js/app.js ). My Twig view is including the transpiled file in this line, and succesfully imported in my twig sources

<script src="{{ asset('build/js/app.js') }}"></script>

How can I get Routing in my twig view using Webpack encore ?

For that to work, routing has to have a default export. Also, mixing ESM and require syntax in source will bite you, sooner than later — Aluan Haddad
can i get more information with your answer please ? ( i tried to use import / export ES6 syntax but unsuccesfully used theses features in my twig template ) thanks for your support — sachaamm
I don't want to add answer because there isn't enough detail for me to be certain. What I meant was do not mix import and require and make sure that '../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js' contains something like exports.default = something or that you are using an ES module interop aware loader or bundler like Webpack or SystemJS and or a properly configured transpiler such as bable or typescript — Aluan Haddad

sachaamm sachaamm · Accepted Answer · 2019-01-04T22:16:49

AUTO ANSWER :

As far as i understood ( please comment if I'm wrong ), because Webpack is transpiling ES6 syntax to ES5 syntax and because in this process all useless and unrevelant data is erased in your production js transpiled files ( when you call the command: node_modules/.bin/encore production ). So as far as i know, you cannot pass unused data between ES6 js file transpiled to an ES5 js file with Encore. Maybe entering in advanced configuration of Webpack but i didnt spend the time for that ( and this is not usually what you want to deal with transpilers ). My using of fosjsrouting bundle in my project wasn't essential, so I just removed it. But today i will explain how to properly load fosjsrouting Routing object from your twig templates ( instead of trying to access it from your Encore transpiled js files ).

1- Read documentation of FosJsRouting Bundle here in order to :

--- A/ Install the bundle

--- B/ Build your routes

I don't remember the commands, but everything is well explained in the documentation link provided. At the end of your bundle installation, you must get :

1 - router.min.js file in your public/ folder => ./public/bundles/fosjsrouting/js/router.min.js

2 - fos_js_routes.json in your public/ folder => ./public/js/fos_js_routes.json

Now I show you how to generate a Route on a basic twig template view.

{% extends "base.html.twig" %}

{% block javascripts %}


    <script src="{{ asset('bundles/fosjsrouting/js/router.min.js')}}"> 
    </script>

    <script>

        var r = Routing; // loaded from router.min.js

        // because ES5 doesnt support require syntax, 
        // we use jquery getJSON function in order to set 
        // routing data to our Routing object
        $.getJSON("{{ asset('js/fos_js_routes.json')}}", function(routes) { 

            console.log(routes); 

            r.setRoutingData(routes);

            console.log(r.generate('my_route'));

        });

     </script>


{% endblock %}

Get js variable transpiled by Symfony4 Webpack Encore in twig / FosJsRouting bundle

1 Answers

AUTO ANSWER :