1

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);

/***/ }),
Dan
  • 11,914
  • 14
  • 49
  • 112
  • I have created a new question with more detail: [Webpack FOSJsRoutingBundle integration with Symfony Flex and Angular](https://stackoverflow.com/questions/54053137/webpack-fosjsroutingbundle-integration-with-symfony-flex-and-angular) – Dan Jan 05 '19 at 14:51

2 Answers2

1

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.

  1. 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();
  1. Add test.js to your template

twig:

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

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

Helenesh
  • 3,999
  • 2
  • 21
  • 36
  • How did you do the webpack part? Can you share your front-end code please with the `js` includes? – Dan Jan 04 '19 at 14:46
  • Say the code above came from `test.js`, I just included it like this `.addEntry('js/test', './public/assets/js/test.js')` . No extra setup was needed to make it work correctly. Here's my webpack config gist: https://gist.github.com/heleneshaikh/0951e598eca695d3d89b288a1c51dd8a Let me know how it goes. – Helenesh Jan 04 '19 at 14:52
  • Okay and where does `public/bundles/fosjsrouting/js/router.js` get included in the page? This could be what I'm missing... – Dan Jan 04 '19 at 14:59
  • I didn't include that anywhere, I suppose it's used internally. Let me update my answer with more information – Helenesh Jan 04 '19 at 15:02
  • I wonder if it's because I have them in different `.addEntry` files, I have pretty much the same setup as you though but no luck. – Dan Jan 04 '19 at 15:33
0

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);
hoover_D
  • 620
  • 4
  • 9