Npm run build fails

[bskimball]

Nuxt rc11 Blog-module 0.0.1-6 on build Uglify fails

ERROR in 3.401771ae88b5828911b6.js from UglifyJs
Unexpected token: operator (>) [./node_modules/@nuxtjs/blog/src/app/mixins/api.js:7,0][3.401771ae88b5828911b6.js:111,20]

ERROR in 5.607bddffaeab0f9a14c9.js from UglifyJs
Unexpected token: operator (>) [./node_modules/@nuxtjs/blog/src/app/mixins/api.js:7,0][5.607bddffaeab0f9a14c9.js:100,20]

ERROR in 6.72fb925f626a18a70784.js from UglifyJs
Unexpected token punc «(», expected punc «:» [./node_modules/@nuxtjs/blog/src/app/mixins/collection.js:7,0][6.72fb925f626a18a70784.js:117,17]

ERROR in 7.d3452f4d13ebcec5cc93.js from UglifyJs
Unexpected token punc «(», expected punc «:» [./node_modules/@nuxtjs/blog/src/app/mixins/blog.js:6,0][7.d3452f4d13ebcec5cc93.js:77,17]

Looks like the code in the mixins is not run through babel before uglify tries to do what it needs to do, therefore is fails because it does not recognize the es6 arrow functions

_{This question is available on Nuxt.js community (#c2)}

[bskimball]

In order to get around this issue, I altered my nuxt.config.js to transpile the @nuxtjs directory in node_modules using babel on build. Specifically look at the exclude on the extend function in the build configuration.

Below is an example of my nuxt.config.js.

module.exports = {
  /*
  ** Headers of the page
  */
  head: {
    title: 'starter',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'Nuxt.js project' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#20a0ff' },
  plugins: [
    '~/plugins/vue-observe-visibility',
    '~/plugins/vue-scrollto'
  ],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/blog'
  ],
  /*
  ** Build configuration
  */
  build: {
    /*
    ** Babel
     */
    babel: {
      'presets': ['vue-app'],
      'plugins': [
        ['component', [{
          'libraryName': 'element-ui',
          'styleLibraryName': 'theme-default'
        }]]
      ],
      'comments': false
    },
    /*
    ** Run ESLINT on save
    */
    extend (config, ctx) {
      if (ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      config.module.rules.push({
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules(?!(\/|\\)@nuxtjs)/,
        options: Object.assign({}, this.babelOptions)
      })
    }
  }
}

I'm sure there is a cleaner way to do this.

[znck]

I've been using it here (https://github.com/znck/znck.github.io/blob/dev/nuxt.config.js), your can use it as reference.

I'll look into it by the weekend.

[bskimball]

No worries. It works fine when I added the node_modules exclusion. I was working on just adding it directly in to my Nuxt set up (instead of a module), so I could change the templates.

[adam-lynch]

I had this problem recently with vue-cli's pwa template (not nuxt). I had to do a very similar fix, I can't see any way around it. I used include instead of exclude though (it's probably safer). Specifically, we got the error when trying to import pretty-bytes.

We were already transpiling stuff in certain directories like src and test. So we wanted to also transpile some problematic (i.e. 2015+) dependencies. Long story short, we ended up with this:

const babelLoaderIncludes = [resolve('src'), resolve('test')];
if (config.dependenciesToTranspile) {
  babelLoaderIncludes.push(...config.dependenciesToTranspile.map(require.resolve));
}

//......

{
          test: /\.js$/,
          loader: 'babel-loader',
          include: babelLoaderIncludes,
},

(require.resolve is the safest way to do it so it gets the full path, no matter where you are)