SyntaxError Unexpected token '<' after a refresh

[JR-Utily]

Hello ! Your module seems very great, I like the simplicity to use it.

But whenever I had it in my nuxt app, I can't refresh (F5) the page any more.

Here is a really simple page with just the component set:

<template>
  <div>
      <h1 class="title">
Upload Cards
</h1>

<!-- No input yet :) -->

</div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

import PictureInput from 'vue-picture-input'

@Component({
  components: {
    PictureInput
  }
})
export default class CardsIndex extends Vue {
}

</script>

It display well first time I access the page, but if I F5 (or if I save the file again in dev mode...) it shows:

The important frame may be this one:

I'm still discovering Vue.js and Nuxt at the moment, so maybe it is not related to your module and it is a regular newbie issue :)

[kihayu]

Actually, I have the same problem. I'm using Nuxt 2.14.12 with Vue 2.6.11

[fcojavierdomenech]

Any thoughts on this matter?

I've tried cvaize's solution but didn't work for me. Nuxt 2.14.12 also!

[fcojavierdomenech]

Ummm fixed it wrapping the component into <client-only> tags

[JR-Utily]

so you mean that: https://nuxtjs.org/docs/2.x/features/nuxt-components#the-client-only-component ?

[fcojavierdomenech]

Yep, I fixed it with:

                    <client-only>
                      <vue-picture-input 
                        ref="pictureInput"
                        width="128" 
                        height="98" 
                        margin="16" 
                        accept="image/jpeg,image/png" 
                        size="10" 
                        button-class="btn"
                        :custom-strings="{
                        upload: '<h1>Bummer!</h1>',
                        drag: 'Drag a 😺 GIF or GTFO'
                        }"
                        @change="onImageChange">
                      </vue-picture-input>
                    </client-only>

And also setting the ssr to false on my nuxt.config.js:

// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
  plugins: [
      '~/plugins/vue-api-query',
      '~/plugins/filters',
      { src: '~/plugins/vue-picture-input', ssr: false }
  ],