bestmomo's avatar

Webpack error on ES6

Hello,

I get a webpack error on ES6 :

E:\laragon\www\laravel5  25/10/2016 14:13:27,41
λ gulp
[14:13:39] Using gulpfile E:\laragon\www\laravel5\gulpfile.js
[14:13:39] Starting 'all'...
[14:13:39] Starting 'sass'...
[14:13:40] Finished 'sass' after 932 ms
[14:13:40] Starting 'webpack'...
{ [Error: ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Panier.vue
Module build failed: Error
    at ForOfStatement.initialise (E:\laragon\www\laravel5\node_modules\buble\dist\buble.umd.js:2004:65)
    at E:\laragon\www\laravel5\node_modules\buble\dist\buble.umd.js:9381:56
    at Array.forEach (native)
    at BlockStatement.initialise (E:\laragon\www\laravel5\node_modules\buble\dist\buble.umd.js:9381:15)
    at FunctionExpression.initialise (E:\laragon\www\laravel5\node_modules\buble\dist\buble.umd.js:858:12)
    at FunctionExpression.initialise (E:\laragon\www\laravel5\node_modules\buble\dist\buble.umd.js:2098:31)
    at Property.initialise (E:\laragon\www\laravel5\node_modules\buble\dist\buble.umd.js:858:12)
    at E:\laragon\www\laravel5\node_modules\buble\dist\buble.umd.js:856:61
    at Array.forEach (native)
 @ ./resources/assets/js/components/Panier.vue 4:18-100
 @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/App.vue
 @ ./resources/assets/js/components/App.vue
 @ ./resources/assets/js/app.js]
  message: './~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Panier.vue\nModule build failed: Error\n    at ForOfStatement.initialise (E:\\laragon\\www\\laravel5\\node_modules\\buble\\dist\\buble.umd.js:2004:65)\n    at E:\\laragon\\www\\laravel5\\node_modules\\buble\\dist\\buble.umd.js:9381:56\n    at Array.forEach (native)\n    at BlockStatement.initialise (E:\\laragon\\www\\laravel5\\node_modules\\buble\\dist\\buble.umd.js:9381:15)\n    at FunctionExpression.initialise (E:\\laragon\\www\\laravel5\\node_modules\\buble\\dist\\buble.umd.js:858:12)\n    at FunctionExpression.initialise (E:\\laragon\\www\\laravel5\\node_modules\\buble\\dist\\buble.umd.js:2098:31)\n    at Property.initialise (E:\\laragon\\www\\laravel5\\node_modules\\buble\\dist\\buble.umd.js:858:12)\n
    at E:\\laragon\\www\\laravel5\\node_modules\\buble\\dist\\buble.umd.js:856:61\n    at Array.forEach (native)\n @ ./resources/assets/js/components/Panier.vue 4:18-100\n @ ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/App.vue\n @ ./resources/assets/js/components/App.vue\n @ ./resources/assets/js/app.js',
  showStack: false,
  showProperties: true,
  plugin: 'webpack-stream',
  __safety: { toString: [Function: bound ] } }

It fails to transform this ES6 code :

let total = 0;
for(let el of this.panier) {
  total += el.prix * el.quantite
}

All is OK with ES5 code.

I read this post but the solution doesn't work for me.

AnyOne has an idea ?

0 likes
4 replies
iraklisg's avatar

@bestmomo After reading (this)[https://laracasts.com/discuss/channels/elixir/laravel-53-error-on-gulp-execution?page=2] post I did yarn add buble-loader --save and run gulp agian. This time the error was different

{ [Error: ./~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/contractuals/components/ApplicantForm.vue
Module build failed: 
1085 :         },
1086 :         methods: {
1087 : 
1088 :             tabHasErrors(...errors) {
1089 :                 for (let error of errors) {
                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
for...of statements are not supported. Use `transforms: { forOf: false }` to skip transformation and disable this error, or `transforms: { dangerousForOf: true }` if you know what you're doing (1089:16)
Error
    at handleError (/home/igeorgas/webApps/apptree2/node_modules/buble-loader/index.js:22:15)
    at Object.BubleLoader (/home/igeorgas/webApps/apptree2/node_modules/buble-loader/index.js:38:9)
 @ ./resources/assets/js/contractuals/components/ApplicantForm.vue 8:18-107
 @ ./resources/assets/js/contractuals/main.js]
  message: './~/buble-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/contractuals/components/ApplicantForm.vue\nModule build failed: \n1085 :         },\n1086 :         methods: {\n1087 : \n1088 :             tabHasErrors(...errors) {\n1089 :                 for (let error of errors) {\n                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\nfor...of statements are not supported. Use `transforms: { forOf: false }` to skip transformation and disable this error, or `transforms: { dangerousForOf: true }` if you know what you\'re doing (1089:16)\nError\n    at handleError (/home/igeorgas/webApps/apptree2/node_modules/buble-loader/index.js:22:15)\n    at Object.BubleLoader (/home/igeorgas/webApps/apptree2/node_modules/buble-loader/index.js:38:9)\n @ ./resources/assets/js/contractuals/components/ApplicantForm.vue 8:18-107\n @ ./resources/assets/js/contractuals/main.js',
  showStack: false,
  showProperties: true,
  plugin: 'webpack-stream',
  __safety: { toString: [Function: bound ] } }
igeorgas@dhd-105:~/webApps/apptree2$ 

Notice the following line in the output

for...of statements are not supported. Usetransforms: { forOf: false }to skip transformation and disable this error, ortransforms: { dangerousForOf: true }if you know what you\'re doing (1089:16)

This error occurred to me when I tried to use a for ...of loop. Removing the for ...of loop and running gulp again results to no errors

I am still looking into it...

iraklisg's avatar

@exequeryphil, since I switched from elixir to laravel-mix and I cannot reproduce the error anymore. However, using [email protected] (depending on babel-loader 6.2.9 and webpack 2.2) with defaults, I am can successfully build my assets using ES6 code and for... of loops

Please or to participate in this conversation.