Issue with yarn

[varghesethomase]

I used the latest vite and svelte project to use the medblocks ui library The below is my package.json

  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^2.0.0",
    "@tsconfig/svelte": "^3.0.0",
    "svelte": "^3.54.0",
    "svelte-check": "^2.10.0",
    "tslib": "^2.4.1",
    "typescript": "^4.9.3",
    "vite": "^4.0.0"
  },
  "dependencies": {
    "medblocks-ui": "^0.0.162"
  }
}

As per the docs, the below was added to the App.svelte.

<script lang="ts">
    import 'medblocks-ui'
    import 'medblocks-ui/dist/shoelace'
</script>

On importing a template related to blood pressure, it does not render correctly. The screenshot of the same is attached below. The issue seems to be with components like mb-quantity and mb-select.

<mb-form class="flex flex-col gap-3 p-5 shadow-lg rounded-lg border">
    <mb-context path="petetest/category" />
    <mb-context path="petetest/context/start_time" />
    <mb-context path="petetest/context/setting" />
    <mb-quantity
        default="mm[Hg]"
        path="petetest/blood_pressure/any_event:0/systolic"
        label="Systolic"
    >
        <mb-unit unit="mm[Hg]" label="mm[Hg]" />
    </mb-quantity>
    <mb-quantity
        default="mm[Hg]"
        path="petetest/blood_pressure/any_event:0/diastolic"
        label="Diastolic"
    >
        <mb-unit unit="mm[Hg]" label="mm[Hg]" />
    </mb-quantity>
    <mb-context path="petetest/blood_pressure/any_event:0/time" />

    <mb-context path="petetest/blood_pressure/subject" />
    <mb-context path="petetest/blood_pressure/language" />
    <mb-context path="petetest/blood_pressure/encoding" />
    <mb-context path="petetest/composer" />
    <mb-context path="petetest/language" />
    <mb-context path="petetest/territory" />

    <mb-submit>
        <sl-button type="neutral">Submit</sl-button>
    </mb-submit>
</mb-form>

@sidharthramesh I would appreciate your support here.

[sidharthramesh]

Are you using npm or another library like pnpm / yarn?

[varghesethomase]

I am using yarn. On debugging, I could find that in quantity.js file, the function ifDefined(this.label))is returning a function and this is what is displayed.

[sidharthramesh]

Thank you for the catch. Cc: @ATHULKNAIR

We noticed this same problem sometime ago, but it only happened when using yarn and not npm for some reason.

We will fix this soon. Would be glad to merge your PR if you’re interested @varghesethomase.

[varghesethomase]

I can try @sidharthramesh . Is there someone who could assist me on this? In the mean time I also found issues with mb-select. Going through the code looks ok to me. But on rendering the html below,

<mb-select
  path="covid.form.v1/clinical_background/covid_19_admission/hospital_admission_status"
  label="Hospital admission status">
     <mb-option value="at0003" label="YES" />
      <mb-option value="at0004" label="NO" />
      <mb-option value="at0005" label="UNKNOWN" />
</mb-select>
 <mb-date
   time
   path="covid.form.v1/clinical_background/covid_19_admission/date_first_admitted"
    label="Date first admitted"
  />

it displays as it is in the screenshot

[sidharthramesh]

As I said, try using npm instead of yarn and see if you are able to reproduce these errors.

[varghesethomase]

Thanks @sidharthramesh I can confirm that the package works as expected with npm instead of yarn. Since it might be still worth checking why the issue happens only with yarn, I'll keep this ticket open. I would like to see if you have the same feeling that it might be caused due to the difference in version of packages that yarn installs when compared to npm based on minor dependencies or so? Let me know your thoughts.

[sidharthramesh]

We usually use npm. And I have no idea why there are these issues when using yarn.

should I still keep this issue open? Maybe rename it to something like “issue with yarn”?