# Msg causing Type issue

**URL:** <https://discourse.elm-lang.org/t/msg-causing-type-issue/6612>\
**Category:** Learn\
**Created:** [December 8, 2020, 1:55pm UTC](https://discourse.elm-lang.org/t/msg-causing-type-issue/6612 "2020-12-08T13:55:23Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tech\_markable](https://avatars.discourse-cdn.com/v4/letter/t/c68b51/32.png) [@Tech\_markable](https://discourse.elm-lang.org/u/Tech_markable)\
**Post date:** [December 8, 2020, 1:55pm UTC](https://discourse.elm-lang.org/t/msg-causing-type-issue/6612/1 "2020-12-08T13:55:24Z")

</div>

Hi, I am new to Elm and I am trying to build a blog post website. Since this blog has many pages in general, I have views for every page. I am slightly confused with Msg here.

An example is:  
**Page1:**  
view1: ModelA-\>Html AbcMsg  
{let…  
in…  
}

**Page2:**  
view2: ModelB -\> Html Msg  
{…  
div []  
[view1] //error  
}

The error I get is:  
The div call produces:  
Html AbcMsg

But the annotation on view2 says it should be Html Msg

But when I try to add Html AbcMsg instead of Html Msg, it gives new errors. How can I resolve this?

---

<div class="post-metadata">

**Author:** ![pdamoc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pdamoc/32/36_2.png) [@pdamoc](https://discourse.elm-lang.org/u/pdamoc)\
**Post date:** [December 8, 2020, 3:11pm UTC](https://discourse.elm-lang.org/t/msg-causing-type-issue/6612/2 "2020-12-08T15:11:25Z")

</div>

Each page, if it has state, should have its own `Model`, `Msg`, `update` and `view`.

In `Main.elm` you should join the messages under a single name.

You can use the source code of the [packages app](https://github.com/elm/package.elm-lang.org/blob/master/src/frontend/Main.elm#L107-L114) as an inspiration or [elm-spa-example](https://github.com/rtfeldman/elm-spa-example/blob/master/src/Main.elm#L117-L123).

---

<div class="post-metadata">

**Author:** ![Tech\_markable](https://avatars.discourse-cdn.com/v4/letter/t/c68b51/32.png) [@Tech\_markable](https://discourse.elm-lang.org/u/Tech_markable)\
**Post date:** [December 8, 2020, 7:22pm UTC](https://discourse.elm-lang.org/t/msg-causing-type-issue/6612/3 "2020-12-08T19:22:44Z")

</div>

Hi @pdamoc, thank you for your reply. I am aware that all the views shall be rendered into the Main file. But for example, If I have created a view1 which is like a dropdown and it needs to be added into my **Layout** which is view2, that’s where I am getting an error due to the Msg part as I have added AbcMsg in view1 but view 2 where the dropdown is added is needing Html Msg. When I try to change in any of the files, I get an error. Also, View2 is already added into the main file.

If possible, could you please check the example above and help what can be done? I checked the elm-spa-example but that didn’t quite help with this issue.

Awaiting your reply 🙂

---

<div class="post-metadata">

**Author:** ![berend](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/berend/32/2250_2.png) [@berend](https://discourse.elm-lang.org/u/berend)\
**Post date:** [December 9, 2020, 12:42am UTC](https://discourse.elm-lang.org/t/msg-causing-type-issue/6612/4 "2020-12-09T00:42:01Z")

</div>

I suggest you start with an existing example. Or why not start with [elm spa](https://www.elm-spa.dev/guide)? Just way quicker than to completely understand Elm architecture, and wire it all up yourself.

---

<div class="post-metadata">

**Author:** ![pdamoc](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/pdamoc/32/36_2.png) [@pdamoc](https://discourse.elm-lang.org/u/pdamoc)\
**Post date:** [December 9, 2020, 10:02am UTC](https://discourse.elm-lang.org/t/msg-causing-type-issue/6612/5 "2020-12-09T10:02:17Z")

</div>

In essence, you need to lift `AbcMsg` to `Msg` either using `Html.map` or passing down to the view a lift function that can be combined to produce the needed `Msg`

So, in your `Msg` you will have `| FromAbcMsgToMsg AbcMsg` (I made the tag more explicit, you can chose better names).

You would then write

```auto
view2: ModelB -> Html Msg
{…
div []
[Html.map FromAbcMsgToMsg view1]  
}

```

Please be aware that current recommendations are to use this pattern as the last resort. In other words, maybe you can avoid it by simply customizing `view1` with the message handlers that it needs.

```auto
view1 : { fooHandler : String -> msg, barHandler : msg} -> Html msg 
view1 {fooHandler, barHandler} = 
    div []
    [input [ onInput fooHandler][]
    , button [onClick barHandler][text "Some Button"]
    ]

```

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [December 19, 2020, 10:02am UTC](https://discourse.elm-lang.org/t/msg-causing-type-issue/6612/6 "2020-12-19T10:02:19Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.