Importing Daml Template To React

[rikotacards]

Previously, when I only had 1 .dar file, and ran my codgen script, and did npm install, when I am importing types into a react component, I was able to it quite neatly, as below, importing from the main @daml.js package.

When I have multiple .dar files, I only run the codegen script on the dar that imports the dependencies. But now it seems my imports look like this, is that normal? Do I have to import using the package IDs?

When I examin the daml.js file, Account-0.0.1 > lib > Account > module.d.ts, it seems that the asset is also being imported using the package ID.

pkg9a4b3aca4fdaf5d1dbcca764db53814394a59ba00a833450e7e07e8686031602.Asset.Asset

[rikotacards]

Would anyone be able to help me confirm that the below method is correct when dealing with multiple .dar files.

Previously, when all templates are in one .dar file, running something like the below once is good enough
daml codegen js .daml/dist/account-0.0.1.dar -o ../../ui/account.js

I now run it three times, for each of my dar files
daml codegen js .daml/dist/account-0.0.1.dar -o ../../ui/account.js
daml codegen js .daml/dist/user-0.0.1.dar -o ../../ui/user.js
daml codegen js .daml/dist/asset-0.0.1.dar -o ../../ui/asset.js

This generates three *.js files which can be used for importing on the react side.

in the package.json file in my ui directory, previously we just had
"@daml.js/daml": "daml.js/wallet-refapp-0.0.1",
But now I am making the three packages dependencies, so in the package.json file, I know use

"@account.js/account": "file:account.js/account-0.0.1",
 "@user.js/user": "file:user.js/user-0.0.1",
 "@asset.js/asset": "file:asset.js/asset-0.0.1",

This seems to fix the issue of the ugly import paths too.

[rikotacards]

I’m running into the issue now, where If I use
import { User } from ‘…/…/user.js/user-0.0.1/lib/User’;
import { Account } from ‘…/…/account.js/account-0.0.1/lib’;

I get the error, Module not found: You attempted to import ../../account.js/account-0.0.1/lib which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
Previously, we can import the types via @daml.js/…

Can’t seem to do that. Not sure if its because of my pacakge json, previously specified as
"@daml.js/wallet-refapp": "file:daml.js/wallet-refapp-0.1.0",

but now I have

"@account.js/account": "file:account.js/account-0.0.1", "@user.js/user": "file:user.js/user-0.0.1", "@asset.js/asset": "file:asset.js/asset-0.0.1",

the @account.js/account, the second part after the backslash, if I change to wallet-refapp, I get failures when trying to do npm install
npm WARN tar ENOENT: no such file or directory, open '/Users/maxhsu/Desktop/projects/wallet-refapp/ui/node_modules/.staging/@mui/lab-d8106284/internal/svg-icons/Pen.js'
for all files.

[rikotacards]

I played around with the codegen npm scope, doing things like
daml codegen js .daml/dist/account-0.0.1.dar -o ../../ui/account.js -s account.js

and I’m able to import using @ on the react side,
but now I get the below when I try to run npm start

Despite the error, the IDE can see what I"m trying to import

[Leonid_Rozenberg]

@rikotacards

daml codegen js takes a list of dar files as its first argument. I recommend running it once to generate a js lib for access to all of the dars that you want to on the UI. That will have the correct js references between each.

[rikotacards]

Thanks @Leonid_Rozenberg , I actually managed to fix all the imports just about now… but passing the dar files into the script is a lot easier, will update that. but I realized another issue.

… how do I run the app locally now, with separate dars? Previously I just do a daml start

[rikotacards]

When I pass all dar files into the script, I get the below, which seems correct, I can see my Account-0.0.1, Asset-0.0.1, User-0.0.1,

In my package.json, I"ve done

 "@daml.js/account": "file:daml.js/Account-0.0.1",
  "@daml.js/user": "file:daml.js/User-0.0.1",
  "@daml.js/asset": "file:daml.js/Asset-0.0.1",

Seems to be working.

[cocreature]

@rikotacards

… how do I run the app locally now, with separate dars? Previously I just do a daml start

Run daml start in the project that depends on the other DARs. If you don’t have one, you can create a dummy project which just depends on the others.

[rikotacards]

Follow up question, running locally, and having the frontend interact.

Currently with 3 separate dars, I pass the dars into the codgen js script, this ultimately generates my daml.js in the ui directory, upon which when I do npm install, it installs the types.
and in my package.json, I am importing the new js types. Now this is for deploying on daml hub.

To do this locally, you mentioned I create a dummy project.

In order to run daml start, I need to do daml build. So are you saying that create a new directory, I’ll call it localBuild
and in there, I’ll have a daml.yaml that imports the deps, eg

# for config file options, refer to
# https://docs.daml.com/tools/assistant.html#project-config-file-daml-yaml

sdk-version: 1.18.1
name: LocalBuild
source: daml
version: 0.0.1
dependencies:
  - ../Asset/asset.dar
  - ../User/user.dar
  - ../Account/account.dar

sandbox-options:
  - --wall-clock-time
  - --ledgerid=wallet-refapp-sandbox 

When I do daml build, that creates a new .daml file, with new dependency packages. These packages need to be installed in the frontend, but that means the js types are all different. Meaning I need to have a whole other set of imported JS types for a local build, and a build for daml hub? Or am I missing something, it seems kind of awkward.

[Leonid_Rozenberg]

@rikotacards

These packages need to be installed in the frontend, but that means the js types are all different. Meaning I need to have a whole other set of imported JS types for a local build, and a build for daml hub? Or am I missing something, it seems kind of awkward.

No. The dependencies are just that, and the data in the UI will be available via those packages. Your “grouping” project just loads them for the purposes of daml start.