# Elm-spa-example port invocation in init method

**URL:** <https://discourse.elm-lang.org/t/elm-spa-example-port-invocation-in-init-method/4672>\
**Category:** Learn\
**Created:** [November 14, 2019, 10:11am UTC](https://discourse.elm-lang.org/t/elm-spa-example-port-invocation-in-init-method/4672 "2019-11-14T10:11:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Nikolis\_Galerakis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nikolis_galerakis/32/2479_2.png) [@Nikolis\_Galerakis](https://discourse.elm-lang.org/u/Nikolis_Galerakis)\
**Post date:** [November 14, 2019, 10:11am UTC](https://discourse.elm-lang.org/t/elm-spa-example-port-invocation-in-init-method/4672/1 "2019-11-14T10:11:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dmy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dmy/32/702_2.png) [@dmy](https://discourse.elm-lang.org/u/dmy)\
**Post date:** [November 14, 2019, 11:14am UTC](https://discourse.elm-lang.org/t/elm-spa-example-port-invocation-in-init-method/4672/2 "2019-11-14T11:14:26Z")

</div>

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:

```auto
diff --git a/elm.json b/elm.json
index 9f4d9f0..7384334 100644
--- a/elm.json
+++ b/elm.json
@@ -3,7 +3,7 @@
     "source-directories": [
         "src"
     ],
- "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

```

---

<div class="post-metadata">

**Author:** ![Nikolis\_Galerakis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nikolis_galerakis/32/2479_2.png) [@Nikolis\_Galerakis](https://discourse.elm-lang.org/u/Nikolis_Galerakis)\
**Post date:** [November 14, 2019, 11:24am UTC](https://discourse.elm-lang.org/t/elm-spa-example-port-invocation-in-init-method/4672/3 "2019-11-14T11:24:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Nikolis\_Galerakis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/nikolis_galerakis/32/2479_2.png) [@Nikolis\_Galerakis](https://discourse.elm-lang.org/u/Nikolis_Galerakis)\
**Post date:** [November 14, 2019, 12:10pm UTC](https://discourse.elm-lang.org/t/elm-spa-example-port-invocation-in-init-method/4672/4 "2019-11-14T12:10:11Z")

</div>

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.

---

<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:** [November 24, 2019, 12:10pm UTC](https://discourse.elm-lang.org/t/elm-spa-example-port-invocation-in-init-method/4672/5 "2019-11-24T12:10:18Z")

</div>

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