Webpack-encore: Integration with FOSJsRoutingBundle

[dayze]

I'm struggling to make FOSJSRoutingBundle works with webpack encore.
I've imported router.js from web/bundles/fosjsrouting/js/router
And I get the error router.js:8:480 TypeError: undefined is not an object (evaluating 'k.navigator')
It works when I include it directly into my twig template.
Is there a proper way to make it work with webpack ?

[weaverryan]

Hey @dayze!

Unfortunately, the JS in that bundle is not built to be used as a modern module :(. It's something we need to fix (in that bundle). But, here are a few solutions:

1) https://github.com/symfony/webpack-encore/issues/5#issuecomment-308101272. The only downside is that this requires you to dump your routes, which can be a pain in dev

2) A bit more hacky, but do this:

A) Continue to include the normal script tags for FOSJsRouterBundle in your HTML body (include them above any JS from Encore)

B) Create a "fake" JS module, that simply uses the global Routing object

// assets/Routing.js

module.exports = window.Routing;

C) That's it! Now you can include this Routing.js file whenever you need the Routing object:

// assets/app.js
var Routing = require('./Routing.js');

Routing.generate('...');

Let me know if that helps! I'll leave this issue open, because we need to make this much easier.

[dayze]

Hi !
First of all thanks for your help.
The first solution, like you said, can't really be appropriate in a dev environnement.
Your second solution works, and will do it for now, thanks !

[Aerendir]

Excuse me for the question that may seem trivial, but I'm just starting with Javascript.

My question:

Isn't it sufficient to write in the file where I need the Routing somthing like:

var Routing = window.Routing

or use directly window.Routing?

[stof]

@Aerendir the benefit of keeping it only in a single module means that it is easier to upgrade your codebase once FOSJsRoutingBundle becomes more friendly (though I don't see a good way to be friendly to webpack without involving some dumping of routes, as loading routes in JSONP is precisely not friendly with webpack)

[Aerendir]

@stof ok, it's a good point... I'll go this way!

[Koc]

For getting autocomplete for methods of Routing I'm suggesting use wrapper:

const Routing = window.Routing;

module.exports = {
    generate(name, parameters = {}, absolute = false) {
        return Routing.generate(name, parameters, absolute);
    },
};

and name file with this export like backend-router.js (to not mix up with your SPA router)

[stof]

the 2.2 version of FOSJsRoutingBundle should make things much easier, by supporting UMD for the router (you still need to load the routes)

[stof]

note that it would make the solution from https://github.com/symfony/webpack-encore/issues/5#issuecomment-308101272 easier, not the solution with the global:

// backend_router.js

const router = require('../vendor/friensofsymfony/js-routing-bundle/Resources/public/js/router.js');
 // dumped_routes.json is the output file for the fos:js-routing:dump command
const routerConfig = require('../dumped_routes.json');

router.setRoutingData(routerConfig);

module.exports = router;

[stof]

well, if you install the bundle assets, accessing things from public/bundles could work too (but then the path would probably be ../public/bundles/... if you follow the Encore suggestion of putting the client-side source code in /assets and not in /public as the non-built files don't need to be accessible)

[stof]

hmm indeed. setData is the old static API. I edited my comment to fix these issues

[althaus]

How to handle routes during DEV when using the controller to deliver routes instead of using the dumped ones? I hacked something together by exposing router into the window and then using 'callback': 'router.setRoutingData' as the parameter.

Is there a better solution?

[anacicconi]

The @stof solution wasn't working for me. I think it's because I'm using the version 1.6. An alternative solution I found was to use the "webpack-merge-and-include-globally" on my webpack.config.js.

````
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');

plugins: [
new MergeIntoSingleFilePlugin({
files: {
'routing.js': [
path.resolve(__dirname, 'web/bundles/fosjsrouting/js/router.js'),
path.resolve(__dirname, 'web/js/fos_js_routes.js'),
],
},
}),
],
````

and then I can simply use the file in my template:

````

````

[Herz3h]

Whats the best solution on a dev environment ? I don't really want to dump routes every time I add a new route using the above solution .

[althaus]

I'm still stuck with my hacky solution described in https://github.com/symfony/webpack-encore/issues/97#issuecomment-423476486.

[Herz3h]

Ok I ended up using script tags, creating a Routing.js file with module.exports = window.Routing and adding an alias in webpack configuration like so :

'Routing': path.resolve(__dirname, 'web/js/routing.js')

This turns out to be the most practical way to use it for me.

[marcckku]

Hi!!
I have a Symfony 4.4 Flex Project and I would like mapping the actions or endpoints in javascript or jquery and use ajax call and I installed the bundle jsrouting-bundle, but I have some problems whit this... I don't know how to mapping and use this bundle exactly. I follow the ufficial manual Symfony.

1 - https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/installation.html
2 - https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/usage.html
3 - https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/commands.html#fos-js-routing-dump

I don't user webpack encore and I don't want to using this. I question you this, because I do everything writting exist inside in the manual but without success ..

The question is, how to use this Bundle in my Project without webpack encore ???

Somebody help me ??

[Lyrkan]

@marcckku The three URLs you gave detail how to use the FOSJsRoutingBundle without Encore. This thread is about using it with Encore.