FOSJsRoutingBundle integration with Symfony Flex [duplicate]

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

/***/ }),

I have created a new question with more detail: Webpack FOSJsRoutingBundle integration with Symfony Flex and Angular — Dan
– Dan, Commented Jan 5, 2019 at 14:51

Helenesh · Accepted Answer · 2019-01-04 15:11:54Z

1

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

Download FOSJSRoutingBundle and make sure that the generated file in public/bundles/fosjsrouting/js/router.js looks like this.
Generate your routes with the command fos:js-routing:dump --format=json --target=public/assets/js/fos_js_routes.json
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.

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

Add test.js to your template

twig:

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

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

edited Jan 4, 2019 at 15:11

answered Jan 4, 2019 at 14:45

Helenesh

4,3792 gold badges26 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dan Over a year ago

How did you do the webpack part? Can you share your front-end code please with the js includes?

Helenesh Over a year ago

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: gist.github.com/heleneshaikh/0951e598eca695d3d89b288a1c51dd8a Let me know how it goes.

Dan Over a year ago

Okay and where does public/bundles/fosjsrouting/js/router.js get included in the page? This could be what I'm missing...

Helenesh Over a year ago

I didn't include that anywhere, I suppose it's used internally. Let me update my answer with more information

Dan Over a year ago

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.

hoover_D · Accepted Answer · 2019-01-04 13:16:20Z

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

edited Jan 4, 2019 at 13:16

answered Jan 4, 2019 at 12:55

hoover_D

6604 silver badges9 bronze badges

5 Comments

Dan Over a year ago

I've obviously done that because the webpack compiles successfully when it finds the public vendor file ../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.js

hoover_D Over a year ago

sorry, I didn't see you didn't miss this step

hoover_D Over a year ago

I edited my post

Dan Over a year ago

Same issue, looks like `Routing is defined inside the webpack function so it's unrecognised globally?

hoover_D Over a year ago

try to get the global like this: const Routing = window.Routing;

Collectives™ on Stack Overflow

FOSJsRoutingBundle integration with Symfony Flex [duplicate]

2 Answers 2

5 Comments

5 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

5 Comments

Linked

Related