error: parse error on input ‘{’ using simples yesod code

Question

I built basic yesod template like this:

stack new kek yesod-simple
stack build 

it was okay. After that I tried to add a handler following this tutorial, the echo part:

1. I added /echo/#String EchoR GET to config/routes

2. I also added the following handler to Home.hs

   getEchoR :: String -> Handler RepHtml    
   getEchoR theText = do    
       defaultLayout $ do    
               [whamlet|<h1>#{theText}|]
   

When I tried stack build again I got the following error:

[8 of 9] Compiling Handler.Home     ( src/Handler/Home.hs, .stack-work/dist/x86_64-linux-nopie/Cabal-1.24.2.0/build/Handler/Home.o )

/home/kek/me/haskell/webservices/lol/src/Handler/Home.hs:72:23: error: parse error on input ‘{’

--  While building package lol-0.0.0 using:
      /home/kek/.stack/setup-exe-cache/x86_64-linux-nopie/Cabal-simple_mPHDZzAJ_1.24.2.0_ghc-8.0.2 --builddir=.stack-work/dist/x86_64-linux-nopie/Cabal-1.24.2.0 build lib:lol --ghc-options " -ddump-hi -ddump-to-file"
    Process exited with code: ExitFailure 1

I just copied this whamlet[...] string from the tutorial, everything else is generated according to yesod-simple template, I didn't change anything.

upd: I managed to get it working by changing handler code to the following:

getEchoR :: String -> Handler RepHtml
getEchoR theText = do
    defaultLayout $ do
        setTitle "My Awesome Site"
        $(widgetFile "echo")

And adding a sample echo.hamlet file to /templates/

<!-- Static navbar -->
<nav .navbar.navbar-default.navbar-static-top>
    <div .container>
        <div .navbar-header>
            <button type="button" .navbar-toggle.collapsed data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

        <div #navbar .collapse.navbar-collapse>
            <ul .nav.navbar-nav>

            <ul .nav.navbar-nav.navbar-right>


<!-- Page Contents -->

<div .container>


<!-- Footer -->
<footer .footer>
    <div .container>
        <p .text-muted>

So my question change to following: am I obliged to do this in this case?

Answer 1

[whamlet|<h1>#{theText}|] is quasiquote syntax; this requires enabling the QuasiQuotes GHC extension.

The simplest way to enable it is to add the pragma {-# LANGUAGE QuasiQuotes #-} to the top of the .hs file (which enables it for that file only – you can also enable pragmas project-wide in the Cabal file).