floating-ui / svelte-popper

🍿🔗Official Svelte wrapper for Popper - the positioning library

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TypeError: placement.split is not a function

i8ramin opened this issue · comments

Hello, following the example given in the README and I keep getting the following error:

getBasePlacement.js:3 Uncaught (in promise) TypeError: placement.split is not a function
    at getBasePlacement (getBasePlacement.js:3)
    at distanceAndSkiddingToXY (offset.js:4)
    at offset.js:31
    at Array.reduce (<anonymous>)
    at offset (offset.js:30)
    at Object.forceUpdate (createPopper.js:183)
    at createPopper.js:196
    at new Promise (<anonymous>)
    at createPopper.js:195
    at debounce.js:8

When I try to debug this, the placement variable comes back as Window at some point (vs a string as it seems to expect)

My component code:

<script lang="ts">
  import Popper from '@popperjs/svelte'
  import { fly } from 'svelte/transition'
  import { quadOut, quadIn } from 'svelte/easing'

  const inProps = { y: 10, duration: 200, easing: quadIn }
  const outProps = { y: -10, duration: 100, easing: quadOut, delay: 100 }

  // super-simple CSS Object to string serializer
  const css = (obj) =>
    Object.entries(obj || {})
      .map((x) => x.join(':'))
      .join(';')

  // DOM references to the interested elements
  let referenceElement
  let popperElement
  let arrowElement

  // Popper options, reactive to update when arrowElement is set
  $: popperOptions = {
    modifiers: [
      { name: 'offset', options: { offset: [0, 5] } },
      { name: 'arrow', options: { element: arrowElement } },
    ],
  }

  // bound variables where Popper will store styles and attributes
  let styles = {} as any
  let attributes = {} as any

  console.log(styles)
</script>

<Popper reference={referenceElement} popper={popperElement} options={popperOptions} bind:styles bind:attributes>
  <div bind:this={referenceElement}>
    <slot name="trigger" />
  </div>

  <div bind:this={popperElement} class="tooltip" style={css(styles.popper)} {...attributes.popper}>
    <div class={`w-auto bg-white rounded elevation-3`} in:fly={inProps} out:fly={outProps}>
      <slot />
    </div>
    <div bind:this={arrowElement} class="arrow" style={css(styles.arrow)} />
  </div>
</Popper>

Other info
Node version: v12.19.0
Svelte version: 3.29.0
"@popperjs/svelte": "^0.1.1"

Thank you in advance

I changed my rollup config to output iife vs esm and the problem went away