7

This is driving me insane, so I'm hoping someone might see something that I'm missing. Thank you for your help in advance.

I have a gulp file and I have installed via npm, babel-core, babel-preset-es2015, babel-preset-react. From researching online and in high hopes even though this might not be right, I have renamed the gulp file to be gulpfile.babel.js and I have created a .babelrc file with 

{ "presets": ["es2015"] }

I am using browsersync and when I launch the gulp task the html file loads, but the index.js I have includes 'import React....'. This files causing the error in the JS console that says 'Uncaught SyntaxError: Unexpected token import'.

I thought the es2015 npm packages I have should be taking care of that ES6 syntax?

In the gulp file the task that I thought was suppose to take care of that is;

// convert jsx to JS gulp.task('babelFiles', function() { return gulp.src('js/*.(jsx|js)') .pipe(babel({ compact: false })) .pipe(gulp.dest('js')) .pipe(browserSync.reload({ stream: true })) });

The gulp task that is responsible for launching this is:

// Default task gulp.task('default', ['babelFiles', 'browserSync']);

I am puzzled as to what could be wrong here?

Any ideas would be much much appreciated!

Improve this question
2
  • It may simply be because in your 'default' call the order of the tasks 'babelfiles' and 'browserSync' is not guaranteed to finish in any predictable order. Those tasks are run in parallel. So perhaps browserSync is trying to load your js before babelFiles has had a chance to babelify it. I would try making the 'browserSync task dependent on the babelFiles task. Commented Aug 7, 2017 at 6:07
  • @Mark: I set the babelFiles task to be a prerequisite for the browserSync task, but was still having the same problem. Commented Aug 8, 2017 at 3:05

1 Answer 1

Reset to default
3
+50

There are two problems:

  1. Gulp seems like doesn't support you syntax for file extension mask: 

    gulp.src('js/*.(jsx|js)') // not working gulp.src('js/*.{js,jsx}') // working
  2. You piping from js directory to js directory but since there are no matches because of the problem (1) it makes you believe the babel is not working

Update

Gulp uses glob syntaxt to match files - according to glob syntax the qualifier for amount of items should be included before ( | ) - in our case following syntax would be valid 

gulp.src('js/*.@(js|jsx)')

where @ means match exactly one occurrence of pattern after @.

In your case there was no qualifier presented

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

That appears to have fixed the issue with the babelFiles task not running, but then I am getting an error in the console regarding the .jsx react syntax. It says "Requiring external module babel-core/register" as part of the output. Had that package already installed so I tried to delete the modules folder and ran npm install again. Same error. :/. Any ideas?
then i didn't know what can help there - since i got everything working from your example(except renaming gulpfile.js) on latest version of node.js

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.