TypeError: Object(...) is not a function

I am experimenting with DAML model and React.js UI and ran into an issue.

I have the following DAML Model deployed in Dar file

template Network
   with
    operator : Party
   where
    signatory operator
    controller operator can 
     nonconsuming InviteHealthClinic : ContractId HealthClinicInvitation
       with 
         healthClinic : Party
       do
         create HealthClinicInvitation with healthClinic, operator
     nonconsuming InviteCitizen : ContractId CitizenInvitation
       with 
         citizen : Party
       do
         create CitizenInvitation with citizen, operator

I also adjusted the Template-UI Report,Js to the following React code:

 import React from "react";
 import Contracts from "../../components/Contracts/Contracts";
 import { useStreamQuery, useExercise } from "@daml/react";
 import { Network } from "@daml2js/covid-19-0.0.1/lib/Main";
 
 export default function Report() {
 
   const assets = useStreamQuery(Network);
   const exerciseInviteHealthClinic = useExercise(Network.InviteHealthClinic);
   const exerciseInviteCitizen = useExercise(Network.InviteCitizen);
 
   return (
     <
       <Contracts
         contracts={assets.contracts}
         columns={[
           ["ContractId", "contractId"],
           ["Operator", "payload.operator"]
         ]}
 
        actions={[
          ["InviteHealthClinic", (c, healthClinic) = { exerciseInviteHealthClinic(c.contractId, healthClinic); }, "HealthClinic"],
          ["InviteCitizen", (c, citizen) = { exerciseInviteCitizen(c.contractId, citizen); }, "Citizen"]
         
         ]}
       /
     </
   );
 }

I have no compiling errors in VS but on my page I get the following errors when running in a local environment

TypeError: Object(…) is not a function

     6 | export default function Report() {   
     7 |    
     8 |   const assets = useStreamQuery(Network);
>   9 |   const exerciseInviteHealthClinic = useExercise(Network.InviteHealthClinic);  
   10 |   const exerciseInviteCitizen = useExercise(Network.InviteCitizen);  
   11 |  
   12 |   return (

Any suggestions for a resolution ?

Hey Bart, welcome to the forums!

What version of the SDK are you on? And what versions of @daml/types, @daml/ledger and @daml/react do you have in your package.json?

It looks like you’re on a pre-1.0.0 version, I suspect some mismatch in the libraries being used.

Here is the requested detail.

DAML SDK versions:
0.13.54
0.13.55
1.0.0
1.0.1 (project SDK version from daml.yaml)

Package.json from UI folder

{
“name”: “covid19-js”,
“version”: “0.0.1”,
“private”: true,
“dependencies”: {
“@daml/ledger”: “1.0.0”,
“@daml/react”: “1.0.0”,
“@daml/types”: “1.0.0”,
“@daml2js/covid-19-0.0.1”: “file:…/daml2js/covid-19-0.0.1”,
“@material-ui/core”: “^4.3.0”,
“@material-ui/icons”: “^4.2.1”,
“@material-ui/styles”: “^4.3.0”,
“@typescript-eslint/parser”: “^2.6.0”,
“classnames”: “^2.2.6”,
“eslint”: “^6.6.0”,
“eslint-config-prettier”: “^6.10.0”,
“eslint-config-react-app”: “^5.2.0”,
“eslint-plugin-prettier”: “^3.1.2”,
“jsonwebtoken”: “^8.5.1”,
“react”: “^16.12.0”,
“react-dom”: “^16.12.0”,
“react-json-view”: “^1.19.1”,
“react-router-dom”: “^5.0.1”,
“react-scripts”: “3.4.0”,
“tinycolor2”: “^1.4.1”,
“uuid”: “^3.3.3”
},

“resolutions”: {
“//set-value”: “^2.0.1”,
“//mixin-deep”: “^1.3.2”
},

“scripts”: {
“start”: “react-scripts start”,
“build”: “react-scripts build”,
“test”: “react-scripts test”,
“eject”: “react-scripts eject”,
“lint”: “eslint --ext .js,.jsx,.ts,.tsx --max-warnings 0 src/”
},

“eslintConfig”: {
“extends”: “react-app”
},

“browserslist”: {
“production”: [
“>0.2%”,
“not dead”,
“not op_mini all”
],

"development": [
  "last 1 chrome version",
  "last 1 firefox version",
  "last 1 safari version"

]

},
“proxy”: “http://localhost:7575/”
}

It appears there is a mismacth from DAML (1.0.1) and UI (mostly 1.0.0)
I will try to recompile my DAML file with 1.0.0 SDK version

I believe useExercise has been removed in v1.0.0. You should use:

const ledger = useLedger();
ledger.exercise(MyTemplate.MyChoice, contractId, arg);

If you have upgraded from a pre-1.0.0 version of the UI, I suggest to remove all generated code as well as your node_modules directories and do a fresh install of everything. Note that for installing the JS libraries in a particular version you can use yarn install @daml/ledger@1.0.1.

Thanks.

I updated the React code and updated the dependencies and the UI was now generated in my local environment but my Report or Default pages are blank.

Quick Questions:

1. Do you have sample React code to display all the Templates (like in the Navigator version)
2. Can a local environment be supported with a local database ?
3. Since I am using SDK 1.0.1 is my assumption correct this will not work (yet) with Project Dabble. For it to work in project Dabble I would have to downgrade back to SDK 0.13.55

Hi @bartcant, linking here to answers to questions (1) and (2) for anyone who stumbles on this thread in the future

DABL is on 0.13.55 and is expected to support 1.0.x shortly.

To answer some of your questions:

1. Using the react hooks there is no way to get all contracts regardless of template. You always need to specify the template you want to fetch contracts for.

2. Today I’ve successfully deployed and run a v1.0.1 app (DAML + UI) on DABL. So it should already work although versions >0.13.55 are not officially supported there yet.

Great news on Dabble support for SDK 1.0.1 . I will give it a try.
I was dreading to downgrade the model and SDK back to 0.13.55