I’ve been trying to get Framework7 to work with @sveltejs/vite-plugin-svelte
instead of rollup-plugin-svelte
(which is what the kitchen-sink uses here)
Why do I need a different plugin?
I don’t, I just need typescript to work in my project, and rollup-plugin-svelte
doesn’t come with typescript by default, @sveltejs/vite-plugin-svelte
does and it’s what the official vite svelte template uses (you can check it out here).
What’s wrong?
The project compiles without errors, but there’s a runtime error that looks like this in dev mode (I’m running npm run dev
from the vite official template):
proxy.js handles error logging for vite, meanwhile app.js is a framework7 file, the app component.
This is the piece of code the client (google chrome) is complaining about:
Debugging it, it looks like el
is undefined
What are my scripts and markup?
This is the entire app I’m trying to run in dev mode:
main.ts
import Framework7 from 'framework7';
import Framework7Svelte from "framework7-svelte";
import Root from './Root.svelte'
import 'framework7/framework7-bundle.css';
Framework7.use(Framework7Svelte);
const app = new Root({
target: document.getElementById("app")
})
export default app
Root.svelte
<App
name='MyApp'
theme='auto'
id='com.website'
statusbar={{
iosOverlaysWebView: true,
androidOverlaysWebView: false,
}}
>
<Button>hello</Button>
</App>
<script lang="ts">
import { App,Button } from 'framework7-svelte';
</script>
And this is what it looks like:
The animations of the button are missing.
The css doesn’t seem to miss if I inspect the page:
The weirdest part is that if I build the project (npm run build
) instead developing it (npm run dev
) the build works fine, here’s the result of the building process:
I tried serving it from both apache and the vite web server npm run serve
, and they both work.
I’m honestly out of ideas.
Does anyone have any experience with Vite and this type of situations or do you have any ideas how I could fix this?
I published the project under this repo: GitHub - tncrazvan/vite2-svelte-framework7-problems: dev mode produces runtime errors
Steps to recreate errors
npm i
npm run dev