Problem with FOSJsRouting: works with Webpack but not with AssetMapper

Question

Description:

I'm facing an issue with FOSJsRouting in my Symfony project, especially when using AssetMapper. Here are the details of my configuration:

I've installed and configured the FOSJsRoutingBundle in Symfony.

The file public/js/fos_js_routes.js is correctly generated after running the command:

php bin/console fos:js-routing:dump

In my app.js file, I imported the module as follows:

import Routing from "fos-router";

In my Twig template, I correctly include the fos_js_routes.js file:

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

The problem is that:

With Webpack, everything works fine: I can generate URLs using Routing.generate(). With AssetMapper, it doesn't work: I get the following error in the console:

Uncaught Error: The route "xhr.dashboard.table_body.project.current_user_favorite" does not exist.

I've verified the following:

• The route xhr.dashboard.table_body.project.current_user_favorite exists in Symfony, as confirmed by running:

  php bin/console debug:router

• The fos_js_routes.js file is correctly generated in public/js/.

• The FOSJsRoutingBundle configuration seems correct.

• The JavaScript file is correctly included in my Twig template.

I don't understand why it works with Webpack but not with AssetMapper. Is there a difference in how the files are handled or included between Webpack and AssetMapper that could explain this behavior?

Do you have any suggestions to fix this issue and make it work with AssetMapper as well?

Answer 1

Another workaround:

1. Install fos-router: php bin/console importmap:require @toyokumo/fos-router
2. Dump the js with callback: php bin/console fos:js-routing:dump --format=js --target=assets/js/fos_routes.js --callback="export default "

Usage:

import routes from './fos_routes.js';
import Router from '@toyokumo/fos-router';

Router.setRoutingData(routes);
Router.generate('your_router');