Creating Source Maps for Real World Halogen

#1

Hi,

I am trying to create source maps for real world halogen, https://github.com/thomashoneyman/purescript-halogen-realworld. If I use “spago bundle-app --source-maps --main Main --to dist/app.js && parcel build assets/index.html” I get a lot of error messages like:
"Could not load source file “output/Data.Function.Uncurried/index.js” in source map of “…/dist/app.js” .

I have looked at the documentation for spago and there is something written regarding creating source maps see here https://github.com/purescript/spago#get-source-maps-for-my-project. I dont understand step 2:
“source output (like var someModule = require('./output/Whatever/index.js'); ) and use something like parcel , to avoid mangling/destroying the sourcemaps”.

Can somebody please tell me what I have to do?

#2

Hi @sbosse, and apologies for the delayed response.

I believe source maps are generated with the suggested yarn bundle command:

> yarn bundle
yarn run v1.22.0
$ spago bundle-app --main Main --to dist/app.js && parcel build assets/index.html
[info] Installation complete.
[info] Build succeeded.
[info] Bundle succeeded and output file to dist/app.js
✨  Built in 21.48s.

dist/app.4165a6fc.js.map    ⚠️  2.34 MB     226ms
dist/app.4165a6fc.js          632.1 KB    21.05s
dist/index.html                  602 B       5ms

Breakpoints are working fine for me. I’m triggering this one by clicking on any of the listed “Popular Tags”.

image
image.png1988×744 141 KB

To confirm that the mapfile is being used correctly, I first delete the un-minified dist/app.js, then re-run http-server dist.

I have never needed to use the more elaborate sourcemap instructions found in the spago documentation. Not sure what use-case those are necessary for.

#3

Hi, thank you for your answer.
Setting the breakpoints inside app.js works for me too.

I thought there might be a possibility to create source maps like in webpack for javascript. So if you activate the source-maps inside webpack it is possible to debug in the various .js files instead of debugging the one bundled js file.

1 Like