[1049] iview tree is not matching server-rendered content

I did exactly as you have in your docs for plugins. i have a file named iview.js and inside of there i have. Im using nuxt/express template

    ` 

      import iView from 'iview'
      import Vue from 'vue'
      import 'iview/dist/styles/iview.css'

     Vue.use(iView)

`

just like u recommend. Next i add that plugin in nuxt.config.js `

          plugins: [
          // ssr: false to only include it on client-side
          { src: '~plugins/iview.js', ssr: false }
            ]

`

but it keeps giving me this error

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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

I hope there is a way around it. I tried to import Button from iview manually but i get an error saying 'Button' is defined but never used no-unused-vars but its nonsense because i have <Button type="primary">Primary</Button>

So then it made me think to go to my component and do the following inside of the <script> `

      import Button from 'iview/src/components/button'
      export default {
        data () {
          return {
            Button
          }
        }

}`

And it started WORKING, right for a few seconds and then i get an error saying this:

/home/linux/Desktop/test/node_modules/iview/src/components/button/index.js:1 (function (exports, require, module, filename, dirname) { import Button from './button.vue';SyntaxError: Unexpected token import

EDIT:

in my iview.js i have this

      import Vue from 'vue'
      import iView from 'iview'
      import 'iview/dist/styles/iview.css'
      if (process.BROWSER_BUILD) {
        require('iview')
      }
      Vue.use(iView)

then in my vendors and plugins

       plugins: [{ src: 'plugins/iview.js', ssr: false }]
        vendor: ['axios',  'iview'],

then in my index.vue

      <template>
        <div class="">
          <Button type="primary" @click="modal6 = true">Open modal</Button>
          <Modal
              v-model="modal6"
             title="sync"
              :loading="loading"
             @on-ok="asyncOK">
              <p>This is a sync modal</p>
          </Modal>
        </div>
      </template>

      <script>
      export default {
        layout: 'iview',
        data () {
          return {
            modal6: false,
            loading: true
          }
        },
        methods: {
          asyncOK () {
            setTimeout(() => {
              this.modal6 = false
            }, 2000)
          }
        }

      }
      </script>

and it gives me the following errors

      Mismatching childNodes vs. VNodes:  (5) [VNode, VNode, VNode, VNode, VNode]

      [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 <p>, or missing <tbody>. Bailing hydration and performing full client-side render.