svelte-kit / ssr error because of client side only library (jquery)

[notYou263]

Hi,

I created a new svelte-kit app, added svantic and got some errors to deal with because of fomantics jquery depency as well as some design problems. I would like to discuss a possible solution for this problem.

Here is what I did to get it working.

First I had to add a typeof window check at src/modules/utils/loader.js

const loader = async (type) => {
    if(typeof window === 'undefined')
        return 

    await loadJQ()
    return import(`../../../semantic/dist/components/${type}.min`)
}

Then I made some changes on the components.

• remove the {#await isReady } because it leads to ugly flickering and design resizings at the client side as there is nothing to render before the promise resolves
• add variable instance and use it to reference the components outer element instead of directly bind to $executer
• await isReady in onMount callback. after, set $executer to elements instace.

For example, src/modules/dropdown/dropdown.svelte

<script context="module">
  import { dropdownLoader, transitionLoader, load } from '../utils'
  const isReady = load(transitionLoader, dropdownLoader)
</script>

<script>
  import '../../../semantic/dist/components/site.min.css'
  import '../../../semantic/dist/components/reset.min.css'

/* .....  */

  const  executer = dropdown(settings)

  const dispatch = createEventDispatcher()

  let instance

  onMounted(async () => {
    await isReady
    $executer = instance
    onMount?.($executer)
    dispatch('mount', $executer)
  })

  $: executer.setSettings(settings)

/* .....  */

</script>

  {#if as === 'div'}
    <div bind:this="{instance}" use:css="{style}" class="{classnames}">
      <slot />
    </div>
  {:else}
    <select
      bind:this="{instance}"
      use:css="{style}"
      multiple="{multiple}"
      class="{classnames}" >
      <slot />
    </select>
  {/if}

[ryu-man]

@notYou263 I was working on a fix, I will try to finish it and push the changes

[ryu-man]

I decided to move jquery loading to a component that has to be mounted on the top level of the app, this way we don't have to wait for jquery loading each time we want to initialize a component depending on it

[ryu-man]

I also removed the svelte await block that cause flickering

[notYou263]

Sounds great.

A temporarily solution is, disabling ssr in hook.js file

https://github.com/sveltejs/kit/pull/2804#issuecomment-1021446738

However I hope for a fix anytime soon as above method is not suitable

[ryu-man]

9 @notYou263 checkout the new version 0.4.0

[notYou263]

As soon as I add a dropdown, following error shows up in browser console

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'isFunction')
    at transition.min?import:11:48
    at transition.min?import:11:13280

Using a fresh installed svelte-kit skeleton, install svantic and jquery (as it isnt anymore) and my index.svelte file

<script>
    // import modules
    import { Button, Dropdown, initDropdown, Icon, Svantic } from 'svantic';

    // call this function if you want to use Module.SubModule syntax, ex: Dropdown.Item
    initDropdown()

</script>

<Svantic>
  <Button> A button </Button>

  <Dropdown   
    onMount={(domElem) => {}} 
    settings={{}}
    selection >
    <Icon name="caret down" />
    <Dropdown.Text>Select language</Dropdown.Text>
    <Dropdown.Menu>
      <Dropdown.Item>English</Dropdown.Item>
      <Dropdown.Item>Arabic</Dropdown.Item>
      <Dropdown.Item>Spanish</Dropdown.Item>
      <Dropdown.Item>German</Dropdown.Item>
    </Dropdown.Menu>
  </Dropdown>

</Svantic>

And btw, there are some missing exports, MenuItem, initMenu, initTable and other table child components