Error using router with svelte - 'target' is a required option

New guy here, please play with kid gloves :slight_smile:

I am testing out Framework7 with Svelte for a new project and I am stumbling out of the gate a bit. I set up a basic Svelte project, installed Framework7, and Framework7-svelte. I am able to run some basic tests (i.e. dialog boxes) successfully.

When I introduce the Framework7 router I start to get errors “target is a required option” in the browser console. This appears to only be present when running with “npm run dev”. If I do an “npm run build” then “npm run start” I have no errors and the router works fine.

Full Error from the console:

Uncaught Error: 'target' is a required option
    at new SvelteComponentDev (index.mjs:1658)
    at new Home (view.js:530)
    at Array.create_default_slot$3 (view.js:78)
    at create_slot (index.mjs:61)
    at create_fragment$9 (router-context-provider.js:17)
    at init (index.mjs:1486)
    at new Router_context_provider (router-context-provider.js:70)
    at create_each_block$1 (view.js:145)
    at create_fragment$a (view.js:208)
    at init (index.mjs:1486)

I was going to post my sample code in the Codesandbox, but when opening the link for the svelte setup (, the placeholder code present is throwing the same error.

Does anyone have any thoughts on what is going on with the “dev” setup?


I did some more digging. It appears that the issue is some combination of the svelte plugin in the rollup.config.js

			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production

Specifically the dev: !production. If you force it to false or comment that line out the app works as expected.

I dialed everything back in the App.svelte. The error occurs when the View element is added to the page.

Try creating F7-Svelte project with Framework7 CLI. I don’t have such kind of errors there

I just created a project with the Framework7 CLI. Everything seems to work fine now. Thanks!

Time to get playing.

Unforunately I don’t have the option at the moment to create a new project using the CLI. The error comes from here when trying to load the home page component:

it looks like options.$$inline is not being set for some reason. should not be set since this is not the root App component.

 class SvelteComponentDev extends SvelteComponent {
        constructor(options) {
            if (!options || (! && !options.$$inline)) {
                throw new Error("'target' is a required option");
        $destroy() {
            this.$destroy = () => {
                console.warn('Component was already destroyed'); // eslint-disable-line no-console
        $capture_state() { }
        $inject_state() { }

I’ve done more digging and the problem seems to be if you have dev property set in the Svelte compilerOptions. With the project generated with framework7-cli, it doesn’t look like the “dev” compilerOptions is being set. We use rollup with the following code snippet:


import svelte from 'rollup-plugin-svelte';

 plugins: [
      compilerOptions: {
        // Enable run-time checks when not in production
        dev: !production,  // for some reason dev mode causes problem with f7 router
      emitCss: false,

Turning off dev mode works, but if you do, you sacrifice HMR if you have it configured in your project (GitHub - sveltejs/vite-plugin-svelte: Svelte plugin for or GitHub - rixo/svelte-hmr: HMR commons for Svelte 3). It seems like this problem lies in the way framework7 handles router loading.