ERROR when npm run build

[romoo]

follow the steps

vue init webpack test
cd test
yarn install
yarn add vue-particles

edit main.js

import VueParticles from 'vue-particles'
Vue.use(VueParticles)

edit Hello.vue

<vue-particles color="#dedede"></vue-particles>

run npm run build

ERROR in static/js/vendor.5849ac9944c6d70a847c.js from UglifyJs
Unexpected token: punc (() [./~/vue-particles/src/vue-particles/index.js:6,0][static/js/vendor.5849ac9944c6d70a847c.js:111,12]

[shazha]

in yourwebpack.base.conf.js, include vue-particles in babel-loader rule as below:

{
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/vue-particles')]
      },

[romoo]

@shazha It works, thank you.

[adavie1]

It worked for me as well, however, I'm curious what's the cause and why does this fix it? Still trying to get my head around webpack! :-P

Brilliant component though. Made my login screen look very spiffy.

[LinusBorg]

@adavie1 the explanation is simple:

• vue-particles uses ES6 syntax in its source, it's not transpiled to ES5.
• uglify cant deal with ES6 Syntax.

Hence, the error.

The webpack config of your project is set up to only transpile code from your src folder, so it doesn't transpile vue-particles files, which live in /node_modules.

So including their path in the babel-loader config makes babel-loader transpile vue-particles as well.

[adavie1]

@LinusBorg Thanks, that makes sense.

[gridsystem]

Not sure if I'm doing this correctly but I can't get @shazha's example working with nuxt rc8.

let resolve = require('resolve');
...

    build: {
        vendor: [
        ],
        // Run ESLINT on save
        extend (config, ctx) {
            if (ctx.dev && 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',
                include: [resolve('src'), resolve('test'), resolve('node_modules/vue-particles')]
            })
        },
        postcss: [
            require('postcss-easings')
        ]
    },

[chrislandeza]

Hi guys. How do you fix this in laravel-mix?

[adavie1]

Sorry, I don't use laravel-mix, can't help you there.

[UknowHui]

if use cnpm

resolve('node_modules/_vue-particles')

[ranlix]

@gridsystem Does it work in your project? I find that even if babel-loader is added to nuxt.config.js, build keeps be failed.

[adavie1]

@liran319 it works for me.

I'm using yarn run dev for testing, and yarn build for deployment (after copying the contents of ../dist to my target server). My integration with Laravel is purely on the backend, my whole app is in Vue.

Webpack config in ../build/webpack.base,conf.js:

rules: [
...
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/vue-select'),
           resolve('node_modules/vue-particles')
        ]
      },
...
]

I use to prettify the login page, code is as follows:

 <progressive-background src="../static/tower.jpg" class="bg-image">
   <vue-particles
       class="particles"
       color="#bbbbbb"
       :lineLinked="true"
       :lineOpacity="0.4"
       :linesDistance="150"
       :moveSpeed="3" />

   <div class="loginbox">
     <div class="innerbox">
    <el-row align="middle">
      <el-col align="center" :span="12" :offset="7">
         <img style="height: 4.32em; padding-bottom: 0.8em;" :src="'../../' + clientLogo" :alt="clientName">
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="6" :offset="2">
        Login
      </el-col>
      <el-col  :span="12">
        <el-input v-model="login" placeholder="Enter login id" type="text"></el-input>
      </el-col>
    </el-row>
   ... code ...
    </div>
    </div>

  </progressive-background>

import in script:

import VueParticles from 'vue-particles'
...
Vue.use(VueParticles)

Hope that helps.

[tale503]

@shazha it works ,thanks

[qingzhu1224]

@shazha It works, thank you.

[Vercjames]

For those using the webpack simple setup, during the build process you may run into "RefereceError: resolve is not defined" when implementing the above fix.

add the following to the top of your webpack.config.js file:

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

then append your babel-loader section

        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/vue-particles')]