window is not defined. latest update breaks nuxt SSR

[agotfredsen82]

Hi. Thanks so much for the update . Awesome work. unfortunately it seems that it breaks the entire nuxt build due to "window is not defined" when doing the import

<script setup>
import { dragAndDrop } from "@formkit/drag-and-drop/vue";
import {
  parents,
  parentValues,
  dragValues,
  setParentValues,
  handleDragoverParent,
  handleEnd,
} from "@formkit/drag-and-drop";

at (node_modules/@formkit/src/index.ts:47:28)

export const touchDevice = window && "ontouchstart" in window;

This breaks the build . please please please fix . This worked before the latest update

maybe something like this to fix it

if(typeof window !== 'undefined')

[sashamilenkovic]

@agotfredsen82 hmmm, I dev'd in Nuxt ssr and never ran into this. I will take a look. Apologies!

[agotfredsen82]

@sashamilenkovic great np. . really looking forward to use 0.2.1 . ;-) you are doing a great work

yeah problem comes directly in dev for us. rooling back to 0.1.5 removes it so we need to stick on 0.1.5 until this fix .

running in

future: {
compatibilityVersion: 4,
},

[bfourgeaud]

Same on React since update to v0.2.0, window is not defined

[sashamilenkovic]

@agotfredsen82 @bfourgeaud This should be resolved at v0.2.1. Let me know if you're still having any issues.

[bfourgeaud]

I just tested out v0.2.1 and I still have this issue.

This is my code :

// draggable.tsx

import { ComponentProps, ReactNode, useEffect, useTransition } from "react"
import { useDragAndDrop } from "@formkit/drag-and-drop/react"
import {
  animations,
  handleEnd as coreHandleEnd,
  DragState,
  SynthDragState,
} from "@formkit/drag-and-drop"
import { cn } from "@/lib/utils"

type Props<T> = {
  onChange?: (data: T[]) => Promise<void> | void
  items: T[]
  children: (item: T) => ReactNode
  dragHandle?: string
  checkSame?: (curr: T[], changed: T[]) => boolean
} & Omit<ComponentProps<"div">, "children" | "onChange">

const compareArrays = <_, T>(a: T[], b: T[]) =>
  a.length === b.length && a.every((element, index) => element === b[index])

export const Draggable = <_, T>({
  onChange,
  items,
  children,
  dragHandle,
  checkSame = compareArrays,
  ...props
}: Props<T>) => {
  const [pending, startTransition] = useTransition()

  const onDragEnd = async (data: DragState<T> | SynthDragState<T>) => {
    const parent = data.currentParent.el
    const newData = data.currentParent.data.getValues(parent)
    const isSame = checkSame(items, newData)

    !isSame && startTransition(async () => await onChange?.(newData))
    coreHandleEnd(data)
  }

  const [parent, listItems, setValues, updateConfig] = useDragAndDrop<
    HTMLDivElement,
    T
  >(items, {
    dragHandle,
    plugins: [animations()],
    handleEnd: onDragEnd,
    longPress: true,
    longPressClass: "shadow-xl peer:opacity-50",
    draggingClass: "opacity-50 bg-muted border border-blue-500",
    dropZoneClass: "bg-muted border-dashed relative",
    //nativeDrag: true,
  })

  useEffect(() => {
    setValues(items)
  }, [items, setValues])

  return (
    <div
      ref={parent}
      className={cn(props.className, {
        "opacity-50 animate-pulse pointer-events-none": pending,
      })}
      tabIndex={-1}
      {...props}
    >
      {listItems.map(children)}
    </div>
  )
}

// Component usage

<Draggable
  items={items}
  onChange={handleChange}
  //dragHandle=".drag-handle"
  className="flex flex-col gap-2"
>
  {(item) => <Item key={item.id} value={item} />}
</Draggable>

[sashamilenkovic]

Hmmm, okay. I will take another look at this

[sashamilenkovic]

@agotfredsen82 @bfourgeaud Are either of you able to create a reproduction of this? I'm having a tough time reproducing myself. As of v0.2.1, the assignment for export const touchDevice = window && "ontouchstart" in window; has been moved out of the module scope and into individual event handlers.

[bfourgeaud]

I just tested out v0.2.2 and i see no error anymore !

[sashamilenkovic]

@bfourgeaud Awesome! Thank you for your patience with all of this. I'll close this now.