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