Source maps not working properly

[freiondrej]

Hello, I'm using symfony/webpack-encore and now trying out its Stimulus integration. When using files outside stimulus (e.g. a typescript file imported in app.js), source maps are working properly and map the bundled code back to the .ts file, which allows me to use breakpoints in PhpStorm. However, when trying to use a source map of a stimulus controller sitting in assets/controllers, the source map points to an already somehow-compiled version of the controller, even when the controller is written in typescript as well (I tried both js and ts). Can this behavior be configured somehow to get the right sourcemaps and enable using breakpoints in the original controller file? I don't understand the webpack processing chain very well, so it's possible this repo is not where this issue belongs - maybe stimulus-bridge outputs the source maps properly, but another tool down the line breaks them?

[tgalopin]

Hi!

Are you having this issue with your own controller or with controllers in UX packages?

[freiondrej]

@tgalopin thank you for insanely quick reply! It occurs e.g. for the demo hello_controller.js generated by the Flex recipe.

[tgalopin]

I'm suspecting it could come from the Webpack helper that resolve files automatically, but I'm not sure. @weaverryan @Kocal you have more experience than me with Webpack on this level, do you have an idea?

[Kocal]

Hi,

I'm not familiar enough with webpack internals and how webpack deals with sourcemaps, but like Titouan I also suspect the transformations done automatically to import controllers. Especially those files:

• https://github.com/symfony/stimulus-bridge/blob/main/src/webpack/loader.js#L43
• https://github.com/symfony/stimulus-bridge/blob/main/src/webpack/create-controllers-module.js
• https://github.com/symfony/stimulus-bridge/blob/main/src/webpack/generate-lazy-controller.js

I looked a bit to the webpack documentation, and if I'm not wrong, this is how we can keep sourcemap by updating the loader.js like this:

-module.exports = function (source) {
+module.exports = function (source, sourceMap) {

-    return finalSource;
+    this.callback(null, finalSource, sourceMap);

Maybe this is enough, or maybe not... :man_shrugging:

I can't help you much, sorry!

[freiondrej]

@Kocal, thank you for your suggestion. Unfortunately, after applying your suggestion locally (in node_modules/@symfony/stimulus-bridge/dist/webpack/loader.js), the behavior did not change.