Question

I am trying Yesod book examples documented on Yesod webpage. One of the examples is for Chat application embedded in Wiki. When I try it in ghci (loading Chat module from Wiki.hs which contains Wiki example code), I get the error below for Chat.hs:

Chat.hs:122:34:
    Could not deduce (Text.Julius.ToJavascript Text)
      arising from a use of `Text.Julius.toJavascript'
    from the context (YesodChat master)
      bound by the type signature for
                 chatWidget :: YesodChat master =>
                               (Route Chat -> Route master) -> GWidget sub master ()
      at Chat.hs:(81,15)-(83,35)
    Possible fix:
      add an instance declaration for (Text.Julius.ToJavascript Text)
    In the first argument of `Text.Julius.Javascript', namely
      `Text.Julius.toJavascript output'
    In the expression:
      Text.Julius.Javascript (Text.Julius.toJavascript output)
    In the first argument of `Data.Monoid.mconcat', namely
      `[Text.Julius.Javascript
          ((Data.Text.Lazy.Builder.fromText . Text.Shakespeare.pack')
             "\
             \// Set up the receiving end\
             \var output = document.getElementById(\""),
        Text.Julius.Javascript (Text.Julius.toJavascript output),
        Text.Julius.Javascript
          ((Data.Text.Lazy.Builder.fromText . Text.Shakespeare.pack')
             "\");\
             \var src = new EventSource(\""),
        Text.Julius.Javascript
          (Data.Text.Lazy.Builder.fromText
             (_render_a3Yr (toMaster ReceiveR) [])),
        ....]'

I am not very familiar with Yesod libraries yet. So, I am stumped by the above error – I have seen this error in other Yesod examples too where toWidget function is called. So, it seems to be related to toWidget function. I will appreciate help in fixing the above error.

I am using ghc 7.6.1 with yesod 1.1.4.1.

Update:

Fixed following Hammar’s suggestion. I made two changes in Chat.hs.

1. Add import statement for rawJS:

   import Text.Julius (rawJS)

2. Track down all instances of #{} blocks within julius whamlet in Chat.hs, and replace them with {# rawJS ...}

   var output = document.getElementById("#{rawJS output}");

   var input = document.getElementById("#{rawJS input}");

Answer 1

I don’t have Yesod installed to test it at the moment, but according to this blog post you should just have to change #{output} to #{rawJS output} and so on when interpolating JavaScript identifiers.