SyntaxError: Unexpected token <

[HasnatH]

I have added vue-bootstrap-typeahead to my project as follows:

npm i vue-bootstrap-typeahead --save

I have other components I am importing such as vue-bootstrap-datetimepicker like this:

import DatePicker from 'vue-bootstrap-datetimepicker'

However, when I try to import the vue-bootstrap-typeahead like this:

import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'

I get the following error:

SyntaxError: Unexpected token <

I have also tried to use require but face the same error:

var VueBootstrapTypeahead = require('vue-bootstrap-typeahead')

I haven't even added it to my components or to my template

Please advise why I might be having this issue.

Thanks.

[alexurquhart]

What does your build chain look like? Are you using vue-cli?

[HasnatH]

I am using this project as my base: https://github.com/SimulatedGREG/electron-vue

This is the main.js where Vue is setup
https://github.com/SimulatedGREG/electron-vue/blob/master/template/src/renderer/main.js

I am trying to import the vue-bootstrap-typeahead on a Component vue

I'm not sure what the issue is as other packages are being imported fine in the same Component vue

I've also tried to import in the main.js to do Vue.use(), however, I get the same unexpected token error as soon as I import

[alexurquhart]

I just setup electron-vue and installed the component and got it working without the syntax error. Perhaps upload your .vue file in a gist (along with the console stack trace) or paste it here so we can see what's going on a bit better?

[HasnatH]

Thanks for setting up the project and helping!

I've managed to fix the issue.

For reasons i'm not sure of (yet), I had to explicitly import the Component like this:

import VueBootstrapTypeahead from 'vue-bootstrap-typeahead/src/components/VueBootstrapTypeahead'

[BloodSucker123]

Still not working. Also I use @HasnatH but still its not working instead it says Module not found

[danielbonifacio]

I was getting the same error using nuxt in universal mode.

I solved creating a nuxt plugin with ssr disabled:

// plugins/autocomplete.js
import Vue from 'vue'
import VueBootstrapTypeahead from 'vue-bootstrap-typeahead'

Vue.component('v-autocomplete', VueBootstrapTypeahead)

// nuxt.config.js
{
  plugins: [
    { src: '~/plugins/autocomplete', ssr: false }
  ]
}

Idk why it happens, but apparently this solve the problem.

[kangchals]

For me, it happens when page is reloaded. ( I am using nuxt too )
hmm...

[0xK3K]

@danielbonifacio
Your solution does work, but please mind that there is a typo in your code, it's vue-bootstrap-typeAhead, not vue-bootstrap-typehead.
Otherwise, thank you for solving a major headache ;)

[tettoffensive]

@danielbonifacio Does adding ssr false just mean the component won't show up when the server renders the component?

[danielbonifacio]

@tettoffensive It means that the component will be rendered only on the client-side. Nuxt will only have a reference to where it should be on the template, but will not mount or execute it. That's because a server rendering does not have some APIs, like document. They're available on the browser.

[pdpotter]

I managed to get the vue-typeahead-bootstrap component to render server side as well in a nuxt application by configuring the vue-typeahead-bootstrap component to be transpiled in nuxt.config.js:

{
  build: {
    transpile: [
      ({ isServer }) => 'vue-typeahead-bootstrap'
    ]
  }
}