"Uncaught ReferenceError: Fay is not defined" with yfsSeparateRuntime

[cies]

I don't know if this is the right place to mention it, and I don't know if what I mention below is an issue. Yet after spending a lot of time hunting this one down, I feel the need to document my findings in hope that it may help someone who encounters the same.

At first I raised an issue at fay-jquery but I was wrong about that...

The JS error I got in my Chrome browser was:

Uncaught ReferenceError: Fay is not defined

It is caused by the yfsSeparateRuntime not being set to Nothing in the Settings.hs.

The reason for this setting to cause the error is -- by my best analysis -- that the fay-runtime.js gets loaded before the application's JS file, while the runtime code refers to Fay.FFI.* functions that are only defined in the application code.

The best/quick solution I saw was merging the files into one; luckily setting yfsSeparateRuntime to Nothing in the Settings.hs does just that.

The fact that the runtime code needs functions from the application code leaves me with a bit of a weird feeling.

[snoyberg]

It might just be that we can no longer provide yfsSeparateRuntime. @chrisdone any thoughts?

[chrisdone]

Just came across this myself. The problem is that Fay code output was originally wrapped in an IIFE, then at some point that was undone, which is an invariant that this splitting of runtime and application code depended on. Now the wrapper is back, that invariant is broken, so the IIFE delimits the scope of the Fay object to inside that IIFE, where the runtime code cannot access it. There's (IIIRC) already a config variable for Fay to wrap with an IIFE or not, so it should just be a matter of updating yesod-fay to specify this configuration.

[krgn]

I have set yfsSeparateRuntime to Nothing too, but the runtime does not get merged in and I'm seeing this error:

ReferenceError: Fay$$$ is not defined

@cies did you have to do anything else to get it working? I also tried including fay_runtime_js statically/manually in my layout, but with the same effect.

_update:_ managed to sort it out by hard-coding it as script tag into the layout right at the bottom

[cies]

maybe I dont understand your question well. myself I dont have any fay_*_js file in my code. currently I do something like this:

getHome ..... = do ....... defaultLayout $ do ........ $(widgetFile "homepage") $(fayFile' (ConE 'StaticR) "Home") addScript $ StaticR js_vendor_custom_modernizr_js addScript $ StaticR js_foundation_foundation_js addScript $ StaticR js_foundation_foundation_topbar_js addScript $ StaticR js_foundation_foundation_tooltips_js addScript $ StaticR js_foundation_foundation_dropdown_js

On Mon, Sep 22, 2014 at 1:04 PM, Karsten Gebbert notifications@github.com wrote:

I have set yfsSeparateRuntime to Nothing too, but the runtime does not get inlcuded and I'm seeing this error:

ReferenceError: Fay$$$ is not defined

@cies https://github.com/cies did you have to do anything else to get it working? I also tried including fay_runtime_js manually in my layout, be with the same effect.

— Reply to this email directly or view it on GitHub https://github.com/fpco/yesod-fay/issues/12#issuecomment-56358166.

[krgn]

No, I meant to ask how you add-in the runtime. Just setting yfsSeparateRuntime to Nothing does not add it/merge it with the application js, so I end up with a different error.

Sorry for the confusion :)

[chrisdone]

Okay, I've pushed a commit 6b7cde8 which fixes this.

• yfsSeparateRuntime = Nothing yields faygen.js => (function(){ <runtime code> <app code> })
• yfsSeparateRuntime = Just … yields two files, one file-runtime.js => <runtime code> and the other faygen.js => <app code> (note the lack of wrapper).

In development your <app code> will be mixed with any other .julius JS, in production fay-gen.js will be separated.

If you change this setting, remember to rm -r dist/yesod-fay-cache to ensure it rebuilds the JS properly.