Laravel 5.3 failing on gulp watch

Published 2 years ago by joseph127

So I installed laravel using the develop branch for 5.3. Even though the docs under "master" on laravel.com are for 5.3 "laravel new" still uses laravel 5.2. Although when I then run "npm install" and "gulp watch" I get the error.

    ERROR in ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Example.vue

It's kinda annoying it doesn't just work from out the box. I have updated node and npm and I can't seem to figure out what I am doing wrong. I also tried not using webpack and using browserify instead and installing the node package to go along with that. That also fails to read a .vue file saying there is an unexpected token where starts.

Does anyone have the same issue or know how to fix this.

Thanks!

Best Answer (As Selected By joseph127)
tjames
tjames
2 years ago

It's an issue with the babel preset, try running: npm i -D -E babel-preset-es2015@6.9.0 to lock down the version to 6.9.0
nattha
nattha
2 years ago (15,580 XP)

same problem here... :(
lorvent
lorvent
2 years ago (14,235 XP)

laravel-elixir v6 is still buggy as @JeffreyWay making breaking changes.

whenever i try v6 (because of beautiful terminal output) i encounter problems and usually goes back to v4
Puretears
Puretears
2 years ago (11,470 XP)

The same... :(
Hulu
Hulu
2 years ago (17,205 XP)

I'm not having an issue using gulp, I'm having a problem using webpack... after using gulp watch I get this

$ gulp watch
(node:8332) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[12:35:06] Using gulpfile ~/Docker/apps/laravel53/gulpfile.js
[12:35:06] Starting 'watch'...
[12:35:06] Starting 'all'...
[12:35:06] Starting 'sass'...
[12:35:07] Finished 'sass' after 1.77 s
[12:35:07] Starting 'webpack'...
[12:35:09] Finished 'webpack' after 1.39 s
[12:35:09] Finished 'all' after 3.17 s
[12:35:09] Starting 'default'...
┌───────────────┬───────────────────────────────┬────────────────────────────────┬────────────────────┐
│ Task          │ Summary                       │ Source Files                   │ Destination        │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.sass()    │ 1. Compiling Sass             │ resources/assets/sass/app.scss │ public/css/app.css │
│               │ 2. Autoprefixing CSS          │                                │                    │
│               │ 3. Concatenating Files        │                                │                    │
│               │ 4. Writing Source Maps        │                                │                    │
│               │ 5. Saving to Destination      │                                │                    │
├───────────────┼───────────────────────────────┼────────────────────────────────┼────────────────────┤
│ mix.webpack() │ 1. Transforming ES2015 to ES5 │ resources/assets/js/app.js     │ public/js/app.js   │
│               │ 2. Writing Source Maps        │                                │                    │
│               │ 3. Saving to Destination      │                                │                    │
└───────────────┴───────────────────────────────┴────────────────────────────────┴────────────────────┘
[12:35:09] Finished 'default' after 6.35 ms
[12:35:09] Finished 'watch' after 3.2 s
{ [Error: ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Example.vue
Module build failed: Error: Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.
    at Object.<anonymous> (/Users/Irons/Docker/apps/laravel53/node_modules/babel-preset-es2015-webpack/index.js:35:11)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at /Users/Irons/Docker/apps/laravel53/node_modules/babel-core/lib/transformation/file/options/option-manager.js:324:15
    at Array.map (native)
 @ ./resources/assets/js/components/Example.vue 2:17-130
 @ ./resources/assets/js/app.js]
  message: './~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Example.vue\nModule build failed: Error: Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.\n    at Object.<anonymous> (/Users/Irons/Docker/apps/laravel53/node_modules/babel-preset-es2015-webpack/index.js:35:11)\n    at Module._compile (module.js:541:32)\n    at Object.Module._extensions..js (module.js:550:10)\n    at Module.load (module.js:458:32)\n    at tryModuleLoad (module.js:417:12)\n    at Function.Module._load (module.js:409:3)\n    at Module.require (module.js:468:17)\n    at require (internal/module.js:20:19)\n    at /Users/Irons/Docker/apps/laravel53/node_modules/babel-core/lib/transformation/file/options/option-manager.js:324:15\n    at Array.map (native)\n @ ./resources/assets/js/components/Example.vue 2:17-130\n @ ./resources/assets/js/app.js',
  showStack: false,
  showProperties: true,
  plugin: 'webpack-stream',
  __safety: { toString: [Function: bound ] } }
[12:35:20] 
ERROR in ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Example.vue
Module build failed: Error: Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.
    at Object.<anonymous> (/Users/Irons/Docker/apps/laravel53/node_modules/babel-preset-es2015-webpack/index.js:35:11)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at /Users/Irons/Docker/apps/laravel53/node_modules/babel-core/lib/transformation/file/options/option-manager.js:324:15
    at Array.map (native)
 @ ./resources/assets/js/components/Example.vue 2:17-130
 @ ./resources/assets/js/app.js
[12:35:20] webpack is watching for changes

and after using just gulp I get

$ gulp
(node:8498) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[12:45:09] Using gulpfile ~/Docker/apps/laravel53/gulpfile.js
[12:45:09] Starting 'all'...
[12:45:09] Starting 'sass'...
[12:45:13] Finished 'sass' after 3.36 s
[12:45:13] Starting 'webpack'...
{ [Error: ./~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Example.vue
Module build failed: Error: Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.
    at Object.<anonymous> (/Users/Irons/Docker/apps/laravel53/node_modules/babel-preset-es2015-webpack/index.js:35:11)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at /Users/Irons/Docker/apps/laravel53/node_modules/babel-core/lib/transformation/file/options/option-manager.js:324:15
    at Array.map (native)
 @ ./resources/assets/js/components/Example.vue 2:17-130
 @ ./resources/assets/js/app.js]
  message: './~/babel-loader!./~/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/Example.vue\nModule build failed: Error: Cannot remove "babel-plugin-transform-es2015-modules-commonjs" from the plugin list.\n    at Object.<anonymous> (/Users/Irons/Docker/apps/laravel53/node_modules/babel-preset-es2015-webpack/index.js:35:11)\n    at Module._compile (module.js:541:32)\n    at Object.Module._extensions..js (module.js:550:10)\n    at Module.load (module.js:458:32)\n    at tryModuleLoad (module.js:417:12)\n    at Function.Module._load (module.js:409:3)\n    at Module.require (module.js:468:17)\n    at require (internal/module.js:20:19)\n    at /Users/Irons/Docker/apps/laravel53/node_modules/babel-core/lib/transformation/file/options/option-manager.js:324:15\n    at Array.map (native)\n @ ./resources/assets/js/components/Example.vue 2:17-130\n @ ./resources/assets/js/app.js',
  showStack: false,
  showProperties: true,
  plugin: 'webpack-stream',
  __safety: { toString: [Function: bound ] } }
tjames
tjames
2 years ago (11,875 XP)

It's an issue with the babel preset, try running: npm i -D -E babel-preset-es2015@6.9.0 to lock down the version to 6.9.0
joseph127
joseph127
2 years ago (42,220 XP)

That worked man thanks!
jotafurtado
jotafurtado
1 year ago (16,170 XP)

Worked for me too! Tks.

Please sign in or create an account to participate in this conversation.