SvelteKit and UIKit conflict

d20cay commented 2 years ago

UIkit Version

Check if the issue is reproducible with the latest stable version. 3.14.3

Actual Behavior

Since a recent update to Svelte or UIKit (sadly I don't know which) they seem to be conflicting with eachother. Svelte seems to want to control the DOM more aggressively than before, which interferes with UIKit's modifications. For example accordions and grids aren't displayed correctly. I was told to ask for help here by the Svelte folks.

Expected Behavior

Reproduction Link

CodePen is too minimal. This has to be setup in a SvelteKit environment. https://github.com/d20cay/sveltekit-test provides all of the necessary code. To see the issue start the dev server with npm run dev.

Steps to Reproduce the Problem

All these examples and more can be seen on d20cay.com. The problem arises when you reload the page.

You can also recreate the issue using the github provided in the section above or:

Create a new SvelteKit project.
Download the uikit library and import the uikit.js, uikit.min.js and uikit.css files in the app.html template.
Insert either a grid or accordion element to the page.
Start the dev server with npm run dev.
Open the dev web page.
Reload dev web page.

ilrico commented 2 years ago

Such behaviour really looks like your uikit.*.js are not loaded. Anyway with uikit 3.14.3 and @sveltejs/kit next (installed today), svelte 3.44.0, it is fine on my side.

sveltecult commented 11 months ago

Are there any news update about this one? I put my uikit.js and uikit-icons.js on the app.html file to make sure they are loaded properly and that still did not work.

My problem was when I'm using the uk-* tag like <div uk-modal> or <div uk-alert>. The same problem as above occurs only on full-page refresh but when you make changes and the HMR kicks in, components work fine.

When you build via static adapter, all components work fine too. It's just that, it is really hard to develop.

d20cay commented 11 months ago

No news from me. I haven't had the time to work on my personal projects in a while. Please do leave a comment if you find a solution, though. I would be very interested.

sveltecult commented 11 months ago

Hi @d20cay funny because this has been over a year now and me personally, I'm having the same problem since June this year 😆

Anyway, I might have found a fix. So, the problem is indeed SvelteKit is probably taking over UIkit. The easiest way is to just add the correct classes right off the bat. But that's not always ideal. For me, I need to use UIkit test files and I do not have time to edit them all and add correct classes. What I mean is do <div class="uk-alert" uk-alert> instead of just <div uk-alert>. What I find weird is component works fine when HMR was triggered. Maybe because of the SSR and UIkit custom tags? I don't know.

https://github.com/uikit/uikit/assets/141085479/eb2f1267-7415-41d1-8f69-ef5de9e27a0b

So my solution was:

Remove any CDN installation or any UIkit script reference.
On my +layout.svelte I just did:

<script>
    import { browser } from '$app/environment';

    if (browser) {
        import('uikit').then((a) => {
            window.UIkit = a;
        });
    }
</script>

EDIT: for some reason, this does not work because the build fails:

<script>
    import { browser } from '$app/environment';
    import UIkit from 'uikit';

    if (browser) {
        window.UIkit = UIkit;
    }
</script>

So, I resorted to import() instead. Also works on UIkit test files, and production builds. Hope this works for all of us. :)

uikit / uikit