Vue-awesome-swiper: Webpack/UglifyJs error after updating to 3+

[smakinson]

中文用户注意：

1. 尽量用英文描述你的 issue
2. 不要把内容堆彻在标题上，逻辑清晰地写在内容区
3. 贴代码要提前格式化好，有颜色高亮那种，贴文本，不要贴图片
4. 提问题前，必须仔细阅读 REMADE.md + 在已关闭的问题中寻找与自身相关的问题，90% 的可能它已经被解决
5. 如果无法做到提一个合格、优秀的问题，则问题会被 close + block

BUG REPORT TEMPLATE

Vue.js version and component version

Using the latest Quasar. ( http://quasar-framework.org )

I updated to 3.0.2 of vue-awesome-swiper and I am seeing this:

https://github.com/nolimits4web/Swiper/issues/2206

Are you seeing that issue when used with webpack/uglify? The exclude they mention doesn't take care of it and I'm not sure its the best approach.

NPM:
"dependencies": {
"axios": "^0.16.2",
"babel-runtime": "^6.25.0",
"fuse.js": "^3.2.0",
"gsap": "^1.20.3",
"howler": "^2.0.5",
"jsonp": "^0.2.1",
"linkifyjs": "^2.1.4",
"moment": "^2.19.1",
"moment-timezone": "^0.5.14",
"numeral": "^2.0.6",
"qs": "^6.5.1",
"quasar-extras": "0.x",
"quasar-framework": "^0.14.7",
"sanitize-html": "^1.15.0",
"vue": "^2.5.3",
"vue-awesome-swiper": "^3.0.2",
"vue-meta": "^1.3.1",
"vue-router": "^3.0.1",
"vue-script2": "^2.0.1",
"vuelidate": "^0.6.1",
"vuex": "^2.3.1"
},
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.0.0",
"babel-eslint": "^7.0.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"colors": "^1.1.2",
"connect-history-api-fallback": "^1.1.0",
"css-loader": "^0.28.7",
"es6-promise": "^4.1.1",
"eslint": "^4.8.0",
"eslint-config-standard": "^10.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.2.2",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.2",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"glob": "^7.1.2",
"html-webpack-plugin": "^2.30.1",
"http-proxy-middleware": "^0.17.0",
"json-loader": "^0.5.7",
"opn": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"postcss-loader": "^1.0.0",
"progress-bar-webpack-plugin": "^1.10.0",
"purify-css": "^1.2.6",
"shelljs": "^0.7.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"tachyons-cli": "^1.0.11",
"url-loader": "^0.5.7",
"vue-loader": "^13.0.5",
"vue-style-loader": "^3.0.3",
"vue-template-compiler": "^2.5.3",
"webpack": "^3.6.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-hot-middleware": "^2.19.1",
"webpack-merge": "^4.1.0"
}

Reproduction Link

• A minimal JSBin, JSFiddle, Codepen, or a GitHub repository that can reproduce the bug.
• You could start with this template: https://jsfiddle.net/39epgLj0/

Steps to reproduce

I'm using the swiper components normally and did not see the issue before updating.

What is Expected?

No Error

What is actually happening?

ERROR in js/vendor.js from UglifyJs
Unexpected token: name (w) [js/vendor.js:58086,4]

[surmon-china]

https://github.com/nolimits4web/Swiper/issues/2206

[surmon-china]

module: {
  rules: [
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('test')],
      exclude: [/(node_modules)(?![/|\\](swiper))/]
    }
  ]
}

[surmon-china]

In my test webpack project, I did not get this error. If the above configuration does not work, try using the following aliases in my webpack project:

https://github.com/surmon-china/vue-awesome-swiper/blob/master/config/build.conf.js#L30

alias: {
  'swiper': 'swiper/dist/js/swiper.js'
}

swiper/dist/js/swiper.js is temporarily unavailable due to the need to be compatible with AMD UMD modularity, otherwise the module package will not be recognized in the browser, so it is temporarily unable to update the fixes from within the component.

[smakinson]

Thank you, it looks like the alias is the answer. I am currently including the css via:

require('swiper/dist/css/swiper.css')

which also no longer works. How are you including the css?

[smakinson]

Ok, I have it working like this:

Webpack:

swiper: 'swiper/dist/js/swiper.js',
'swiper-css': path.resolve(__dirname, '../node_modules/swiper/dist/css/')

css:
require('swiper-css/swiper.css')

[surmon-china]

@smakinson

But...

you can

alias: {
  'swiper$': 'swiper/dist/js/swiper.js'
}

require('swiper/dist/css/swiper.css')

[smakinson]

Thats better, I'll give that a go.

[smakinson]

That works as well, thanks again.

[smakinson]

In the new version I sometimes see in the console: Object doest support property or method reLoop. Is that an issue I should open for this repo or would that be swiper itself?

[surmon-china]

Open a issues, i will fix it.

[smakinson]

Ok, thanks

[surmon-china]

If you are encountering errors while packing with webpack, please refer to the solution here #206 #204. Add the corresponding alias code in your webpack config.

alias: {
  'swiper$': 'swiper/dist/js/swiper.js'
}

v3.0.6 fix it.