Elm name 'Model' Defined Twice

[BSperl]

Hi I’m new to elm. I’m working through a tutorial but some of the syntax is outdated. I’m trying to run a simple elm code with a button that adds an exclamation point. Sorry if this has already been asked. When I compile in react it shows the following:

– SHADOWING ------------------------------------------ 04_Architected_hello.elm

The name model is first defined here:

30| model =
^^^^^
But then it is defined AGAIN over here:

54| view model =
^^^^^
Think of a more helpful name for one of them and you should be all set!

Note: Linters advise against shadowing, so Elm makes “best practices” the
default. Read https://elm-lang.org/0.19.0/shadowing for more details on this
choice.

– SHADOWING ------------------------------------------ 04_Architected_hello.elm

The name model is first defined here:

30| model =
^^^^^
But then it is defined AGAIN over here:

43| update model msg =
^^^^^
Think of a more helpful name for one of them and you should be all set!

Note: Linters advise against shadowing, so Elm makes “best practices” the
default. Read https://elm-lang.org/0.19.0/shadowing for more details on this
choice.

My code is below:

module ArchitectedHello exposing (Model, Msg(…), main, model, update, view)

import Browser exposing (sandbox)
import Html exposing (…)
import Html.Attributes exposing (style)
import Html.Events exposing (onClick)

main =
Browser.sandbox
{ init = { text = “” }
, view = view
, update = update
}

– This is what our model should look like

type alias Model =
{ text : String }

– Only need one kind of message

model : Model
model =
{ text = “Hello World” }

type Msg
= Text

– Update function only has to worry about one possible case

update : Msg -> Model -> Model
update msg model =
case msg of
Text ->
{ model | text = model.text ++ “!” }

–View

view : Model -> Html Msg
view model =
div []
[ div [] [ text model.text ]
, button [ onClick Text ] [ text “Add exclamation mark” ]
]

[pateh]

Welcome to the Elm community! I’m sorry that example is causing difficulties, the error you’re seeing is due to variable shadowing, it was removed with the Elm 0.19 release because it can lead into situations that are more difficult to reason about.

In that example code it first defines a model variable here

model : Model
model =
{ text = “Hello World” }

But then in the update function it is also trying to define a model variable here

update : Msg -> Model -> Model
update msg model =

The compiler barks about this because it isn’t really clear which model variable should be used inside the update function, and using the wrong model could be a bug in the code.

There are some more details on the error on the link in the error message: https://elm-lang.org/0.19.0/shadowing

I ported that example code over to Elm 0.19 and put it up on Ellie to show it https://ellie-app.com/4XKnfG3fLdGa1

Also, check out the Elm slack if you aren’t already a member, https://elmlang.herokuapp.com/, paired with Ellie it is great for quicker responses on questions like this!

[pdamoc]

Hi, BSperl, and welcome to the Elm community.

Some old examples use global names for things that are later used as parameters.

Shadowing can lead to weird bugs where you think you are referring to one thing but end up with another due to shadowing.

My preferred solution for your context is to rename the global value (in this case the global model can become initialModel).

In some other contexts, it might be better to add an underline at the end of the name of some parameter. (e.g. turn model into model_) but in your case the better way is to change the global name.

[BSperl]

Thank you both! I got it working.