Solvedvue awesome 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!

54 Answers

✔️Accepted Answer

@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.

Other Answers:

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

Sorry, I forgot to mention one more thing. Vue's webpack project template has excluded node_modules from files to be transpiled by Babel so you have to exclude vue-awesome from the exclude pattern in build/webpack.base.conf.js like this: exclude: /node_modules(?![\\/]vue-awesome[\\/])/.

@massada

Thanks for the solution. It seems that I should add a "Usage with Nuxt.js" section in the readme.

More Issues: