Get Started tutorial does not work

App Development17 posts718 views3 likesLast activity Nov 2022

schwobiOP

Nov 2022

Hi all,

I’m trying to create the full-stack DAML app referring to Getting Started with Daml — Daml SDK 2.4.0 documentation.

I have created MessageList.tsx and MessageEdit.tsx, copy and pasted the code from the tutorial, however it shows me errors:

MessageList.tsx:
Property ‘Message’ does not exist on type ‘typeof import(“c:/Users/myuser/myapp/ui/node_modules/@daml.js/myapp/lib/User/index”)’.ts(2339)

Property ‘sender’ does not exist on type ‘{}’.ts(2339)
Property ‘receiver’ does not exist on type ‘{}’.
Property ‘content’ does not exist on type ‘{}’.ts(2339)

MessageEdit.tsx:

Property ‘SendMessage’ does not exist on type ‘Template<User, string, “3e79e02f8c408a0506afcd6348344977294486816a781d905515ecc0c131377b:User:User”> & ToInterface<User, never> & UserInterface’.ts(2339)

User.daml:

-- Copyright (c) 2022 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
-- SPDX-License-Identifier: Apache-2.0

module User where

-- MAIN_TEMPLATE_BEGIN
template User with
    username: Party
    following: [Party]
  where
    signatory username
    observer following
-- MAIN_TEMPLATE_END

    key username: Party
    maintainer key

    -- FOLLOW_BEGIN
    nonconsuming choice Follow: ContractId User with
        userToFollow: Party
      controller username
      do
        assertMsg "You cannot follow yourself" (userToFollow /= username)
        assertMsg "You cannot follow the same user twice" (notElem userToFollow following)
        archive self
        create this with following = userToFollow :: following
    -- FOLLOW_END


    nonconsuming choice SendMessage: ContractId Message with
        sender: Party
        content: Text
      controller sender
      do
        assertMsg "Designated user must follow you back to send a message" (elem sender following)
        create Message with sender, receiver = username, content  
                                                                 
                                      
-- ALIAS_BEGIN
template Alias with
    username: Party
    alias: Text
    public: Party
  where
    signatory username
    observer public

    key (username, public) : (Party, Party)
    maintainer key._1

    nonconsuming choice Change: ContractId Alias with
        newAlias: Text
      controller username
      do
        archive self
        create this with alias = newAlias
-- ALIAS_END

-- 
template Message with
    sender: Party
    receiver: Party
    content: Text
  where
    signatory sender, receiver

My environment:
SDK: 2.4.0
NodeJS version: v14.21.1
Yarn version: v1.22.19
OS: Windows

Could you please help me to fix the issues? Where can I find the complete example? I could not find it on Github. I thought, I could “cheat” with that

Thanks,
Schwobi

Gary_Verhaegen

Nov 2022

Have you re-run the codegen after modifying the User.daml file? If you have daml start running it should watch for file changes and run it automatically, but otherwise you can run it manually with daml codegen js from the project root (the folder that has the daml.yaml file).

Also make sure you have the User.daml file saved.

cocreature

Nov 2022

daml start does not watch for file changes automatically. You need to press r followed by Return in the terminal you started it for it to pick up the changes you made. Based on the error you get it seems like that’s the missing step.

schwobi

Nov 2022

Gary_Verhaegen:

daml codegen j

Hi Gary,

Files are saved. Daml start is running but tried daml codegen js manually as well, still facing

PS C:\myapp\ui> yarn start
yarn run v1.22.19
$ react-scripts start
[HPM] Proxy created: function (pathname, req) {
  // Proxy requests to the http json api when in development
  const proxied = pathname.match("^/v1") && process.env.NODE_ENV === "development";
Failed to compile.

C:/myapp/ui/ui/src/components/MessageEdit.tsx
TypeScript error in C:/myapp/ui/src/components/MessageEdit.tsx(29,48):
Property 'SendMessage' does not exist on type 'Template<User, string, "3e79e02f8c408a0506afcd6348344977294486816a781d905515ecc0c131377b:User:User"> & ToInterface<User, never> & UserInterface'.  TS2339

    27 |           }
    28 |           setIsSubmitting(true);
  > 29 |           await ledger.exerciseByKey(User.User.SendMessage, receiver, {sender, content});
       |                                                ^
    30 |           setContent("");
    31 |         } catch (error) {
    32 |           alert(`Error sending message:\n${JSON.stringify(error)}`);

cocreature

Nov 2022

If you are using yarn rather than NPM I believe you have to manually run yarn install after you reran the codegen.

schwobi

Nov 2022

Hi,

I did r+enter and then in the other terminal I have ‘yarn start’ again but still get the same error.

schwobi

Nov 2022

yarn install
yarn install v1.22.19
[1/4] Resolving packages...
success Already up-to-date.
Done in 0.72s.

yarn start gives me the same error.

yarn start
yarn run v1.22.19
$ react-scripts start
[HPM] Proxy created: function (pathname, req) {
  // Proxy requests to the http json api when in development
  const proxied = pathname.match("^/v1") && process.env.NODE_ENV === "development";
Failed to compile.
Failed to compile.

C:/myapp/ui/src/components/MessageEdit.tsx
TypeScript error in C:/Umyapp/ui/src/components/MessageEdit.tsx(29,48):
Failed to compile.

C:/myapp/ui/src/components/MessageEdit.tsx
TypeScript error in C:/myapp/ui/src/components/MessageEdit.tsx(29,48):
Failed to compile.

C:/myapp/ui/src/components/MessageEdit.tsx
TypeScript error in C:/myapp/ui/src/components/MessageEdit.tsx(29,48):
Property 'SendMessage' does not exist on type 'Template<User, string, "3e79e02f8c408a0506afcd6348344977294486816a781d905515ecc0c131377b:User:User"> & ToInterface<User, never> & UserInterface'.  TS2339

    27 |           }
    28 |           setIsSubmitting(true);
  > 29 |           await ledger.exerciseByKey(User.User.SendMessage, receiver, {sender, content});
       |                                                ^
    30 |           setContent("");
    31 |         } catch (error) {
    32 |           alert(`Error sending message:\n${JSON.stringify(error)}`);

schwobi

Nov 2022

Do you know, where can I find the source code for the tutorial related to SDK 2.4.0 presented on Getting Started with Daml — Daml SDK 2.4.0 documentation? I did not find it on Github. It would be great to have working solutions, which can be reviewed and tried out.

cocreature

Nov 2022

Please try these steps in this order:

Close any daml start or yarn start windows you still have open.
Make sure your User.daml file is saved and you added the SendMessage choice to the User template.
Run daml build
Run daml codegen js
From the ui directory run yarn install
Now you can run yarn start from the UI directory again
and daml start

schwobi

Nov 2022

Hi,

No success, still the same. I will try to do tomorrow everything from scratch, maybe I missed something.

Thanks,
Schwobi

cocreature

Nov 2022

The source is in daml/templates/create-daml-app at main · digital-asset/daml · GitHub. The changes for messaging only exist as a patch to that in daml/messaging.patch at ff194c379ec8489509774e5a2c6f2cda693b1bb8 · digital-asset/daml · GitHub. I don’t think the sources are the issue here. It sounds more like some commands got run in the wrong order.

Can you try using NPM like the tutorial describes and see if that works?

schwobi

Nov 2022

Do I need a special version of NPM?

npm -v
9.1.1
PS C:\myapp\ui> npm install
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: babel-jest@26.6.3
npm WARN Found: @babel/core@7.12.3
npm WARN node_modules/babel-jest/node_modules/@babel/core
npm WARN   peer @babel/core@"^7.0.0" from babel-preset-jest@26.6.2
npm WARN   node_modules/babel-jest/node_modules/babel-preset-jest
npm WARN     babel-preset-jest@"^26.6.2" from babel-jest@26.6.3
npm WARN     node_modules/babel-jest
npm WARN   3 more (babel-preset-current-node-syntax, ...)
npm WARN 
npm WARN Could not resolve dependency:
npm WARN peer @babel/core@"^7.0.0" from babel-jest@26.6.3
npm WARN node_modules/babel-jest
npm WARN   babel-jest@"^26.6.3" from jest-config@26.6.3
npm WARN   node_modules/jest-config

added 1 package, removed 9 packages, changed 95 packages, and audited 1695 packages in 24s
Failed to compile.

C:/myapp/ui/src/components/MessageEdit.tsx
TypeScript error in C:/myapp/ui/src/components/MessageEdit.tsx(29,48):
Property 'SendMessage' does not exist on type 'Template<User, string, "3e79e02f8c408a0506afcd6348344977294486816a781d905515ecc0c131377b:User:User"> & ToInterface<User, never> & UserInterface'.  TS2339

    27 |           }
    28 |           setIsSubmitting(true);
  > 29 |           await ledger.exerciseByKey(User.User.SendMessage, receiver, {sender, content});
       |                                                ^
    30 |           setContent("");
    31 |         } catch (error) {
    32 |           alert(`Error sending message:\n${JSON.stringify(error)}`);

cocreature

Nov 2022

iirc NPM 9 has some issues, try NPM 8 (shipped with node 18)

schwobi

Nov 2022

I’ve found in some other discuss post that nodeJS 14 or 16 is recommended for DAML.

I’ve installed NPM version to 6.14.17 which is the default version for NodeJS 14.21.1 based on Previous Releases | Node.js. It seems to be fine, however it still does not work:

If I check the source code, I got new errors in MessageEdit.tsx:

JSX element type ‘Form’ does not have any construct or call signatures.ts(2604)

JSX element class does not support attributes because it does not have a ‘props’ property.ts(2607)
‘Button’ cannot be used as a JSX component.
Its instance type ‘Button’ is not a valid JSX element.
Type ‘Button’ is missing the following properties from type ‘ElementClass’: render, context, setState, forceUpdate, and 3 more.ts(2786)

MessageList.tsx:
JSX element type ‘List’ does not have any construct or call signatures.ts(2604)

Could you please tell me the exact version (nodeJS, NPM) you’re using and this example works?

Thanks!

schwobi

Nov 2022

I could resolve it.

Stack for the tutorial example:

SDK: 2.4.0
NodeJS: v16.18.1
NPM: 8.19.2

It would be good, if the official webpage would be updated with that.

I spent two days “getting started” with DAML…

cocreature

Nov 2022

Sorry that it took so long but glad you figured it out!

ontansel

Nov 2022

Thanks, this saved me a lot of time and frustration.

← Back to Discussions