Help with Package.json for the UI

Questions
1

I am trying to migrate an old project, The old project is daml 1.6 and when i tried to build it threw some error related to my machine being Mac M1, so i changed the daml version in yaml file to 1.17, so that i can still use the same UI. I need some guidance on how to migrate the UI, the original package.json file was

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@daml.js/test-0.0.1": "file:../daml.js/test-0.0.1",
    "@daml/ledger": "1.6.0",
    "@daml/react": "1.6.0",
    "@daml/types": "1.6.0",
    "@material-ui/core": "^4.3.0",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/styles": "^4.3.0",
    "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",
    "tinycolor2": "^1.4.1"
  },
  "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",
  "devDependencies": {
    "@types/jsonwebtoken": "^8.5.0",
    "@types/react": "^16.9.36",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
    "@types/tinycolor2": "^1.4.2",
    "react-scripts": "^3.4.1",
    "typescript": "^3.9.5"
  }
}

I am currently using node version v20.2.0, i ran into a variety of issues with this json file which include issues related to

  • react error ui/node_modules/@types/babel__traverse/index.d.ts(68,50): ‘]’ expected. TS1005 link
  • Component with WithStyles cant be imported as JSX link
  • Issue with using Box element from Material UI : ‘Box’ cannot be used as a JSX component.
    Its element type ‘ReactElement<any, any> | Component<BoxProps, any, any> | null’ is not a valid JSX element.

I think changing the package.json to mimic the daml-ui-template, and using its yarn.lock, might have solved these problems. This is the new package.json am using

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@daml.js/test-0.0.1": "file:../daml.js/test-0.0.1",
    "@daml/ledger": "1.6.0",
    "@daml/react": "1.6.0",
    "@daml/types": "1.6.0",
    "@material-ui/core": "^4.3.0",
    "@material-ui/icons": "^4.2.1",
    "@material-ui/styles": "^4.3.0",
    "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",
    "tinycolor2": "^1.4.1"
  },
  "resolutions": {
    "**/**/set-value": "^2.0.1",
    "**/**/mixin-deep": "^1.3.2",
    "**/@typescript-eslint/eslint-plugin": "^4.1.1",
    "**/@typescript-eslint/parser": "^4.1.1"
  },
  "scripts": {
    "start": "react-scripts --openssl-legacy-provider start",
    "build": "react-scripts --openssl-legacy-provider 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",
  "devDependencies": {
    "@types/jsonwebtoken": "^8.5.0",
    "@types/react": "^16.9.36",
    "@types/react-dom": "^16.9.8",
    "@types/react-router-dom": "^5.1.5",
    "@types/tinycolor2": "^1.4.2",
    "react-scripts": "^3.4.1",
    "typescript": "^4.2.3"
  }
}

Ok the main changes are around
“typescript”: “^4.2.3”
“start”: “react-scripts --openssl-legacy-provider start”,
“build”: “react-scripts --openssl-legacy-provider build”,
“/@typescript-eslint/eslint-plugin": “^4.1.1”,
"/@typescript-eslint/parser”: “^4.1.1”
“@daml/ledger”: “1.6.0”,
“@daml/react”: “1.6.0”,
“@daml/types”: “1.6.0”,

I am still running into issues, these are mainly related to existing ui code. But what is weird is its related to daml contracts. For eg. if there is a template A, with a field X of type optional party, then if i access the contract in the UI, and try to access the field via, contract.payload.X, then its type is [String] | [], which doesnt seem right. The existing UI code is expecting String | Null. So I am thinking this has to do with some mistake i am making in package.json.

Do you have any idea what i might be doing wrong?
Also is there any recommendation on how to update the package.json, when i change the daml version, should i use the same version for @daml/ledger, @daml/react, @daml/types

2

Yes, you must. The codegen version, determined by your daml.yaml, produces code that expects your @daml/* libraries to have a matching version. I don’t know how many of your issues are down to that, and neither of these versions are community-supported anymore, but it’s likely at least some things will improve.