Type errors when adding additional dayjs plugins

[KieranP]

  import { svelteTime, dayjs } from 'svelte-time'

  import localizedFormat from 'dayjs/esm/plugin/localizedFormat'
  dayjs.extend(localizedFormat)

  import timezone from 'dayjs/esm/plugin/timezone'
  dayjs.extend(timezone)

  <time
    use:svelteTime=({
      ...
    })
  />

/work/app/frontend/javascripts/components/date_time.svelte:6:16
Error: Argument of type 'PluginFunc' is not assignable to parameter of type 'PluginFunc<unknown>'.
  Types of parameters 'c' and 'c' are incompatible.
    Type 'typeof import("/work/node_modules/svelte-time/node_modules/dayjs/esm/index").Dayjs' is not assignable to type 'typeof import("/work/node_modules/dayjs/esm/index").Dayjs'.
      Types of construct signatures are incompatible.
        Type 'new (config?: string | number | Date | Dayjs | null | undefined) => Dayjs' is not assignable to type 'new (config?: string | number | Date | Dayjs | null | undefined) => Dayjs'.
          Types of parameters 'config' and 'config' are incompatible.
            Type 'string | number | Date | import("/work/node_modules/dayjs/esm/index").Dayjs | null | undefined' is not assignable to type 'string | number | Date | import("/work/node_modules/svelte-time/node_modules/dayjs/esm/index").Dayjs | null | undefined'.
              Type 'Dayjs' is not assignable to type 'string | number | Date | Dayjs | null | undefined'.
                Type 'Dayjs' is missing the following properties from type 'Dayjs': fromNow, from, toNow, to (ts)

/work/app/frontend/javascripts/components/date_time.svelte:9:16
Error: Argument of type 'PluginFunc' is not assignable to parameter of type 'PluginFunc<unknown>'. (ts)

Adding import dayjs from 'dayjs/esm' at the top fixes the type errors, but then the plugins won't be active and give the correct result.

Would be handy if I could construct and pass in dayjs:

  import dayjs from 'dayjs/esm'

  import localizedFormat from 'dayjs/esm/plugin/localizedFormat'
  dayjs.extend(localizedFormat)

  import timezone from 'dayjs/esm/plugin/timezone'
  dayjs.extend(timezone)

  import { svelteTime } from 'svelte-time'

  <time
    use:svelteTime=({
      dayjs,
      ...
    })
  />

[benglewis]

I am also seeing problems with this when using the timezones exactly as shown in the docs.
It doesn't work for me in practice with either solution - the one that works in TypeScript or the one that doesn't - neither work in practice for me

[benglewis]

I figured out my issues:

1. My date objects were parsed from date strings that did not end with Z or any timezone postfix. This meant that they were parsed as dates without timezones which messed around with the dayjs support.
2. The code example does not work, indeed, with TypeScript, but there was an extremely easy fix. TypeScript notes that the non-ESM version of DayJS is not the same as the ESM version of DayJS and svelte-time exports the ESM version. So simply changing the plugin imports like this:
   From:

import timezone from "dayjs/plugin/timezone"
import utc from "dayjs/plugin/utc"

To:

import timezone from 'dayjs/esm/plugin/timezone'
import utc from 'dayjs/esm/plugin/utc'

And everything works for me now.

Note: I am not using time and use:sveltetime, but instead the Time component from svelte-time. I don't know if this affects anything