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

Questions
1

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 (https://codesandbox.io/s/framework7-svelte-yf8m2), the placeholder code present is throwing the same error.

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

Thanks!

2

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

		svelte({
			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.

3

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

4

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

Time to get playing.

5

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. options.target should not be set since this is not the root App component.

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

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:

rollup.config.js:

import svelte from 'rollup-plugin-svelte';

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

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 http://vitejs.dev/ or GitHub - rixo/svelte-hmr: HMR commons for Svelte 3). It seems like this problem lies in the way framework7 handles router loading.