FOSJsRoutingBundle integration with Symfony Flex

Question

The issue is that I cannot get FOSJsRoutingBundle to work with Symfony Flex and Webpack.

I've been using this bundle in Symfony 3 for a long time and there's never been an issue but with the introduction of webpack, the setup has become more complex. Unfortunately the documentation for version 2.2 isn't clear.

You can find the current documentation for the bundle here: https://symfony.com/doc/master/bundles/FOSJsRoutingBundle/index.html

As you can see it recommends the following approach for Symfony Flex, so I'm writing this in code/assets/js/fos_js_routes.js:

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

Routing.setRoutingData(routes);

with a test route in: code/assets/js/fos_routing_test.js

Routing.generate('test_route');

and then including it in webpack.config.js as:

.addEntry('app_fos_routing', [
    './assets/js/fos_js_router.js'
])
.addEntry('app_fos_generate_routes', [
    './assets/js/fos_routing_test.js'
])

and my code/templates/index.html.twig:

{{ encore_entry_script_tags('app_fos_routing') }}
{{ encore_entry_script_tags('app_fos_generate_routes') }}

However when I implement this webpack creates the following which causes a reference error ReferenceError: Routing is not defined

/***/ "./assets/js/fos_js_router.js":
/*!************************************!*\
  !*** ./assets/js/fos_js_router.js ***!
  \************************************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js */ "./vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js");
/* harmony import */ var _vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0__);
var routes = __webpack_require__(/*! ../../public/js/fos_js_routes.json */ "./public/js/fos_js_routes.json");


_vendor_friendsofsymfony_jsrouting_bundle_Resources_public_js_router_js__WEBPACK_IMPORTED_MODULE_0___default.a.setRoutingData(routes);

/***/ }),

Answer 1

I suggest to change your import to

const routes = require('../../public/js/fos_js_routes.json');
const Routing = require('../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js');

Routing.setRoutingData(routes);

Answer 2

I had the same issue in my Flex application. Here's the steps I took to make it work:

1. Download FOSJSRoutingBundle and make sure that the generated file in public/bundles/fosjsrouting/js/router.js looks like this.
2. Generate your routes with the command fos:js-routing:dump --format=json --target=public/assets/js/fos_js_routes.json
3. Create a JS file where you'll have to use the generated route.

test.js:

  import Routing from '../../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
  const routes = require('../fos_js_routes.json'); //file with generated routes, created after executing the command above.
  Routing.setRoutingData(routes);
  Routing.generate('booking_data') //use generated route
  //... the rest of your JS code

Make sure that those relative paths are correct.

4. Add your test.js to your webpack.config.js file:

webpack:

const Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build')
    .setPublicPath('/build')
    .setManifestKeyPrefix('')
    .splitEntryChunks()
    .addEntry('js/test', './public/assets/js/test.js')// JAVASCRIPT
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())
    .enableSassLoader()
    .enablePostCssLoader()
    .enableSingleRuntimeChunk()
;

module.exports = Encore.getWebpackConfig();

5. Add test.js to your template

twig:

{{ encore_entry_script_tags('js/test') }}

This is everything that I have done to make it work.