title: Uncaught Error: 'target' is a required option - Svelte
body: <p>I'm building an NPM package for Svelte. With this package I export a couple of simple components:</p>
  <pre class="lang-js prettyprint-override"><code>import SLink from './SLink.svelte';
  import SView from './SView.svelte';
  
  export { SLink, SView };
  </code></pre>
  <p>This is before bundling them to a minified version using rollup.</p>
  <p>Rollup config:</p>
  <pre class="lang-js prettyprint-override"><code>module.exports = {
      input: 'src/router/index.ts',
      output: {
          file: pkg.main,
          format: 'umd',
          name: 'Router',
          sourcemap: true,
      },
      plugins: [
          svelte({
              format: 'umd',
              preprocess: sveltePreprocess(),
          }),
          resolve(),
          typescript(),
          terser(),
      ],
  };
  </code></pre>
  <p><code>package.json</code> (minus unnecessary info):</p>
  <pre class="lang-json prettyprint-override"><code>{
      &quot;name&quot;: &quot;svelte-dk-router&quot;,
      &quot;version&quot;: &quot;0.1.29&quot;,
      &quot;main&quot;: &quot;dist/router.umd.min.js&quot;,
      &quot;scripts&quot;: {
          &quot;lib&quot;: &quot;rollup -c lib.config.js&quot;,
      },
      &quot;peerDependencies&quot;: {
          &quot;svelte&quot;: &quot;^3.0.0&quot;
      },
      &quot;files&quot;: [
          &quot;dist/router.umd.min.js&quot;
      ],
  }
  </code></pre>
  <p>When I publish the package and test it, I get this error:</p>
  <pre class="lang-js prettyprint-override"><code>Uncaught Error: 'target' is a required option
      at new SvelteComponentDev (index.mjs:1642)
      at new Home (App.svelte:5)
      at Z (router.umd.min.js:1)
      at N (router.umd.min.js:1)
      at new t.SView (router.umd.min.js:1)
      at create_fragment (App.svelte:5)
      at init (index.mjs:1476)
      at new App (App.svelte:5)
      at main.js:7
      at main.js:9
  </code></pre>
  <p>Which seems to be something to do with mounting the component as <code>target</code> is used to mount:</p>
  <pre class="lang-js prettyprint-override"><code>const app = new App({ target: document.body })
  </code></pre>
  <hr />
  <p>The odd thing is, <code>SLink</code> on it's own works fine, mounts as it should etc., it's just <code>SView</code> that doesn't work.</p>
  <p><code>SLink</code>:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script lang=&quot;ts&quot;&gt;
      import { writableRoute, changeRoute } from '../logic';
  
      export let name: string = undefined,
          path: string = undefined,
          query: Record&lt;string, string&gt; = undefined,
          params: Record&lt;string, string&gt; = undefined;
  
      let routerActive: boolean;
  
      writableRoute.subscribe(newRoute =&gt; {
          if (newRoute.path === '*') return;
          const matches = (path &amp;&amp; path.match(newRoute.regex)) || newRoute.name === name;
          routerActive = matches ? true : false;
      });
  &lt;/script&gt;
  
  &lt;div
      on:click={() =&gt; changeRoute({ name, path, query, params })}
      class={routerActive ? 'router-active' : ''}&gt;
      &lt;slot /&gt;
  &lt;/div&gt;
  </code></pre>
  <p><code>SView</code>:</p>
  <pre class="lang-js prettyprint-override"><code>&lt;script lang=&quot;ts&quot;&gt;
      import { writableRoute } from '../logic';
  
      let component: any;
  
      writableRoute.subscribe(newRoute =&gt; (component = newRoute ? newRoute.component : null));
  &lt;/script&gt;
  
  &lt;svelte:component this={component} /&gt;
  </code></pre>
  <hr />
  <p>I've tried the components uncompiled, as per <a href="https://github.com/sveltejs/rollup-plugin-svelte#pkgsvelte" rel="noreferrer">these docs</a>, but then the imports don't work.</p>
  <p>Anyone have any idea how I can work around this issue?</p>