Historical errata for Programming Elm

“One word of caution. The record update syntax might sound familiar to a
function like Object.assign in JavaScript that lets you merge together different
JavaScript objects. ”

Did you mean to use the word “similar” instead of “familiar” hear? e.g.

“One word of caution. The record update syntax might sound similar to a
function in JavaScript that lets you merge together different
JavaScript objects (e.g. Object.assign). ”

The header says “The Elm Architecture Lifecyle” I believe you meant “The Elm Architecture Life Cycle”

Not sure if this is a typo or not but the saveNewComment function appears to have been added prematurely (without explanation). The reader is then instructed to add the function on page: 57

At the end you find “For the Nothing branch, we provide an empty text node if in order to satisfy the compiler.” - should the “if” be removed?

“Let’s recap you accomplished in this section”.
I’d assume there’s a “what” missing in this sentence

“When you upload files with a file input, the DOM adds every selected filed to the input’s files property” - should probably read “every selected file”

person name other = sayHello “Hi” other " My name is " name “.”

should be

person name other = sayHello “Hi” other " My name is " name “.”

missing concation between “Hi” and other

This is from: Chapter 1. Get Started with Elm • 6

There is a typo in the sample code at the bottom of the page.

Currently reads:
> person name other = sayHello “Hi” other " My name is " name “.”

Correct code should read:
> person name other = sayHello other " My name is " name “.”

Bottom of the page, when importing the photoDecoder into elm-repl, if I am not mistaken we have to expose it first in the elm file, by putting at the top:
module Picshare exposing (main, photoDecoder)

Has the updateFeed function been updated to use toggleLike and updateComment? It looks like it’s using updatePhoto which I can’t find in the book

“Let’s viewAnimalList’s arguments to isolate it from selected animal changes.”

Seems like a word is missing after “Let’s” and before “viewAnimalList’s” from the sentence.

GREAT BOOK!!!
Thank you so much!

This is just a suggestion.
I suggest that you add the chapter number to the folder name of the code. Like this.
01-get-started/elm-files/Main01.elm

Why? Because, when you download the code for the book, you start looking at the code. Of cause. By adding the chapter number, it gets easier to look at the code in order of difficulty. I mean how advanced it is. This is useful because you are building a more and more advance app as you read through the chapters.

I did it myself and I believe it helped.

Then allow me to thank you for writing this book and making it available through this beta program. There are so few Elm resources currently available. I have read the elm-introduction, but was frustrated and missing something. You explain well the import of Html modules and you step wise approached makes it easier to understand. I even think I understand Html better because of this. Example, “class” is an Html Attribute.

I also appreciate that you early on in the examples introduces styling and CSS. This is in particular, something I have been missing in other Elm resources.

I look forward to receive the remaining content of the book. I can hardly wait. :-) Type as fast as you can.

Best regards,
Finn

it seems (well actually I tested my assumption), that the case expression in the update function does not make any sense anymore.

so update can become

```elm
update : Msg -> Model -> Model
update msg model =
{ model | liked = not model.liked }
```

oops my error in the erratum

it seems (well actually I tested my assumption), that the case expression in the update function does not make any sense anymore.

so update can become

```elm
update : Msg -> Model -> Model
update _ model =
{ model | liked = not model.liked }
```—Robert Dober

Wen run “npm start” for the salad example i have this error:
npm start

> @ start /private/tmp/salad-builder
> elm-app start

/private/tmp/salad-builder/node_modules/create-elm-app/scripts/start.js:23
const {
^

SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:387:25)
at Object.Module._extensions..js (module.js:422:10)
at Module.load (module.js:357:32)
at Function.Module._load (module.js:314:12)
at Function.Module.runMain (module.js:447:10)
at startup (node.js:140:18)
at node.js:1001:3

npm ERR! Darwin 17.5.0
npm ERR! argv “/usr/local/bin/node” “/usr/local/bin/npm” “start”
npm ERR! node v5.6.0
npm ERR! npm v3.6.0
npm ERR! code ELIFECYCLE
npm ERR! @ start: `elm-app start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ start script ‘elm-app start’.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! elm-app start
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs
npm ERR! Or if that isn’t available, you can get their info via:
npm ERR! npm owner ls
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /private/tmp/salad-builder/src/npm-debug.log

The text says: […] visit Appendix A to install Elm on your system.

So I can not find that appendix in the book, where I find it?

Thanks

In intialModel, step should be “Building Nothing” instead of “Build Nothing”

In developing Single Page Applications, I believe the following topics are essential:
1. Session/token handling (login/logout)
2. Common Error handling in Main for errors occurring/arising from other Page components
Really looking forward to see how these are done in Elm. Thank you.

Hello there

I managed to get completely different numbers by using Firefox (v61).

For example:
fold and map vs foldMap; foldMap is a little more than 100% faster
fold and map vs. foldl; foldl is always ~43% slower

I get much different results by using Edge for example. Maybe you could let reades know which browser you’re using?

Thank you very much!

Cheers,
Christoph

“You would need to inspect the return value at runtime to determine what its type.”

Either the “what” should be removed or the sentence should end with “what its type is.”

The code example on this page is displaying the comment marks at the end of the highlighted/numbered lines.

it is not an error, but I would note that the order of arguments in the decode pipeline is relevant. Given the function

dog name ag = { name = name, age = age }

the following dogDecoder doesn’t make sense:

dogDecoder = decode dog \\
|> required “age” int \\
|> required “name” string

it results in the even more weired type:

: Json.Decode.Decoder { age : String, name : Int }

In the fourth paragraph, second sentence, the last word “argument” should be plural. It should say, “This type annotation doesn’t say that bottlesOf takes two arguments.”.

In the code for saveNewComment, it is possible to save a comment containing nothing but spaces. I would move the let expression to the top of the function in order to always trim the input. I would make the following change:

saveNewComment : Model -> Model
saveNewComment model =
let
comment = String.trim model.newComment
in
case comment of
“” ->
model
_ ->
{ model
| comments = model.comments [ comment ]
, newComment = “”
}

In the last paragraph, second sentence, there is an extra word “with” after the word “decoder”. It should say, “You created a photo decoder by calling the succeed function …”.

When you show the updated source for the main function near the top of the page, you show the init field having a value of init. At this point, it still has the value initialModel. You might want to highlight this difference along with the other 2 changes.

In the paragraph after the definition of init, second sentence, there is an extra word “chapter” after the word “previously”. It should say, “… so you will receive the unit type () that you’ve seen previously.”.

Second paragraph of Chapter 2, last sentence:

“Along the way, we’ll learn about records,
union types, and immutability, which are all important pieces in creating Elm
applications.”

In 0.19 “union type” was renamed to “custom type”, so it probably should be:

“Along the way, we’ll learn about records,
custom types, and immutability, which are all important pieces in creating Elm
applications.”

Also, Chapter 1’s printed page number is 25, Chapter 2 has no printed number, so I assume it to be 26, but the next page is 28. Where is page 27?

Something in the behaviour of the elm compiler may have changed. The book says “elm make src/Picshare.elm” - This command will compile “Picshare.elm” to “picshare.js”. Actually, the command (in elm 0.19.0) seems to directly patch “index.html” instead. All the code that used to be in “picshare.js” goes into the .html file directly. I am not sure how this is done (does “elm make” look for “index.html” files that pull in JavaScript files with expected names?) but this is what I can see happens.

I would suggest introducing type aliases already on page 36 to describe the Model.

type alias PhotoRecord = { url : String, caption : String, liked : Bool }

It’s easy to understand and makes the change of code easier overall.

Further to my suggestion to introduce type aliases on 36, also introduce the union type for Msg at once. Both together allow one to immediately make the program lighter, using a “PhotoRecord” and a “MyHtmlStructure” or something:

type alias PhotoRecord = { url : String, caption : String, liked : Bool }
type alias MyHtmlStructure = Html Msg

type Msg
= Like
| Unlike

viewDetailedPhoto : PhotoRecord -> MyHtmlStructure
viewDetailedPhoto model =
div [ class “detailed-photo” ]
[ img [ src model.url ] []
, div [ class “photo-info” ]
[ h2 [ class “caption” ] [ text model.caption ] ]
]

view : PhotoRecord -> MyHtmlStructure
view model =
div []
[ div [ class “header” ]
[ h1 [] [ text “Picshare” ] ]
, div [ class “content-flow” ]
[ viewDetailedPhoto model ]
]

initialModel : PhotoRecord
initialModel =
{ url = baseUrl “1.jpg”
, caption = “Surfing”
, liked = False
}

main : MyHtmlStructure
main =
view initialModel

My earlier erratum report was incomplete (but there isn’t any way to edit it)

On page 20, one is actually told to “elm make src/Picshare.elm —output picshare.js”

I missed this, with the result that “elm make” completely mysteriously replaces the existing “index.html” with a new “index.html” with embedded JavaScript, and no warnings. Took me some time to find out.

The fact that one has to add “—output picshare.js” should be made more noticeable.

The command “elm make —help” still says:

“This tries to compile an Elm file named src/Main.elm, putting the resulting JavaScript code in an elm.js file.”

which is completely wrong.

But in any case, I now get “Elm.Picshare.embed is not a function”, which means “Elm.Picshare.embed” cannot be found in “picshare.js”. What the hell.

“Elm.Picshare.embed is not function”

When one uses the provided “embedding HTML” for the picshare application, which pulls in the picshare.js, then embeds it using

One gets “Elm.Picshare.embed is not function” (since Elm 0.19? Not sure)

According to

ECHTEETEEPEEESS // guide.elm-lang.org / interop / (“To prevent spam, hyperlinks are not allowed in errate”; may I suggest hiring a mechanical turk from Bezos?)

the correct way is:

which indeed works. There is no “embed” in the generated picshare.js …

(Late update: I noticed that in the latest book version, the “init()” function is used. However, the downloadable code still uses “embed()”)

I feel that the refactored “viewLoveButton” is a bit “smelly” because deep down in the div tree, the instance “ToggleLike” comes a bit out of nowhere. This gives it the feel of “optimized” code that obscures a dependence on “ToggleLike”.

Suggestion is to pass in the “Msg” in all cases, even if it is (at this code iteration) a constant, to make the dependence on “ToggleLike” explicit at the point where “viewLoveButton” is called.

In the code below, I have also type-aliased “Html Msg” to “HtmlMsg”

viewLoveButton: Model -> Msg -> HtmlMsg
viewLoveButton model msg =
let
buttonClass =
if model.liked then
“fa-heart”
else
“fa-heart-o”
in
div [ class “like-button” ]
[ i
[ class “fa fa-2x”
, class buttonClass
, onClick msg
]
[]
]

and then at the call point, pass in “ToggleLike”:

viewDetailedPhoto : Model -> HtmlMsg
viewDetailedPhoto model =
div [ class “detailed-photo” ]
[ img [ src model.url ] []
, div [ class “photo-info” ]
[ viewLoveButton model ToggleLike
, h2 [ class “caption” ] [ text model.caption ]
]
]

I suggest to hand developer a tool: logging to the browser’s logging console, and this very early. It’s more fun when you see what’s going on.

Elm provides:

import Debug exposing (log) — h t t p s : package.elm-lang.org/packages/elm-lang/core/latest/Debug

Then we can do the following, on page 51, even earlier:

update: Msg -> PhotoStruct -> PhotoStruct
update msg model =
let
_ = log “Received ” msg
in
case msg of
ToggleLike -> { model | liked = not model.liked }

Opening the browser’s “web console” then allows us to view the receipt of a message.

viewCommentList comments =
case comments of
[] ->
text “”
_ ->
div [ class “comments” ]
[ ul []
(List.map viewComment comments)
]

0) The code for the empty list is not exercised as we start with a nonempty list
1) One has to really watch out that the “_” is aligned with the “[” otherwise the compiler throws an error (weird!)
2) I understand the demonstration of “_” (sadly, elm does not support Prolog-style “_X” throwaways), but wouldn’t it be nicer to link the matched value to the next call and write:

viewCommentList : List String -> HtmlMsg
viewCommentList comments =
case comments of
[] ->
text “”
any ->
div [ class “comments” ]
[ ul []
(List.map viewComment any)
]

In case an “only whitespace” comment is submitted (which is possible as “only whitespace” still enables the “save button”), one might want to reset the newComment to “”:

saveNewComment : Model -> Model
saveNewComment model =
let
comment = String.trim model.newComment
in
case comment of
“” -> { model | newComment = “” }
_ -> { model | comments = model.comments [ comment ], newComment = “” }

In “viewComments”, the SaveComment and UpdateComment constructors are hardcoded-in.

If one tries to softcode them (i.e. pass them in from the caller), one arrives at an interesting signature which makes clear a really important distinction between SaveComment (0-ary function resolving to Msg) and UpdateComment (1-ary function taking String, resolving to Msg). This could be used as for illustration:

For example (here I have rearranged the code into “viewCommentList” and “viewAddCommentForm” functions):

viewDetailedPhoto : Model -> HtmlMsg
viewDetailedPhoto model =
div [ class “detailed-photo” ]
[ img [ src model.url ] []
, div [ class “photo-info” ]
[ viewLoveButton model ToggleLike
, h2 [ class “caption” ] [ text model.caption ]
, div []
[ viewCommentList model.comments
, viewAddCommentForm model.newComment SaveComment UpdateComment — softcode messages
]
]
]

The following bring no surprises:

viewLoveButton : Model -> Msg -> HtmlMsg
viewLoveButton model msg =
let
buttonClass =
if model.liked then
“fa-heart”
else
“fa-heart-o”
in
div [ class “like-button” ]
[ i
[ class “fa fa-2x”
, class buttonClass
, onClick msg
]
[]
]

viewComment : String -> HtmlMsg
viewComment comment =
li []
[ strong [] [ text “Comment:” ]
, text (" " comment)
]

viewCommentList : List String -> HtmlMsg
viewCommentList comments =
case comments of
[] ->
text “”
any ->
div [ class “comments” ]
[ ul []
(List.map viewComment any)
]

But this one is now rather interesting as it takes two Msg which however are really of different type, one a 0-ary function resolving to Msg, one a 1-ary function resolving to Msg (still trying to get my head around that):

viewAddCommentForm : String -> Msg -> (String -> Msg) -> HtmlMsg
viewAddCommentForm newComment saveMsg updateMsg =
form [ class “new-comment”, onSubmit saveMsg ]
[ input
[ type_ “text”
, placeholder “Add a comment…”
, value newComment
, onInput updateMsg
]
[]
, button
[ disabled (String.isEmpty newComment) ]
[ text “Save” ]
]

I tried to proceed with the salad builder example. I’m using Windows 10 and I’m unable to install the npm packages.

Cheers,
Christoph

npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated graceful-fs@3.0.11: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js

> elmi-to-json@0.19.0 install C:\\Users\\chris\\Development\\programming_elm\\salad-builder\
ode_modules\\elmi-to-json
> binwrap-install

> elm@0.19.0 install C:\\Users\\chris\\Development\\programming_elm\\salad-builder\
ode_modules\\elm-webpack-loader\
ode_modules\\elm
> binwrap-install

C:\\Users\\chris\\Development\\programming_elm\\salad-builder\
ode_modules\\binwrap\\install.js:32
throw new Error(“No binaries are available for your platform: ” + buildId);
^

Error: No binaries are available for your platform: C:\\Users\\chris\\Development\\programming_elm\\salad-builder\
ode_modules\\elm-webpack-loader\
ode_modules\\elm\\unpacked_bin-win32
at install (C:\\Users\\chris\\Development\\programming_elm\\salad-builder\
ode_modules\\binwrap\\install.js:32:11)
at Object.install (C:\\Users\\chris\\Development\\programming_elm\\salad-builder\
ode_modules\\binwrap\\index.js:8:14)
at Object. (C:\\Users\\chris\\AppData\\Local\\Yarn\\Data\\global\
ode_modules\\binwrap\\bin\\binwrap-install:18:9)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:266:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:596:3)
npm WARN ajv-keywords@3.2.0 requires a peer of ajv^6.0.0 but none is installed. You must install peer dependencies yourself. npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents1.2.4 (node_modules\\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {os (current: {os

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! elm@0.19.0 install: `binwrap-install`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the elm@0.19.0 install script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Hi Jeremy, love your book. It’s great! Here a minor suggestion.

At the end of Chapter 4, it took me quite a while until I figured out why my picshare app didn’t work, despite compiling. Problem was, I forgot to delete ‘photoDecoder’ in exposing the module (code line 1). So I completely overlooked the hint to “Temporarily expose photoDecoder from Picshare.elm”.

My suggestion: a hint like “Don’t forget to delete photoDecoder” in the last paragraph of this section would have saved me like 45mins.

Kind regards,
Josef

“code/real-time/Picshare01.elm” is still 0.18, e.g. main

all Picshare.elm code files for chapter 5 are not working with Elm 0.19

I suggest to explicitly state in the book’s description that most of it is refering to elm 0.18.

IMO, this book is quite a disappointment. Yes, I know it’s a beta, but a pretty sloppy one. It’s especially annoying that it is not clearly stated that almost all chapters are still written for elm 0.18.

I find page 57 and 58 are two the most difficult pages to grasp until now.
I think it has something to do with “You can think of the ‘String’ value as the payload of this message”.

Suggestion 1:
Following that line, maybe you can add a drawing of a Msg ‘object’ or representation of it in memory with e.g. a box in a box: (outer box depicting Msg, inner box depicting payload, possibly yet another box in that one depicting String).

The type signature for “onInput” suggests (to me) that the string gets gobbled up by the constructor.
But later down the page you say that
“When a union type constructor receives its arguments, not only does it construct an instance of the union type, but it also holds on to its arguments.” which seems mind-boggling to me ;-) The type signature does not show a String type on the right hand side of the arrow(s) at all!

Suggestion 2:
Explain the ‘Attribute’ in the type signature for “onInput”, or explicitly defer an explanation for that.

Suggestion 3:
Because “it” can refer to two previous things in this sentence, change
“After Elm invokes our UpdateComment constructor function, it will have a message
value that it can then send to our update function.” to
into
“After Elm invokes our UpdateComment constructor function, Elm will have a message
value that it can then send to our update function.”

Suggestion 4:
Please add some nice drawings of the whole process of wiring up the DOM event handler, using the constructor, and updating the newComment field by means of sending the message to the update function by the Elm runtime like you did on page 45.

BTW: Great writing style! The books introduces Elm much gentler than the official docs. Tubular job!

There is change of Http.get API in elm/http 2.0 package.
fetchFeed function should look as follows.

fetchFeed : Cmd Msg
fetchFeed =
Http.get
{ url = baseUrl “feed/1”
, expect = Http.expectJson LoadFeed photoDecoder
}

elm/http has updated its API and no longer has a send function. I’m new to elm, but I believe that fetching the feed should look like:

fetchFeed : Cmd Msg
fetchFeed =
— Book code that doesn’t compile
— Http.get (baseUrl “feed/1”) photoDecoder
— |> Http.send LoadFeed
— This compiles
Http.get
{ url = baseUrl “feed/1”
, expect = Http.expectJson LoadFeed photoDecoder
}

Chapter 1 - Get started with Elm ( page 19 on PDF ), Use Functions as Building Blocks

> person name other = sayHello “Hi” other " My name is " name “.”

In order to get the desired result and avoid errors it should be written as :

> person name other = sayHello other " My name is " name “.”

I am not sure what happened, but when I compiled I still saw all three photos. I had to delete index.html and copy it again from code\\static-app and redo the REPLACE ME. Worked fine after that.

The book tells us to update the type annotation for the main variable with “main: Html Msg”, but updates are required for view and viewDetailedPhoto as well.

End of first line of the page: “The elm/browser and elm/html packages let you build applications for the browser.” “The” at the beginning of the sentence is styled as code.

On Preface * xxi it says:

> Online Resources
> You can visit this book’s web page to download the source code examples
> from this book as well as provide feedback through community forums
> and an errata-submission form.

But unless I am mistaken no such community forums are available (although that would be a valuable addition to discuss the technical content with other readers).

Notice the distinction here. The msg variable has a type of Msg but a value of
either Like or Unlike. You can see this as similar to how the liked variable has a type of Bool but a value of either True or False.

Line 2: “You need to install elm/json as a direct dependency to let your application code to use it.”

Looks like it was meant to be either “as a direct dependency to your application to use it” or “as a direct dependency to let your application code use it.”

Absolutely loving the book by the way. As a recently-turned-professional developer already, I was worried it might be a boring slog through “here’s how an if statement works” in an unfamiliar syntax. To the contrary, this is one of the most straight-to-the-point books I’ve ever purchased, and the level of assumed reader knowledge is just right (this is coming from someone who hasn’t written more than 10 or 15 lines of Javascript).

I’m getting this error when updating the fetchFeed method in chapter 5 (Fetch Multiple Photos):

‘The Http module does not expose a send variable.’

It looks like Http 2.0 no longer has the ‘send’ method.

The screenshot shows a different url (front-end-elm.surge.sh instead of programming-elm.surge.sh)

“Underneath viewSending, create a viewError function to display errors. Move only the case expression under else if model.building then to viewError:
viewError : Maybe Error -> Html msg viewError error =”

Won’t compile. viewError should take a “Maybe String” instead of “Maybe Error”.

Paragraph “In brief,…” has incorrect link to a later chapter: “[xxx](#chp.rea-time)”.

Hello, I am now on chapter 6 of your book. I just copied the code as mentioned, and run npm install and got error as you see in this gist (add https protocol, I removed it else I am not able to submit the post here) gist.github.com/aruprakshit/3a1930c94b7c34dc4c2ab1087792e505

Having installed Create Elm App v3.0.6 and followed the instructions on porting Picshare to it, when at step 8 I restart the development server, I get the following error message:

Failed to compile
./src/Picshare.elm

I cannot find module ‘Browser’.

Module ‘Picshare’ is trying to import it.

Potential problems could be:
* Misspelled the module name
* Need to add a source directory or new dependency to elm-package.json

I am confident that I did not make any errors in following the instructions.

On p. 92 there is a reference to Lom15, but the bibliography section seems to be missing.

The branch ‘else if model.building then …’ is missing

The markdown for the reference to the chapter on Websockets is not displaying correctly. It is in the second sentence of the third paragraph. It looks like this:

[xxx](#chp.real-time)

In the “errorMessage” function, about 2/3 down the page, the string output for the “Http.BadBody case is formatted differently from that of the ”_" case. The former is printed in blue text in italics, the latter has the words “Sorry” and “Please” emphasized and the rest of the sentence in plain text.

In

FlushStreamQueue -> ( { model
| feed = Maybe.map (() model.streamQueue) model.feed
, streamQueue = []
}
, Cmd.none )

the provided solution to map over model.feed for unwrapping the Maybe Feed only works if the feed is not a Nothing, that is, the current feed must be a Just for the code to work.

This snippet from the REPL illustrates this point:

> Maybe.map (() [“stream1”,“stream2”]) (Maybe.Nothing)
Nothing : Maybe (List String)

One would expect that the stream could find its way into the feed even though the feed was initially empty (aka Nothing).

To answer the question “How do I get the salad-builder example to run on Elm 0.19.1, Node 13.2 and Webpack 4?”, here is how I’ve done it (YMMV) - this assumes that you’ve used the new 0.19.1 installer at guide.elm-lang.org/install/elm.html
After copying the salad-builder files as per instructions, the following needs to be done:
In elm.json, update line 6 to read “elm-version”: “0.19.1”,
In package.json, remove line 28 (“elm”: “0.19.0-bugfix2”,)
I use npm-check-updates (its a useful tool to prevents having to hunt for new versions), if you dont have it then, (I’m using $ to how the terminal prompt):
$ npm i -g npm-check-updates.
With that installed, issue the following (using your terminal of choice) in the root of the salad-builder
$ ncu -u && npm i && npm audit fix
This updates all the packages in package.json, installs them locally and fixes the lodash audit issue
Then
$ npm i html-webpack-plugin@next
Update scripts/utils/formatElmCompilerErrors.js line 22 to read:
var ctx = new chalk.Instance({enabled: true});
Update config/webpack.config.dev.js line 258 to read:
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
Update config/paths.js line 58 to read:
elm: ‘elm’,
This should then allow you to run:
$ npm start
without issue

> The caption property` is `null` instead of a string,

This would be

> The `caption` property is `null` instead of a string

I’m unable to get npm start to work. I get the following error:

/1_Working/Dev_Web/www/sites/programming-elm/wwwroot/config/paths.js:23
const explorer = cosmiconfig(‘elmapp’);
^

TypeError: cosmiconfig is not a function

I tried reinstalling cosmiconfig, but it didn’t solve the problem

The source code for the SPA chapter does not work with Elm 0.19.1. Can’t get npm start to work. Please provide working source code. Thanks

I am being asked to import WebSockets which works on Elm 0.18.0 but browser does not work. When I upgrade Elm 0.19.0, WebSockets has been replaced with WebSocket Clients which makes the coding examples obsolete along with real-time/Picshare04.elm and so on.

Using Elm V0.19.1 , npm install do not work.
The solution presented in issue #86085 partially fixed the issue, but the server starts with an error.
For making the salad app to work, I also had to downgrade “react-dev-utils” to V10.1.0 in package.json .