Sveltekit/Vite components not showing

[analubarreto]

This is:

• Bug

Specifications

• AOS version: 3.0.0-beta.6
• OS: Windows 10
• Browser: Chrome

Expected Behavior

Components are supposed to be loading.

Actual Behavior

Components are not loading.

Steps to Reproduce the Problem

I'm using:

• SvelteKit

1. Create a new SvelteKit project

mkdir my-app
cd my-app
npm init svelte@next

2. Install aos
3. Create a few components in such a way to make the screen scrollable
4. Use only data-aos without other configs
5. Go to $layout.svelte and input this:

	import { onMount } from 'svelte';
	import 'aos/dist/aos.css';

	let dynamicAOS;
	onMount(async () => {
		try {
			dynamicAOS = await import('../../node_modules/aos');
			dynamicAOS.init();
		} catch (e) {
			console.log(e);
		}
	});

5. Run the project

Detailed Description

It's a bug on SvelteKit and probably vite not an addition.

Possible Solution

I'm pretty sure this have to do with how dynamic imports work in Vite, so that might be an issue.

[otlynblack]

Any progress on this @analubarreto?

[alejandropichola]

Any progress on this @analubarreto?

i solve it of the next form

import { onMount } from 'svelte';
import 'aos/dist/aos.css';

let AOS;
onMount(async () => {
  AOS = (await import('aos')).default;
  AOS.init();
});

[Elvin1993]

I have the same problem. i solve it of the next form in you dynamic components

import React, { useEffect } from "react";

 useEffect(() => {
    AOS.init()
  }, [])