vue-awesome: Uncaught SyntaxError: Unexpected token import

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

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.

@Justineo This is cnpm’s problem. Package folder have been changed, so exclude: /node_modules(?![\\/]vue-awesome[\\/])/ does not work.

vue-awesome -> .npminstall/vue-awesome/2.0.3/vue-awesome

@Pistos

1. Use vue init webpack to start from scratch.

2. After finished what vue-cli ask you to do, run npm i vue-awesome.

3. Modify exclude config in build/webpack.base.conf.js as I mentioned earlier.

4. Import Vue-Awesome.

   eg. in src/App.vue:

   // import the source version of the component
   import Icon from 'vue-awesome/components/Icon'
   
   // pick your icons
   import 'vue-awesome/icons/flag'
   
   export default {
     name: 'app',
     components: {
       Hello,
       Icon // register local component here
     }
   }
   

   Add components into the template:

   <icon name="flag"></icon>
   

5. Run npm run dev and it should be working now.

It seemed to be not working correctly with Vue 2.0’s webpack template. I’ll look into this guys.

@dcrystalj if you are testing with Jest, you should take a look at this: https://github.com/Justineo/vue-awesome#unit-testing-with-jest

I didn’t solve this.

/root/WebstormProjects/PHC/vue-server/node_modules/vue-awesome/icons/index.js:1
(function (exports, require, module, __filename, __dirname) { import './500px'
                                                              ^^^^^^

SyntaxError: Unexpected token import

my webpack configure file

rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: vueConfig
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                // include: ['node_modules/vue-awesome'],
                exclude: /node_modules(?![\\/]vue-awesome[\\/])/
            },
...

I use “vue-awesome”: “^2.3.1” and I use vue ssr.

I do realize all that… Just saying how it could be easier - as obviously we are on an issue here, that people have

On Thu, Dec 22, 2016 at 4:27 PM GU Yiling notifications@github.com wrote:

@tonypee https://github.com/tonypee

You can import from the root module and it is already ES5 but just with all icons bundled. I’d rather provide ES Next source because users can use tools that understands ES Next (eg. Rollup.js) to further optimize the result bundle. Many users using Vue are already using transpilers so I assume it will not be a big problem. Maybe it can be elaborated better in the project readme.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/Justineo/vue-awesome/issues/7#issuecomment-268721819, or mute the thread https://github.com/notifications/unsubscribe-auth/AC8aNRoRbFpf9QtCF39CDx1YusuxHSmPks5rKgoZgaJpZM4KS9LO .

import * as Icon from 'vue-awesome'

^ this did the trick for me, along with

components: {
  'icon': Icon,
}

in the .vue file. (I am using the webpack template.)