Svelte: Reactive statements throwing TypeError from svelte plugin

[reinink]

I just ran into an issue with Svelte with the reactive statements. I created a sample app using the sveltejs/template starter repo. I added a single reactive statement to the App.svelte component, which you can see here

<script>
    export let name;

    $: document.title = name;
</script>

<style>
    h1 {
        color: purple;
    }
</style>

<h1>Hello {name}!</h1>

Here is the error I'm getting:

1!] (svelte plugin) TypeError: extractors[param.type] is not a function
npm ERR! code ELIFECYCLE
npm ERR! errno 1ctors[param.type] is not a function
npm ERR! [email protected] autobuild: `rollup -c -w`y-svelte-project/node_modules/svelte/compiler.js:17623:28)
npm ERR! Exit status 1/Users/jonathan/Sites/my-svelte-project/node_modules/svelte/compiler.js:17619:13)
npm ERR! ript.content.body.forEach.node (/Users/jonathan/Sites/my-svelte-project/node_modules/svelte/compiler.js:22946:14)
npm ERR! Failed at the [email protected] autobuild script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.es/svelte/compiler.js:22938:30)
    at new Component (/Users/jonathan/Sites/my-svelte-project/node_modules/svelte/compiler.js:22594:15)
npm ERR! A complete log of this run can be found in:ect/node_modules/svelte/compiler.js:23614:24)
npm ERR!     /Users/jonathan/.npm/_logs/2019-04-23T13_46_58_987Z-debug.logt/node_modules/rollup-plugin-svelte/index.js:236:22)
ERROR: "autobuild" exited with 1.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `run-p start:dev autobuild`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Full repo here.

[kazzkiq]

I'm guessing you're trying to set your page's title from within your component, whenever name variable changes? In this case you could trigger reactive assignments to change your title as follows:

<script>
  export let name;

  $: if (name) {
    document.title = name;
  }
</script>

<h1>Hello {name}!</h1>

If you just need to set it once in your component's load, then use onMount:

<script>
  import { onMount } from 'svelte';

  export let name;

  onMount(() => {
    if (name) document.title = name;
  });
</script>

<h1>Hello {name}!</h1>

[reinink]

That worked! I literally just went off the API docs for this. Do the docs need updating?

<script>
    export let title;

    // this will update `document.title` whenever
    // the `title` prop changes
    $: document.title = title;

    $: {
        console.log(`multiple statements can be combined`);
        console.log(`the current title is ${title}`);
    }
</script>

[kazzkiq]

Hmm, I think you caught a bug.

This works:

<script>
  export let name;

  $: {
    document.title = name;
  }
</script>

This should work, but it's raising the error you mentioned:

<script>
  export let name;

  $: document.title = name;
</script>

Both are valid as per docs.

[vovs03]

2514