title: [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content ( Nuxt / Vue / lerna monorepo )
body: <p>I am trying to run a basic Nuxt app with an external Vue component built using vue-cli inside a lerna monorepo.</p>
  
  <p>The page briefly shows component content (server rendered) and then it disappears throwing the following errors.</p>
  
  <p><code>"export 'default' (imported as 'Header') was not found in 'a2b-header'</code></p>
  
  <p>followed by</p>
  
  <p><code>Mismatching childNodes vs. VNodes:  NodeList(7) [svg, text, div#app, text, h2.subtitle, text, div.links] (7) [VNode, VNode, VNode, VNode, VNode, VNode, VNode]</code></p>
  
  <p>and finally a red Vue warning</p>
  
  <p><code>[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside &lt;p&gt;, or missing &lt;tbody&gt;. Bailing hydration and performing full client-side render.</code></p>
  
  <p>The setup I am using for the external component is <strong>package.json</strong>:</p>
  
  <pre><code>{
    "name": "a2b-header",
    "version": "0.1.0",
    "private": true,
    "main": "./dist/a2b-header.umd.js",
    "scripts": {
      "serve": "vue-cli-service serve",
      "build": "vue-cli-service build --target lib --name a2b-header src/main.js",
      "lint": "vue-cli-service lint"
    },
    "dependencies": {
      "core-js": "^3.4.3",
      "vue": "^2.6.10"
    },
    ...
  }
  </code></pre>
  
  <p>my <strong>main.js</strong> looks like below:</p>
  
  <pre><code>import Header from './Header.vue'
  
  export default Header
  </code></pre>
  
  <p>and component file itself <strong>Header.vue</strong> is:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;h1&gt;Welcome to Your Vue.js App&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Header'
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>that all is being imported in the Nuxt project <strong>index.vue</strong> using simple:</p>
  
  <pre><code>import Header from 'a2b-header'
  </code></pre>
  
  <p>and.... it does not work. I am thinking the mismatch of SSR vs clients is connected to the incorrect export, probably solvable by some webpack config but after trying many different things I am rly struggling here.</p>
  
  <p>The reason I want this to get it to work is that in the monorepo we plan to have various Vue applications (both SPA and and Nuxt )and the ability to encapsulate common code in components reusable across different projects is crucial.</p>