CODEWITHSUNDEEP
node.jsvue.jsnuxt.jsyarnpkg
Vincent Decaux
Vincent Decaux

Reputation: 10714

Nuxt - Node error when I want to import some packages

I use Nuxt, and sometimes, when I want to use some npm packages, I have this error:

SyntaxError
Unexpected token '<'

The stack:

vm.js:102:7
new Script
internal/modules/cjs/loader.js:1114:10
Module._extensions..js
internal/modules/cjs/loader.js:950:32
Module.load
internal/modules/cjs/loader.js:790:14
Module._load
internal/modules/cjs/loader.js:974:19
Module.require
webpack:/external "vue-typeahead-bootstrap":1:
Object.vue-typeahead-bootstrap
webpack/bootstrap:25:
__webpack_require__
pages/account/tabs/addresses.js:693:81
Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./components/address/form/country.vue?vue&type=script&lang=js&
webpack/bootstrap:25:

I have this error for example on this package: vue-typeahead-bootstrap

If I import the package:

import VueTypeaheadBootstrap from ['vue-typeahead-bootstrap'](https://github.com/mattzollinhofer/vue-typeahead-bootstrap)

export default {
  components: { VueTypeaheadBootstrap },
}

It throws the error.

Is it because the package is not supported or something ?

Upvotes: 1

Views: 285

Answers (1)

kissu
kissu

Reputation: 46706

You may try to transpile it. https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#transpile

Add the package name like this

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

As answered here: https://github.com/mattzollinhofer/vue-typeahead-bootstrap/issues/19#issuecomment-645510809

Upvotes: 1

Related Questions