[Laravel 5.3] error on gulp execution

I am having same problem :(

Same here!

Just install this nodejs package and it should fix that error:

npm install buble --save-dev

After buble has been installed another error may come because of the vue.js. So, your next step is to install vue-loader:

npm install vue-loader --save-dev

Hope that help!

Had the same problem, did what @duongtd said, next thing that shows up is this:

throw new Error("Module '" + loader.path + "' is not a loader (must have normal or pitch function)");
                        ^

Error: Module '/Users/user/Workspace/Dashboard/node_modules/buble/dist/buble.umd.js' is not a loader (must have normal or pitch function)

I had the same problem but I fixed it with updating my Node.js Version with

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

Now it works

@sailingdeveloper same issue as yours. have you fix it?

thanks

@lcf8381595 I haven't, decided to start my project in 5.2 instead. Bummer, but I was in a hurry

@stilkreuz thanks for the solution. Additionally were needed to remove npm_modules folder and run npm install after it.

Hello, I have the same problem on windows 10, how can I solve this problem? @stilkreuz solution is not working for me.

Hi guys, I have the same problem on Windows 10 :(

It works now.

1. Delete node_modules.
2. Upgrade nodejs version to 6.4.0.
3. Make npm install.

@iulian33 try this :)

Reporting in with same problem.

I am on Mac. Using homestead. So everything should work, without upgrading node and so on...

Just ran into this as well on Windows 10.

If you're downloading Node from the website, be sure to click the "Current - Latest Features" button before downloading which will change the version you install, otherwise the LTS version is downloaded which is 4.5 . (And run node -v to make sure it's 6.4.0 ). Once I was up-to-date everything ran smoothly

@kilrizzy Are you installing dependencies with --no-bin-links? I get the following error when upgrading to 6.4.0 under Windows 10: Maximum call stack size exceeded See: https://github.com/npm/npm/issues/9224

Any solution for this? When using 2.x npm I get the "node_modules/buble/dist/buble.umd.js' is not a loader (must have normal or pitch function)" error.

With Laravel 5.2 everything worked fine.

Update: Got it working now by doing the following using node 6.4.0:

1. npm install --no-bin-links (Stack Error will be thrown)
2. npm install --no-bin-links (Should be running without any issues now)
3. npm rebuild node-sass --no-bin-links (Rebuild node-sass)

Laravel Elixir should now run.

Source: https://okaufmann.ch/tipps/finally-a-working-npm-install-routine/

Thanks @coderdiaz, your "node_modules" trick worked for me.

@coderdiaz Thanks, it worked for me ~Windows 10.0.14393

My issue is not local: my local dev version works fine. For me it is Travis CI that I can't get to work. Here is my travis file

language: php

sudo: required
dist: trusty

services:
  - mysql

addons:
  apt:
    packages:
    - mysql-server-5.6
    - mysql-client-core-5.6
    - mysql-client-5.6
    - lynx
    - npm

before_install:
  - mysql -u root -e 'create database domanamon_test;'

php:
  - 7.0

install:
  - composer install
  - sudo npm cache clean -f
  - sudo npm install -g n
  - sudo n stable
  - npm install -g bower
  - npm install --only=dev
  - bower install
  - gulp
  - npm install --only=prod

script: phpunit

after_success:
  - ./.travis_deployment_script.sh

git:
  depth: 1

notifications:
  email:
    - [email protected]

branches:
  only:
    - master
    - stable
    - staging
    
#after_failure:
#after_script:
#before_deploy:
#deploy:
#after_deploy:
#before_script:

and my gulpfile

const elixir = require('laravel-elixir');
const webp = require('gulp-webp');
var Task = Elixir.Task;
// require('laravel-elixir-copy-fonts');

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

/*
 | Create a new task that will convert all image file
 */
Elixir.extend('convertImages', function(srcDir) {
    // An array of file type to convert to webp
    var imagesTypes = [
        'jpg',
        'png',
        'gif',
        'jpeg'
    ];
    // A gulp.src path for all the image file
    var srcFiles = srcDir +'/**/*{' + imagesTypes.join(',') + '}';

    new Task('convertImages', function () {
        // Iterate through the image files, convert them and put back in the srcDir
        return gulp
            .src(srcFiles)
            .pipe(webp())
            .pipe(gulp.dest(srcDir));
    })
    // If the watch flag has been passed then watch the source files
    .watch(srcFiles);
});

elixir(function(mix) {
    mix
        .sass([
            '../../../bower_components/sweetalert/dev/sweetalert.scss'
        ], './public/css/plugins.css')
        .sass([
            'app.scss'
        ], './public/css/app.css')
        
        .copy('resources/images', 'public/images/')

        .webpack([
            '../../../bower_components/sweetalert/dist/sweetalert.min.js'
        ], './public/js/plugins.js')
        .webpack([
            'Config.es6.js',
            'App.es6.js'
        ], './public/js/app.js')
        .convertImages('public/images');

});

I can't just keep making one or two line changes them uploading through Github and waiting for a build every time as it takes a while. I am also going to have to force push my git history as it looks horrible with all the "errored" builds.

You folks should really fix your permissions so that you do not use sudo for npm or composer installs.

I have the same issue as bmonteiro and sailing developer... Did someone get this working ?

@Johnson11 clear out your node_modules folder, update node, and then run npm install again

Unfortunately I am already on v6.5.0. I just tried it again with a brand new laravel project. I did not change anything. The package.json looks as following:

{ "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "bootstrap-sass": "^3.3.7", "gulp": "^3.9.1", "jquery": "^3.1.0", "laravel-elixir": "^6.0.0-9", "laravel-elixir-vue": "^0.1.4", "laravel-elixir-webpack-official": "^1.0.2", "lodash": "^4.14.0", "vue": "^1.0.26", "vue-resource": "^0.9.3" } }

It works installing node: current version: v6.6.0 (includes npm 3.10.3)

In case you used legacy-bundling, upgraded everything and it still won't work: turn off legacy-bundling. https://github.com/laravel/elixir/issues/643#issuecomment-250928438

@sailingdeveloper @lcf8381595 I hit the same issue as you guys. Turns out

 npm install buble-loader

fixes the issue. Source: https://github.com/laravel/elixir/issues/643.

@coderdiaz Thankyou!

Just had this issue and did as suggested above and now it works, on Windows 10:

1. Install latest NodeJS from website
2. npm cache clear -f
3. Delete node_modules directory from project
4. npm install

@bmonteiro try run it again on your machine (not in vagrant)

I have same error when run in vagrant. I have fixed it by steps:

• Remove node_modules/
• Upgrade Node to latest version (6.x)
• Run npm install again.

You can remove the buble entry from package.json.

It's not on the Laravel Github page anymore

I had to update my package.json as follows:

{
    "private": true,
    "scripts": {
        "prod": "gulp --production",
        "dev": "gulp watch"
    },
    "devDependencies": {
        "bootstrap-sass": "^3.3.7",
        "buble": "^0.13.2",
        "buble-loader": "^0.3.0",
        "css-loader": "^0.25.0",
        "gulp": "^3.9.1",
        "jquery": "^3.1.0",
        "laravel-elixir": "^6.0.0-11",
        "laravel-elixir-vue-2": "^0.2.0",
        "laravel-elixir-webpack-official": "^1.0.2",
        "lodash": "^4.16.2",
        "vue": "^2.0.1",
        "vue-loader": "^9.7.0",
        "vue-resource": "^1.0.3"
    }
}