How to generate source maps

[kiliancs]

Looking at the source code I see that by providing sourceMapOptions and a filePath Sucrase should generate source maps. I also see that the filePath option is provided by the webpack loader. In the same context of webpack, how do I obtain the compiledFilename, which is a mandatory prop of sourceMapOptions?

This naive loader configuration doesn't seem to be producing source maps:

const sucraseLoader = {
    loader: '@sucrase/webpack-loader',
    options: {
        transforms: ['jsx', 'typescript', 'imports'],
        sourceMapOptions: { compiledFilename: '' },
    },
};

Thank you in advance!

[remorses]

Is there a way to generate source maps with the cli too?

[johnpangalos]

As for webpack, take a look a this (I believe it makes the sucrase website.) https://github.com/alangpierce/sucrase/blob/4163973a06fa9f4ac9a2d6b9cc0f04b343fe643d/website/config/webpack.config.dev.js

[Raynos]

In theory source maps are not needed with sucrase because the compiler preserves line numbers.

You can just look at the JS it generates without the type annotations.

[jbolda]

I believe we have gotten source maps created and the chrome debugger using these to point directly to the source files. The last part is this PR for anyone coming across this. https://github.com/backstage/backstage/pull/5841