TypeError: Cannot read properties of undefined (reading 'Name') in generated code

[benedictleejh]

I have been following https://github.com/AlexPeret/websharper-cookbook-tutorial to pickup WebSharper, but on 7.0.3.364-beta3 (and a different frontend framework instead of Bootstrap) to try out the new version. I ran into an issue with https://github.com/AlexPeret/websharper-cookbook-tutorial/blob/master/articles/cookbook-chapter-03.md where on accessing the /login endpoint, the console threw up the error TypeError: Cannot read properties of undefined (reading 'Name') .

Investigating the generated code, it seems to be caused by the following code:

const e=Get(fillWith);
  try {
    while(e.MoveNext())
      {
        const x=e.Current;
        fw.set_Item(x.Name, x);
      }
  }

in WebSharper.UI.Client.Templates.js in the InlineTemplate function. It seems like the enumerator does not stop on hitting the last element, and continues to enumerate, causing e.Current to be undefined, and throwing the error shown.

I have the code in https://github.com/benedictleejh/websharper-bug; doing

dotnet build
dotnet run --project .\WebSharperTutorial.FrontEnd\WebSharperTutorial.FrontEnd.fsproj

and accessing http://localhost:5000/login should be able to reproduce the bug. I have tested this on .NET 8.0.100 and 7.0.404.

I understand I am using a beta version (and not the intended version of .NET as well), so if you have already fixed this in a later beta, feel free to close this issue.

If there is any more information needed, do let me know.

Thank you.

[Jooseppi12]

@benedictleejh The problem is caused by the metro.js resource, as it is adding methods to the prototype, but not without specifying that they are not enumerable. This issue has come up previously:

olton/Metro-UI-CSS#1391

https://forums.websharper.com/topic/87068#87091

From the answers above, the following code could be applied in the client side code, so that the enumerator logic won't pick up the functions, that the above snippet defines.

JS.Inline "Object.defineProperties(Array.prototype, 
    {
        shuffle : { enumerable : false }, 
        clone : { enumerable : false }, 
        unique : { enumerable : false }, 
        from : { enumerable : false }, 
        contains : { enumerable : false }, 
    })" |> ignore

Also, I see you are using a client-server application, therefore I would recommend using the latest non-beta packages (WebSharper 6), as currently we are changing how we bundle up things for client-server applications (last steps before releasing WS7/WS8), leaving you in a state that won't work even if you apply the above code, to avoid issues with the enumerator.