Laravel 5.3 failing on gulp watch
Published 1 year 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)
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
same problem here... :(
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
The same... :(
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 ] } }
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
That worked man thanks!
Worked for me too! Tks.
Please sign in or create an account to participate in this conversation.