Cannot find module 'react' or its corresponding type declarations

Questions
1

I’ve been working on the DAML side of things for quite a while so can’t remember what my last set of steps were regards the UI side now that it’s time for me to start working on the front-end.

I have a UI folder and the .tsx files are all there with the sample React code. The package.json file also contains the references to the React modules, but I am getting the error

Cannot find module 'react' or its corresponding type declarations.
Cannot find module 'react-dom' or its corresponding type declarations.

I tried running yarn install --force from the UI directory but got an error saying

command not found: yarn

I don’t know the NPM way to do this? I cant find any reference for this in the documentation(?)
Any help please?

1 Like
2

Did you start from a template, or are you building your UI from scratch? If you started from create-daml-app, i.e. using a command along the lines of

daml new --template-name=create-daml-app my-project

the generated README should tell you the NPM steps:

cd ui
npm install
npm run-script build

This requires a fairly recent version of NPM, though I don’t remember the specific version number right now.

For reference, here is the package.json generated by the above command with the latest Daml SDK version (1.15.0):

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@daml.js/my-project": "file:daml.js/my-project-0.1.0",
    "@daml/ledger": "1.15.0",
    "@daml/react": "1.15.0",
    "@daml/types": "1.15.0",
    "jwt-simple": "^0.5.6",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "dotenv": "^8.2.0",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^0.88.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --testURL='http://localhost:7575'",
    "eject": "react-scripts eject",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx 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"
    ]
  },
  "devDependencies": {
    "@types/jwt-simple": "^0.5.33",
    "@types/react": "^16.9.16",
    "@types/react-dom": "^16.9.4",
    "@types/dotenv": "^8.2.0",
    "http-proxy-middleware": "^1.0.4",
    "react-scripts": "^4.0.3",
    "typescript": "~3.8.3"
  }
}

Based on your error messages, it looks like you may be missing the devDependencies related to React types.

Can you confirm whether you see this error message on a brand new project? If not, does comparing your package.json to the one above offer any insight?

3

Aha, it seems I had missed those NPM commands. Thank you.

By the way, should daml start be invoked from the UI directory or from the top level of the app?
I’m getting the following error when loading up localhost:7575 in the browser now

{"errors":["HttpMethod(GET), uri: http://localhost:7575/"],"status":404}

4

daml start should be called from the folder containing daml.yaml, which in the default template is the root of the project. The process we expect to be running on localhost:7575 is the JSON API, so if you’re getting an error there it’s worth looking closely at the daml start output for any information regarding what happened.

The lines that indicates successful startup of the JSON API look like:

04-08-2021 12:09:15.213 [main] INFO  com.daml.http.Main - Config(ledgerHost=localhost, ledgerPort=6865, address=127.0.0.1, httpPort=7575, portFile=None, packageReloadInterval=5 seconds, packageMaxInboundMessageSize=None, maxInboundMessageSize=4194304, tlsConfig=TlsConfiguration(false,None,None,None,REQUIRE,false,List()), jdbcConfig=None, staticContentConfig=None, allowNonHttps=true, accessTokenFile=None, wsConfig=None, nonRepudiationCertificateFile=None, nonRepudiationPrivateKeyFile=None, nonRepudiationPrivateKeyAlgorithm=None) , context: {instance_uuid: "2ad306f2-6bc5-4950-843f-4d489ded5f3b"} 
04-08-2021 12:09:15.525 [http-json-ledger-api-akka.actor.default-dispatcher-4] INFO  akka.event.slf4j.Slf4jLogger - Slf4jLogger started  
04-08-2021 12:09:15.696 [http-json-ledger-api-akka.actor.default-dispatcher-9] INFO  com.daml.http.HttpService - HTTP Server pre-startup , context: {instance_uuid: "2ad306f2-6bc5-4950-843f-4d489ded5f3b"} 
04-08-2021 12:09:16.035 [http-json-ledger-api-akka.actor.default-dispatcher-9] INFO  com.daml.http.LedgerClient$ - Attempting to connect to the ledger localhost:6865
 (attempt 1/600)  
04-08-2021 12:09:17.025 [http-json-ledger-api-akka.actor.default-dispatcher-5] INFO  com.daml.http.LedgerClient$ - Attempting to connect to the ledger localhost:6865
 (attempt 1/600)  
04-08-2021 12:09:17.038 [http-json-ledger-api-akka.actor.default-dispatcher-5] INFO  com.daml.http.HttpService - Connected to Ledger: create-daml-app-sandbox , context: {instance_uuid: "2ad306f2-6bc5-4950-843f-4d489ded5f3b"} 
04-08-2021 12:09:17.039 [http-json-ledger-api-akka.actor.default-dispatcher-5] INFO  com.daml.http.HttpService - contractDao: None , context: {instance_uuid: "2ad306f2-6bc5-4950-843f-4d489ded5f3b"} 
04-08-2021 12:09:17.791 [http-json-ledger-api-akka.actor.default-dispatcher-4] INFO  com.daml.http.PackageService - new package IDs loaded: bfcd37bd6b84768e86e432f5f6c33e25d9e7724a9d42e33875ff74f6348e733f, 518032f41fd0175461b35ae0c9691e08b4aea55e62915f8360af2cc7a1f2ba6c, cc348d369011362a5190fe96dd1f0dfbc697fdfd10e382b9e9666f0da05961b7, 6839a6d3d430c569b2425e9391717b44ca324b88ba621d597778811b2d05031d, 99a2705ed38c1c26cbb8fe7acf36bbf626668e167a33335de932599219e0a235, 76bf0fd12bd945762a01f8fc5bbcdfa4d0ff20f8762af490f8f41d6237c6524f, e22bce619ae24ca3b8e6519281cb5a33b64b3190cc763248b4c3f9ad5087a92c, d58cf9939847921b2aab78eaa7b427dc4c649d25e6bee3c749ace4c3f52f5c97, e98753e360b3ef8059a6b8ea6327d0d8e0659e2ce10efceddebee69a40db9f86, 6b1e0a26d50ad8a8fa53cff7c9543512b6e127925635d6e5ae6bd668debfd3ed, 8a7806365bbd98d88b4c13832ebfa305f6abaeaf32cfa2b7dd25c4fa489b79fb, c1f1f00558799eec139fb4f4c76f95fb52fa1837a5dd29600baa1c8ed1bdccfd, 733e38d36a2759688a4b2c4cec69d48e7b55ecc8dedc8067b815926c917a182a, 6c2c0667393c5f92f1885163068cd31800d2264eb088eb6fc740e11241b2bf06, 4c168d715d9e6281622ae87eabfc02f707a1b2c3857dcc0c6c4624fa51ddf234, d14e08374fc7197d6a0de468c968ae8ba3aadbf9315476fd39071831f5923662, 057eed1fd48c238491b8ea06b9b5bf85a5d4c9275dd3f6183e0e6b01730cc2ba, e491352788e56ca4603acc411ffe1a49fefd76ed8b163af86cf5ee5f4c38645b, 40f452260bef3f29dede136108fc08a88d5a5250310281067087da6f0baddff7, 97b883cd8a2b7f49f90d5d39c981cf6e110cf1f1c64427a28a6d58ec88c43657 , context: {instance_uuid: "2ad306f2-6bc5-4950-843f-4d489ded5f3b"} 
04-08-2021 12:09:18.566 [http-json-ledger-api-akka.actor.default-dispatcher-4] INFO  com.daml.http.Main - Started server: ServerBinding(/127.0.0.1:7575) , context: {instance_uuid: "2ad306f2-6bc5-4950-843f-4d489ded5f3b"}
1 Like
5

There don’t appear to be any issues in starting up DAML itself. This was started from where the .yaml file is located

Screenshot 2021-08-04 at 14.30.40
Screenshot 2021-08-04 at 14.30.401920×1022 271 KB

1 Like
6

:man_facepalming: Sorry!

You are getting a 404 response, which means the JSON API is actually up and running. If it weren’t, you’d be getting a connection error instead.

It is actually expected that / on the JSON API returns a 404. The issue is not with the JSON API but with the code calling it, presumably your frontend code. It should be accessing specific endpoints like http://localhost:7575/v1/query.

Without seeing your frontend code it’s hard to give you more meaningful guidance.

1 Like
7

And :man_facepalming: again: you’re not running your frontend code at all. Let me back up a bit.

npm run-script build is not actually what you want here. That command is for building a “deployable bundle”, for production deployments. What you want for development is npm start, run from the ui folder. That will start a web server on http://localhost:3000, which will be running your UI code. That UI code will then be making requests to http://localhost:7575 with the correct paths, and you should not get 404’s anymore.

1 Like
8

LOL.

OK, it’s working now, thank you, but the documentation does not make this clear at all!

(I know there’s some reference to this in the example app, but I did that tutorial months ago)

1 Like