Uncaught SyntaxError: Unexpected token import

First, I installed: npm install vue-awesome --save-dev

Then I added the following lines to main.js, based on the readme and example:

import Icon from 'vue-awesome/src/components/Icon.vue';
Vue.component('icon', Icon);

I get this error in the browser console: > Uncaught SyntaxError: Unexpected token import Icon.vue?7cbb:36

Am I doing something incorrect? Thx!

[massada]

@jonnyparris

Nuxt’s server webpack config excludes all external modules from being transpiled in the server build. You need to whitelist vue-awesome (and it’s subpaths). Here’s how I fixed it for SSR:

const nodeExternals = require('webpack-node-externals')

module.exports = {
   ...
  extend(config, { isServer }) {
    if (isServer) {
      config.externals = [
        nodeExternals({
          whitelist: [/\.(?!(?:js|json)$).{1,5}$/i, /^vue-awesome/]
        })
      ]
    }
  },
  ...
}

Note: the first regex comes from the base nuxt server config.

[fatbrain]

I had similar (if not the same) problem, I’m using webpack + vue-loader + babel. I have a .babelrc but without add-module-exports plugin, but adding that to my own .babelrc didn’t do me any good. I ended up importing the dist instead, worked like a charm.

import * as Icon from 'vue-awesome'

Cheers, fatbrain