Halogen Ace example throws a ReferenceError

I downloaded prescript-halogen-6.1.3 and I tried to run the Ace example. When I open the index.html file I get a ReferenceError in the browser:
ReferenceError: Can't find variable: require

It seems somehow a common-js module ended up there.

How did you compile before you opened up index.html?

I followed the instructions on this page: purescript-halogen/examples/ace at master · purescript-halogen/purescript-halogen · GitHub. It boils down to the following two commands
npm install
npm run example-ace
And example-ace is spago --config examples/ace/spago.dhall bundle-app --main Example.Ace.Main --to examples/ace/dist/example.js

Hi - this should be correct.

Seems like the bundle-app part somehow missed one require - I think I had this before (I think when I require in an FFI file - maybe some dependency changed).
I think this is a bug but I could be wrong - let’s see what other folks here think.

For the moment if you don’t mind you can use an external bundler (parcel with the HTML or if you want it for just the js as bundle-app does esbuild works nice - did just find out this week ;))

Just do spago build and then bundle ./output/Main/index.js with one that can bundle common-js into a browser-file. Usually you’ll want to find the option that exposes the exports - for example esbuild --format=iife --global-name=MyPS then you should be able to run main with MyPS.main() from your index.html.

It looks like the ace FFI previously relied on globals only, but was changed to use require, and I don’t think the halogen examples handle npm dependency bundling. Probably worth a Halogen bug ticket.


I submitted an issue: Halogen Ace example throws a ReferenceError · Issue #788 · purescript-halogen/purescript-halogen · GitHub

I got it working by using rollup for the npm dependency building. I had to manually install ace-builds.

1 Like