# Importing Daml Template To React **URL:** \ **Category:** App Development\ **Tags:** daml\ **Created:** [April 14, 2022, 1:08am UTC](https://forum.canton.network/t/importing-daml-template-to-react/4335 "2022-04-14T01:08:59Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![rikotacards](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@rikotacards](https://forum.canton.network/u/rikotacards)\ **Post date:** [April 14, 2022, 1:08am UTC](https://forum.canton.network/t/importing-daml-template-to-react/4335/1 "2022-04-14T01:08:59Z")
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. ![Screenshot 2022-04-13 at 5.59.03 PM](https://canada1.discourse-cdn.com/flex028/uploads/daml/original/2X/b/bc83d49594ead373a7d62d4807a1d357c41b601e.png) 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? ![Screenshot 2022-04-13 at 5.57.05 PM](https://canada1.discourse-cdn.com/flex028/uploads/daml/original/2X/d/d30e3917b74c2415d580bff8627c029246edf5eb.png) 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` ---
**Author:** ![rikotacards](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@rikotacards](https://forum.canton.network/u/rikotacards)\ **Post date:** [April 14, 2022, 1:34am UTC](https://forum.canton.network/t/importing-daml-template-to-react/4335/2 "2022-04-14T01:34:19Z")
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 ```haskell "@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. ---
**Author:** ![rikotacards](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@rikotacards](https://forum.canton.network/u/rikotacards)\ **Post date:** [April 14, 2022, 2:14am UTC](https://forum.canton.network/t/importing-daml-template-to-react/4335/3 "2022-04-14T02:14:39Z")
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. ---
**Author:** ![rikotacards](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@rikotacards](https://forum.canton.network/u/rikotacards)\ **Post date:** [April 14, 2022, 3:26am UTC](https://forum.canton.network/t/importing-daml-template-to-react/4335/4 "2022-04-14T03:26:29Z")
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` ![Screenshot 2022-04-13 at 8.24.13 PM](https://canada1.discourse-cdn.com/flex028/uploads/daml/original/2X/4/4ca848cda910ae745c30fe4109aee41a4269058d.png) Despite the error, the IDE can see what I"m trying to import ![Screenshot 2022-04-13 at 8.25.44 PM](https://canada1.discourse-cdn.com/flex028/uploads/daml/original/2X/8/8011f3f997315f04abed4bdaaa2b8b77754c4b13.png) ---
**Author:** ![Leonid\_Rozenberg](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/leonid_rozenberg/32/48_2.png) [@Leonid\_Rozenberg](https://forum.canton.network/u/Leonid_Rozenberg)\ **Post date:** [April 14, 2022, 3:38am UTC](https://forum.canton.network/t/importing-daml-template-to-react/4335/5 "2022-04-14T03:38:32Z")
@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. ---
**Author:** ![rikotacards](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@rikotacards](https://forum.canton.network/u/rikotacards)\ **Post date:** [April 14, 2022, 3:48am UTC](https://forum.canton.network/t/importing-daml-template-to-react/4335/6 "2022-04-14T03:48:11Z")
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` ---
**Author:** ![rikotacards](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@rikotacards](https://forum.canton.network/u/rikotacards)\ **Post date:** [April 14, 2022, 4:20am UTC](https://forum.canton.network/t/importing-daml-template-to-react/4335/7 "2022-04-14T04:20:23Z")
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, ![Screenshot 2022-04-13 at 9.06.51 PM](https://canada1.discourse-cdn.com/flex028/uploads/daml/original/2X/f/fe9ce4476cdc6e3054b6fe858b25a4acc8583307.png) In my package.json, I"ve done ```haskell "@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. ---
**Author:** ![cocreature](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/cocreature/32/36_2.png) [@cocreature](https://forum.canton.network/u/cocreature)\ **Post date:** [April 14, 2022, 6:44am UTC](https://forum.canton.network/t/importing-daml-template-to-react/4335/8 "2022-04-14T06:44:22Z")
> [@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. ---
**Author:** ![rikotacards](https://avatars.discourse-cdn.com/v4/letter/r/f0a364/32.png) [@rikotacards](https://forum.canton.network/u/rikotacards)\ **Post date:** [April 14, 2022, 5:17pm UTC](https://forum.canton.network/t/importing-daml-template-to-react/4335/9 "2022-04-14T17:17:36Z")
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 ```haskell # 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. ---
**Author:** ![Leonid\_Rozenberg](https://yyz2.discourse-cdn.com/flex034/user_avatar/forum.canton.network/leonid_rozenberg/32/48_2.png) [@Leonid\_Rozenberg](https://forum.canton.network/u/Leonid_Rozenberg)\ **Post date:** [April 15, 2022, 2:09pm UTC](https://forum.canton.network/t/importing-daml-template-to-react/4335/10 "2022-04-15T14:09:18Z")
> [@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`.