App component with vite-plugin-svelte

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:
Animation3
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

  1. npm i
  2. npm run dev

Thanks for posting a repo with the issue, I will take a look on a days

I’ve run into the same issue. The problem is framework7 is not being compiled with the same Svelte runtime, causing f7 to be unable to access external DOM elements. The solution is to add this

optimizeDeps: {
    exclude: ['framework7', 'framework7-svelte'],
  },

to your Vite config file. Although this leads to another f7 issue where routing does not properly work in dev and HMR mode. A way to temporarily get around this is to set compilerOptions.dev and hot in the Vite Svelte plugin to false. As for getting HMR working, I’ve linked an issue below.

2 Likes

Yeah, figured out this as well. Svelte compiler is pretty annoying with all this stuff. In next release I think I will include also .svelte files in addition so they use the “same compiler”

1 Like

It should be fixed now, can you try to update both F7 and F7-Svelte to 6.1.0-beta.1 and check does it work for you or not

1 Like

I will, as soon as I get off work.

1 Like

On thing, in your main.ts file, with Svelte you must use Framework7-Lite version

should be:

import Framework7 from 'framework7/lite';
1 Like

I deleted my node_modules before doing this then I made the changes and then I reinstalled them.

I updated the versions and most things now seem to work, but some other things don’t seem to work.
I used the popup component as shown in the official documentation and this happens as soon as the page loads:

I tried this with the popup component and sheet component and both don’t seem to work, giving a similar error.


This is the branch with the changes you guys suggested GitHub - tncrazvan/vite2-svelte-framework7-problems at fix-attempt-1

Because you use only Core version of Framework7

Change

import Framework7 from 'framework7/lite';

to

import Framework7 from 'framework7/lite-bundle';
2 Likes

Awesome, everything works now!
Thanks a lot to the both of you!

Hey nolimites4web :slight_smile:

Can you have a look at that repo : https://github.com/giviz/f7-svelte-debug2

I have a working f7 svelte typescript project that is working fine, but when I run an “npm install vite” to update, it breaks and give me that error.

So I’ve created a new svelte project with f7 cli, migrated my typescript setup and a 2 basics tabs.

I’ve spent hours trying to find a solution, but without success, and if I update npm on my f7 project it stops working because of that issue.

Thank you !

Edit : Changed the repo for one that better show the error.

Actually the solution provided by AKSG

optimizeDeps: { exclude: ['framework7', 'framework7-svelte'], },

Does solve the error, but I’m not sure about it’s side effects.

@giviz
https://vitejs.dev/config/#optimizedeps-entries

And “pre-bundling” is explained here: Dependency Pre-Bundling | Vite

From what I’m understanding, it only impacts your development experience, it doesn’t impact your final bundle’s performance, that is being handled by rollup, a completely separate process.

It just means you’ll see a bunch of requests for assets in your browser when developing, instead of only a few modules.

Awesome thanks, at least it’s a working solution :slight_smile:

It starts to get really complicated to get things in a stable environment with so many technologies wrapped into each other !

Btw, thanks for your public repo, it helped me getting started with typescript setup !