title: Runtime Error integrating a component lib that uses @vue/composition-api: 'You must use this function within the "setup()" method'
body: <p>Any help with the following problem would be greatly appreciated!</p>
  <h2>Situation:</h2>
  <p>My <a href="http://github.com/tholst/vue-composition-api-comp-lib" rel="nofollow noreferrer">project</a> contains <strong>two packages</strong>:</p>
  <ol>
  <li><p><strong>child-component-lib</strong></p>
  <ul>
  <li>contains a single view <code>About.vue</code> written in composition-API-style (with vue2 helper libraries <code>@vue/composition-api</code> and <code>vuex-composition-helpers</code>)</li>
  <li>exports a single <code>RouteConfig</code></li>
  <li>build as a lib</li>
  </ul>
  <p><strong><code>views/About.vue</code> (child)</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class=&quot;about&quot;&gt;
      &lt;h1&gt;This is an about page (as component lib)&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { defineComponent } from &quot;@vue/composition-api&quot;;
  import { createNamespacedHelpers } from &quot;vuex-composition-helpers&quot;;
  
  export default defineComponent({
    components: {},
    setup(_, { root }) {
      const { useGetters, useActions } = createNamespacedHelpers(&quot;account&quot;); // error thrown here!
    }
  });
  &lt;/script&gt;
  </code></pre>
  <p><strong><code>router/index.ts</code> (child)</strong></p>
  <pre class="lang-js prettyprint-override"><code>export const routes: Array&lt;RouteConfig&gt; = [{
      path: &quot;/&quot;,
      name: &quot;About&quot;,
      component: () =&gt; import(/* webpackChunkName: &quot;about&quot; */ &quot;../views/About.vue&quot;)
  }];
  </code></pre>
  <p><strong><code>lib.ts</code> (child)</strong></p>
  <pre class="lang-js prettyprint-override"><code>export const routes = require(&quot;@/router&quot;).routes;
  </code></pre>
  <p><strong><code>package.json</code> (child)</strong></p>
  <pre><code>&quot;scripts&quot;: {
    &quot;build&quot;: &quot;vue-cli-service build --target lib --name child-component-lib src/lib.ts&quot;
  ...
  </code></pre>
  </li>
  </ol>
  <hr />
  <ol start="2">
  <li><p><strong>parent-app</strong></p>
  <ul>
  <li>imports the route from <code>child-component-lib</code> into its router</li>
  <li>contains a simple view that displays one line of text and a <code>&lt;router-view /&gt;</code></li>
  </ul>
  <p><strong><code>package.json</code> (parent)</strong></p>
  <pre class="lang-json prettyprint-override"><code>&quot;dependencies&quot;: {
      &quot;@tholst/child-component-lib&quot;: &quot;file:../child-component-lib&quot;,
  </code></pre>
  <p><strong><code>router/index.ts</code> (parent)</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { routes as childComponentRoutes } from &quot;@tholst/child-component-lib&quot;;
  
  const routes: Array&lt;RouteConfig&gt; = [...childComponentRoutes];
  const router = new VueRouter({routes});    
  export default router;
  </code></pre>
  <p><strong><code>App.vue</code> (parent)</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div id=&quot;app&quot;&gt;
      &lt;Home /&gt;
      &lt;router-view /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { defineComponent } from &quot;@vue/composition-api&quot;;
  import Home from &quot;@/views/Home.vue&quot;;
  
  export default defineComponent({
    components: {
      Home
    },
    setup(_, { root }) {
      ...
    }
  });
  &lt;/script&gt;
  </code></pre>
  </li>
  </ol>
  <h3>Expected behavior</h3>
  <p>It works without problems.</p>
  <h3>Actual behavior</h3>
  <p>I see an error output in the console. <code>[Vue warn]: Error in data(): &quot;Error: You must use this function within the &quot;setup()&quot; method, or insert the store as first argument.&quot;</code> The error message is misleading, because the error is actually thrown inside <code>setup()</code> method. It can be traced back to <code>getCurrentInstance()</code> returning <code>undefined</code> (inside <code>@vue/composition-api</code>).</p>
  <hr />
  <h2>Investigation:</h2>
  <ul>
  <li>It turns out that the <strong>error disappears when</strong> I include the same <code>About.vue</code> in the parent-app itself (just switch the route, to try it out), i.e., it works when <strong>we avoid the import from the built library</strong>.</li>
  <li>So it <strong>looks like it's a problem with the build setup</strong>
  (one of <code>vue.config.js</code>, <code>webpack</code>, <code>babel</code>, <code>typescript</code>, ...)</li>
  </ul>
  <hr />
  <h2>Reproduce the error:</h2>
  <h3>1. Clone, install, run</h3>
  <pre class="lang-sh prettyprint-override"><code>git clone git@github.com:tholst/vue-composition-api-comp-lib.git &amp;&amp; cd vue-composition-api-comp-lib/child-component-lib &amp;&amp; npm install &amp;&amp; npm run build &amp;&amp; cd ../parent-app/ &amp;&amp; npm install &amp;&amp; npm run serve
  </code></pre>
  <p>or one by one</p>
  <pre class="lang-sh prettyprint-override"><code>git clone git@github.com:tholst/vue-composition-api-comp-lib.git
  cd vue-composition-api-comp-lib/child-component-lib
  npm install
  npm run build
  cd ../parent-app/
  npm install
  npm run serve
  </code></pre>
  <h3>2. Open Browser</h3>
  <ul>
  <li>Go to http://localhost:8080/</li>
  </ul>
  <h3>3. Open Dev Tools to See Error</h3>
  <pre><code>[Vue warn]: Error in data(): &quot;Error: You must use this function within the &quot;setup()&quot; method, or insert the store as first argument.&quot;
  
  found in
  
  ---&gt; &lt;Anonymous&gt;
         &lt;App&gt; at src/App.vue
           &lt;Root&gt;
  </code></pre>
  <h2>Error Screenshot</h2>
  <p><a href="https://i.stack.imgur.com/k7dvw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k7dvw.png" alt="Error in console" /></a></p>
  <h2>Environment Info:</h2>
  <pre><code>Node: 14.2.0
  npm: 6.14.8
  Chrome: 86.0.4240.198
  
  npmPackages:
      @vue/babel-sugar-composition-api-inject-h:  1.2.1 
      @vue/babel-sugar-composition-api-render-instance:  1.2.4 
      ...    
      @vue/cli-overlay:  4.5.8 
      @vue/cli-plugin-babel: 4.5.8 
      @vue/cli-plugin-router: 4.5.8 
      @vue/cli-plugin-typescript: 4.5.8 
      @vue/cli-plugin-vuex:4.5.8 
      @vue/cli-service: 4.5.8 
      @vue/cli-shared-utils:  4.5.8 
      @vue/component-compiler-utils:  3.2.0 
      @vue/composition-api: 1.0.0-beta.19 
      @vue/preload-webpack-plugin:  1.1.2 
      typescript: 3.9.7 
      vue: 2.6.12 
      vue-loader:  15.9.5 (16.0.0-rc.1)
      vue-router: 3.4.9
      vue-template-compiler: 2.6.12 
      vue-template-es2015-compiler:  1.9.1 
      vuex: 3.5.1 
      vuex-composition-helpers: 1.0.21 
  
  npmGlobalPackages:
      @vue/cli: 4.5.8
  </code></pre>