Getting an error: solid-js/web has no export "template"

[tsdevau]

I'm getting the following error while trying to use the solid-date-picker.

Just chasing a bit of guidance as to what I might be doing wrong? If there is other info you need, let me know.

Error message

The requested module 'solid-js/web' does not provide an export named 'template'

file:///Users/xxx/Developer/solid-cashup/node_modules/.pnpm/@rnwonder+solid-date-picker@0.3.7_solid-js@1.7.5/node_modules/@rnwonder/solid-date-picker/dist/index.es18.js:1
import { createComponent as i, Portal as a, memo as d, use as c, spread as m, mergeProps as f, insert as h, effect as v, className as g, style as p, template as C } from "solid-js/web";
                                                                                                                                                     ^^^^^^^^
SyntaxError: The requested module 'solid-js/web' does not provide an export named 'template'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:190:5

Component setup example

import { localDateAsUTC } from "@/utils/dates"
import DatePicker, { IDatePickerInputDataValue } from "@rnwonder/solid-date-picker"
import "@rnwonder/solid-date-picker/dist/index.css"
import { DatePickerInputSJProps } from "@rnwonder/solid-date-picker/types/components/DatePickerGroup"
import { createSignal } from "solid-js"

export const [datePickerValue, setDatePickerValue] = createSignal<IDatePickerInputDataValue>({
  value: { selected: localDateAsUTC().toISOString().slice(0, 10) },
  label: "Current Date",
})

export default function Datepicker(props: DatePickerInputSJProps) {
  return <DatePicker {...props} />
}

Component usage example

import DatePicker, { datePickerValue, setDatePickerValue } from "@/components/DatePicker"
import getHourlyData from "@/components/dashboard/getHourlyData"
import { Card, CardHeader, CardTitle } from "@/components/ui/Card"
import { useRouteData } from "solid-start"

export function routeData() {
  return getHourlyData()
}

export default function Dashboard() {
  const data = useRouteData<typeof routeData>()

  return (
    <section class="space-y-3">
      <Card class="grid grid-cols-4 gap-2 bg-bg-200 p-3">
        <CardHeader class="col-span-4 p-0 pb-4">
          <CardTitle class="flex">
            <DatePicker
              value={datePickerValue}
              setValue={setDatePickerValue}
            />{" "}
            vs Previous Week KPI's
          </CardTitle>
        </CardHeader>
      </Card>
    </section>
  )
}

[tsdevau]

OK ... I was able to get 'er going ... My issue likely relates to the fact that I'm using solid-start.

I was able to get it working by importing DatePicker as clientOnly using:

const DatePicker = unstable_clientOnly(() => import("@rnwonder/solid-date-picker"))

[rnwonder]

Yeah the date picker is clientOnly