Back to Questions
1.1k
views6
comments
Javascript 'Cannot read property '$0' of undefined' when using UI.Next.Router
websharperui.nextrouter

I am creating a SPA and want to use the router to change the URL. I have created a small sample based on the Websharper.UI.Next.Samples. The code compile fine but when I open the site and click on any link, I get the following javascript exception:

1
2
3
4
5
6
7
8
9
10
11

WebSharper: Uncaught asynchronous exception TypeError: Cannot read property '$0' of undefined
    at Object.$.Define.WebSharper.UI.Next.Routing.OnSelectSite (http://localhost:11388/Content/UINextRouterTest.min.js:11:38293)
    at http://localhost:11388/Content/UINextRouterTest.min.js:11:37007
    at Object.$.Define.WebSharper.UI.Next.Snap1.When (http://localhost:11388/Content/UINextRouterTest.min.js:11:41718)
    at sS (http://localhost:11388/Content/UINextRouterTest.min.js:11:48381)
    at http://localhost:11388/Content/UINextRouterTest.min.js:11:717
    at lZ (http://localhost:11388/Content/UINextRouterTest.min.js:3:22984)
    at http://localhost:11388/Content/UINextRouterTest.min.js:3:28046
    at nP (http://localhost:11388/Content/UINextRouterTest.min.js:3:26835)
    at Object.$.Define.WebSharper.Concurrency.Scheduler.$.Class.tick (http://localhost:11388/Content/UINextRouterTest.min.js:3:25412)
    at http://localhost:11388/Content/UINextRouterTest.min.js:3:25202

Can someone guide me on how to fix this issue?

The gist of the client.fs can be found here.

For convenience here's the gist copy pasted:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

namespace UINextRouterTest

open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI.Next
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Client

[<JavaScript>]
module Client =

    type PageTy = Home | About
    
    type Page =
     { mutable PageTy: PageTy
       mutable PageName: string
       mutable RouteId: RouteId }

    let HomePage go =
        Doc.Concat [
            h1 [text "Home"]
            p [ text "Blabla some stuff in the home" ]
            Doc.Link "link to go to about" [] (fun _ -> go About) ]
    
    let AboutPage go =
        Doc.Concat [
            h1 [text "About"]
            p [ text "Blabla about stuff about in the about" ]
            Doc.Link "link to go to home" [] (fun _ -> go Home) ]
    
    let unitRouteMap =
        RouteMap.Create (fun () -> []) (fun _ -> ())

    let HomeRouter =
        Router.Route unitRouteMap () (fun id v ->
            { PageTy = Home
              PageName = "Home"
              RouteId = id }
        )
    
    let AboutRouter =
        Router.Route unitRouteMap () (fun id v ->
            { PageTy = About
              PageName = "About"
              RouteId = id }
        )

    let SiteRouter =
        Router.Merge [
            Router.Prefix "home" HomeRouter
            Router.Prefix "account" AboutRouter
        ]
        
    let SetPageFor = function
        | Home -> { PageTy = Home
                    PageName = "Home"
                    RouteId = Unchecked.defaultof<_> }
        | About -> { PageTy = About
                     PageName = "Account"
                     RouteId = Unchecked.defaultof<_> }
    
    let Main =
        let router = Router.Install (fun pg -> pg.RouteId) SiteRouter
        let renderMain v =
            View.FromVar v
            |> View.Map (fun (pg: Page) ->
                match pg.PageTy with
                | Home -> HomePage (fun ty -> Var.Set v (SetPageFor ty))
                | About -> AboutPage (fun ty -> Var.Set v (SetPageFor ty))
            )
            |> Doc.EmbedView

        Doc.RunById "main" (renderMain router)
.

Kind of late but I revisited this router sample and figured out why it wasn't working. The problem was that I was creating routes with default value for the RouteId but never set the RouteId anywhere when it should be set when creating the routes.

Inpired from the UI.Next.Samples solution, here's the working code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

[<JavaScript>]
module Client =
    
    type Feature = { 
        mutable Page: Page
        Id: string 
        PageTy: PageTy
    }
    and Page = { 
        PageTy: PageTy
        PageName: string
        RouteId: RouteId 
    }
    and PageTy = Home | About

    let HomePage go =
        Doc.Concat [
            h1 [text "Home"]
            p [ text "Blabla some stuff in the home" ]
            Doc.Link "link to go to about" [] (fun _ -> go About) ]
    
    let AboutPage go =
        Doc.Concat [
            h1 [text "About"]
            p [ text "Blabla about stuff about in the about" ]
            Doc.Link "link to go to home" [] (fun _ -> go Home) ]
    
    let Main =
        let features = [
            {
                Id = "Home"
                PageTy = Home
                Page = Unchecked.defaultof<_>
            }
            {
                Id = "About"
                PageTy = About
                Page = Unchecked.defaultof<_>
            }]

        let router = 
            let makeRoute featureId ty feature =
                Router.Route (RouteMap.Create (fun () -> []) ignore) () (fun id v ->
                    let page = { PageTy = ty; PageName = featureId; RouteId = id }
                    // here we set the page of the feature to be able to
                    // set it on the rvRouter to change pages
                    feature.Page <- page
                    page)

            Router.Install
                (fun pg -> pg.RouteId)
                (features 
                 |> List.map (fun f -> Router.Prefix f.Id <| makeRoute f.Id f.PageTy f) 
                 |> Router.Merge)

        let renderMain v =
            let setPageFor ty features = 
                let get feat = 
                    match features |> List.tryFind (fun f -> f.Id = feat) with
                    | Some feature -> feature.Page
                    | None -> features |> List.find (fun f-> f.Id = "Home") |> fun x -> x.Page
            
                match ty with
                | Home -> get "Home"
                | About -> get "About"

            View.FromVar v
            |> View.Map (fun (pg: Page) ->
                match pg.PageTy with
                | Home -> HomePage (fun ty -> Var.Set v (setPageFor ty features))
                | About -> AboutPage (fun ty -> Var.Set v (setPageFor ty features))
            )
            |> Doc.EmbedView

        Doc.RunById "main" (renderMain router)
By on 10/21/2015 7:20 AM ()

Great, thanks!

By on 10/21/2015 7:21 AM ()

By on 8/11/2015 8:27 AM ()

I'm not quite sure what's going on here. The problem is obviously with the Unchecked.defaultof<_> being undefined at runtime but I checked the code on the sample site and that seems to be doing the exact same thing and it's working. I will look at this in more detail but for the time being you can use just RouteMap for the same thing:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

namespace UINextRouterTest

open WebSharper
open WebSharper.JavaScript
open WebSharper.JQuery
open WebSharper.UI.Next
open WebSharper.UI.Next.Html
open WebSharper.UI.Next.Client

[<JavaScript>]
module Client =

    type PageTy = Home | About

    let HomePage go =
        Doc.Concat [
            h1 [text "Home"]
            p [ text "Blabla some stuff in the home" ]
            Doc.Link "link to go to about" [] (fun _ -> go About) ]
    
    let AboutPage go =
        Doc.Concat [
            h1 [text "About"]
            p [ text "Blabla about stuff about in the about" ]
            Doc.Link "link to go to home" [] (fun _ -> go Home) ]
    
    let routeMap =
        RouteMap.Create
        <| function
            | Home -> []
            | About -> ["about"]
        <| function
            | [] -> Home
            | ["about"] -> About
            | _ -> failwith "404"

    let Main =
        let router = RouteMap.Install routeMap
        let renderMain v =
            View.FromVar v
            |> View.Map (fun pty ->
                let go= Var.Set v
                match pty with
                | Home -> HomePage go
                | About -> AboutPage go
            )
            |> Doc.EmbedView

        Doc.RunById "main" (renderMain router)

and on Try WebSharper.

By on 8/11/2015 5:41 AM ()

Thanks for the simpler code! I actually lifted the whole code from Site.fs.

I find the sample solution not very easy to understand. The Map is defined in the RoutedBobsleighSite.fs file but then passed to the Samples.Routed(...) function where the "focus" get lost. I would love it if someone could write a tutorial on UI.Next.Router, on how to install the router and define the routes!

In case you would want to reproduce the error, here's the complete step taken:

  1. Use with Visual studio 2013 Update 4 - Websharper v3.4.9 - Chrome v44.0.2403.130
  2. Create template UI.Next Single-Page-Application
  3. Replace Client.fs by snippet - Replace html body content with <div id="main"></div>
  4. Run and click on link should produce the error
By on 8/11/2015 8:38 AM ()

Yeah thanks, I could reproduce the error, and I understand why your code doesn't work but I don't see why the code on the sample site would work. Quite honestly I've never used Router myself yet, only RouteMap.

I agree that the samples are a bit too concise and could be made much more readable and easily understandable. We will work on this for the next release.

By on 8/11/2015 9:05 AM ()

    Topic tags

    IntelliFactory Offices Copyright (c) 2011-2012 IntelliFactory. All rights reserved.
    Home | Products | Consulting | Trainings | Blogs | Jobs | Contact Us | Terms of Use | Privacy Policy | Cookie Policy     		Built with WebSharper