No type class instance error when trying to lift Aff response

Question

I am a newbie to Purescript and am trying to learn Halogen/Aff. I have been working on a simple app which is a variation of the effects-aff-ajax example in the purescript-halogen repo. I have everything almost working, except I get the error below.

The part of the code that gets the error is very similar to the code in the effects-aff-ajax example, (which I haven't compiled, but I can only assume works). Inspecting the code I can see no reason why it should not be able to lift the Aff response.

Error found:
in module Component
at src/purs/Component.purs:59:17 - 59:26 (line 59, column 17 - line 59, column 26)

  No type class instance was found for
                                
    Effect.Aff.Class.MonadAff m2
                                

while checking that type forall m. MonadAff m => (forall a. Aff a -> m a)
  is at least as general as type t0 -> t1
while checking that expression liftAff
  has type t0 -> t1
in value declaration handleAction

where m2 is a rigid type variable
        bound at (line 54, column 16 - line 60, column 60)
      t1 is an unknown type
      t0 is an unknown type

Here is the complete module:

module Component (component) where

import Prelude (Unit, bind, discard, map, ($), (<<<), (<>))

import Affjax as AX
import Affjax.RequestBody as AXRB
import Affjax.ResponseFormat as AXRF
import Data.Either (hush)
import Data.Maybe (Maybe(..))
import Effect.Class (class MonadEffect)
import Halogen as H
import Halogen.HTML as HH
import Halogen.HTML.Events as HE
import Halogen.HTML.Properties as HP
import Web.Event.Event as E

type State = { source :: String, translation :: Maybe String }

data Action = InputSource String 
  | TranslateSource State E.Event

component :: ∀ f i o m. MonadEffect m => H.Component HH.HTML f i o m
component =
  H.mkComponent
    { initialState
    , render
    , eval: H.mkEval $ H.defaultEval { handleAction = handleAction }
    }

initialState :: ∀ i. i -> State
initialState _ = { source: "that wine is very delicious", translation: Nothing }

render :: ∀ m. State -> H.ComponentHTML Action () m
render state =
  HH.form
    [ HE.onSubmit (Just <<< TranslateSource state) ]
    [ HH.h1_ [ HH.text "English to Italian Translation" ]
    , HH.input
        [ HP.type_ HP.InputText
        , HP.value state.source
        , HE.onValueInput $ Just <<< InputSource
        ]
    , HH.p_ []
    , HH.button
        [ HP.type_ HP.ButtonSubmit ]
        [ HH.text "Translate" ]
    , HH.p_ [ HH.text $ case state.translation of
                          Nothing -> ""
                          Just t -> "Translation: " <> t 
            ]         
    ]

handleAction :: ∀ o m. MonadEffect m => Action -> H.HalogenM State Action () o m Unit
handleAction = case _ of
  InputSource s -> 
    H.modify_ _{ source = s }
  TranslateSource st ev -> do
    H.liftEffect $ E.preventDefault ev
    response <- H.liftAff $ AX.post AXRF.string "http://locahost:8080/translate" (Just $ AXRB.string st.source)
    H.modify_ _{ translation = map _.body (hush response) }

Answer 1

Yep that was it Fyodor Soikin. I needed to make Component use MonadAff rather than MonanEffect. Thanks!

component :: ∀ f i o m. MonadAff m => H.Component HH.HTML f i o m