Elm-spa-example port invocation in init method

Hello all,

I am working with the elm-spa-example and currently what I wanted to achieve is actually invoke a port
function in the init method of the Login Page.

When I add the invocation to the init method of the Login page and browsed to the Login page it looks like it’s not called(For the time being I it’s just a simple console.log statement in the JavaScript side).

But When I browse to the Login page and hit refresh it looks like the invocation works perfectly.

Anybody had similar issue or do you see something obvious that I am missing here ?
Thank you

Do you have the source code and could you tell your browser version?

I just tested with the following diff and it works fine (log appears), both when browsing to Login or refreshing to it:

diff --git a/elm.json b/elm.json
index 9f4d9f0..7384334 100644
--- a/elm.json
+++ b/elm.json
@@ -3,7 +3,7 @@
     "source-directories": [
-    "elm-version": "0.19.0",
+    "elm-version": "0.19.1",
     "dependencies": {
         "direct": {
             "NoRedInk/elm-json-decode-pipeline": "1.0.0",
diff --git a/index.html b/index.html
index a8be6e5..2ca034a 100644
--- a/index.html
+++ b/index.html
@@ -26,6 +26,9 @@
       var flags = localStorage.getItem(storageKey);
       var app = Elm.Main.init({flags: flags});

+      app.ports.log.subscribe(function(str) {
+          console.log(str);
+      });
       app.ports.storeCache.subscribe(function(val) {

         if (val === null) {
diff --git a/src/Page/Login.elm b/src/Page/Login.elm
index 14974fa..ac7df41 100644
--- a/src/Page/Login.elm
+++ b/src/Page/Login.elm
@@ -1,4 +1,4 @@
-module Page.Login exposing (Model, Msg, init, subscriptions, toSession, update, view)
+port module Page.Login exposing (Model, Msg, init, subscriptions, toSession, update, view)

 {-| The login page.

@@ -77,10 +77,13 @@ init session =
             , password = ""
-    , Cmd.none
+    , log "init login"

+port log : String -> Cmd msg

 -- VIEW

1 Like

You are right testing with the latest version works for me as well in the login.
Maybe I am looking in the wrong direction and it’s about my webpack config somehow related.
I will try to test the example integrated in a phoenix project see if I can reproduce because it does not make any sense otherwise. I mean it still works for me if I refresh.

I am so sorry for wasting your time but I almost got insane and just figured out the problem
I am using a call back to load my elm app so that I know google recaptcha is loaded in advance.
window.onloadCallback = () => {
As it turns out the complete problem lied in the fact that somehow I had added a semicolon at the closing bracket. Deleting it fixed all weird behavior. I know I am somehow a newbie when it comes to front end staff but seriously WTF.

1 Like

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