Issue 1:
Bug Report

Current Behavior

I am trying to use Babelify to compile my react app.js file in order to minify it for better efficiency on the web.

I am trying to set my preset to @babel/preset-react in my package.json and my gulp.js file but I get an error.

1.

This happens with @babel/preset-react

"SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'"

2.

This happens with @babel/preset-env

"SyntaxError: /src/app.js: Unexpected token (17:4)

"

gulp.js

// require searches in the node modules folder,
//the exact require string comes from the package.json file
//the convention is identical for specifying by exact same name from package.json file
var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var uglify = require('gulp-uglify');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
//creating an instance of browserSync is required
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;

// var htmlWatch = './index.html'
// watches all .html files vs just single file before
var htmlWatch = '**/*.html';
//watch php files

// locaiton of the src file or src of the css file
// remove ./ from source to allow gulp watch to watch new added files
var styleSRC = 'src/Assets/scss/style.scss';
// styleDIST is the whole folder adding the / at the end of string into the distribution folder (dist)
var styleDIST = './public/css/';
// watch variables
// doube star means every folder in subdirectory
//*.scss every file with that extension
var styleWatch = 'src/Assets/scss/**/*.scss';

// watches over all js files for changes
var jsWatch = 'src/**/*.js';
// javascript source file
var jsSRC = 'app.js';
//javascript source folder
var jsFolder = 'src/';

//javascript distribution folder
var jsDIST = './public/js/';
//array of all the files we want to check
var jsFILES = [jsSRC];

gulp.task('browser-sync', function(){

browserSync.init({

// do not open page automatically
open: false,
// everytime there is a change inject changes to localhost
injectChanges: true,

server: {
baseDir: "./"
}
// reflects local URL
// this is used for certificate files
//
// https:{
// key:'/Users/alecaddd/.valet/certificates/gulp.dev.key'
// cert:'/Users/alecaddd/.valet/Certificates/gulp.dev.crt'
// }
});

});

// https://stackoverflow.com/questions/36897877/gulp-error-the-following-tasks-did-not-complete-did-you-forget-to-signal-async
//task functions dont work without async, gulp does not support synchronous functions
gulp.task('style',async function(){

//compile
//pipe is one command after another,

gulp.src( styleSRC )
//sourcemaps is the first function for style
//
.pipe(sourcemaps.init())

//call sass right after the styleSRC(style.css) is called; automatically takes care of converting scss into regular css
.pipe(sass({
//specifics mentioned here
//if there is an error log it to the console
errorLogToConsole:true,
outputStyle:'compressed'
}))
//on an error log it to the console
.on('error',console.error.bind(console))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
cascade: false
}))
// in order for rename to work we must import 'gulp-rename'
// rename completely or we can also add suffix
.pipe( rename({suffix: '.min'}))
//writing the sourcemap before saves into dest
.pipe(sourcemaps.write('./'))
// save the file into the styleDIST directory, with the min suffix file
.pipe( gulp.dest( styleDIST))
// export data into browserSync
.pipe(browserSync.stream());

});

gulp.task('js', async function(){

// map function loops through all items in array
//every time map iterates, entry will be the indexed file
jsFILES.map(function(entry){
// 1. browserify
// handles that modules, imports modules combines them, without dependency of external files
return browserify({
// specifically add jsFolder to concatinate
//entry only has script.js
//we dont want the js src folder to get duplicated, so we only process the entry = "script.js"
entries: [jsFolder + entry]
})
//2. babilify
// turns js into regular vanilla js readible by the browswer
// lots of different versions, default enviornmental version
// transforms all entries
.transform(babelify, {presets:['@babel/preset-env']})

// 3. bundle everything inside one single files
// bundle is default of gulp
.bundle()

// 4. tap the source
// source method to see if the entry is still piped, grab the entry after the bundling
// this is to keep track of the entry
.pipe( source(entry) )

// 5. rename .min
// rename with extension
.pipe( rename({extname: '.min.js'}))
// 6. buffer the file

.pipe( buffer() )

// 7. innit sourcemap
// load existing maps all into one package together
.pipe (sourcemaps.init({loadMaps:true}))
// 8. uglify
// identical to minifying entire file
.pipe( uglify())
// 9. write sourcemaps
.pipe(sourcemaps.write('./'))

// distribute
.pipe(gulp.dest(jsDIST))

// export data into browserSync
.pipe(browserSync.stream());
});

});

// default task, array of concatinated tasks
gulp.task('default', ['style','js']);

// activate default and then browser-sync tasks
gulp.task('watch',['default', 'browser-sync'], function(){
//after the trigger of the first watch
//trigger the gulp watch method which keeps it up and running, triggers itself whenever there is an update
//whenever there is a change, trigger the task
// no reload on style task because style changes will get injected inside the style task itself with browserify stream
gulp.watch(styleWatch, ['style']);
gulp.watch(jsWatch, ['js', reload]);
gulp.watch(htmlWatch, [reload]);
gulp.watch(phpWatch, [reload]);

// sometimes u dont want to reload when u are filling out a form etc.

})

package.json

{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"babel-core": "^6.26.3",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-iframe": "^1.8.0",
"react-scripts": "3.0.1",
"reactify": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"babelify": "^10.0.0",
"browser-sync": "^2.26.7",
"browserify": "^16.3.0",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^6.1.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"vinyl-buffer": "^1.0.1",
"vinyl-source-stream": "^2.0.0"
},
"babel": {
"presets": [
"@babel/preset-env"
]
}
}

app.js

import React from 'react';

import arrowLeft from './Assets/media/pyara_Dictionary/extr/ARROW_LEFT_SELECTED.png'
import arrowRight from './Assets/media/pyara_Dictionary/extr/ARROW_RIGHT_SELECTED.png'
import dayaSelected from './Assets/media/pyara_Dictionary/pyara_list/DAYA_selected.png'
import dharam from './Assets/media/pyara_Dictionary/pyara_list/DHARAM.png'
import himmath from './Assets/media/pyara_Dictionary/pyara_list/HIMMATH.png'
import mokham from './Assets/media/pyara_Dictionary/pyara_list/MOKHAM.png'
import sahib from './Assets/media/pyara_Dictionary/pyara_list/SAHIB.png'

import Iframe from 'react-iframe';

function App() {

return (

<div className="row page_wrapper">

{/*<!-- BASE -->*/}
<div id="pyaraVideo_slider_wrapper">

<div className="wrapper">

<div className="carousel">
<div className="video-wrapper">
<Iframe url="https://player.vimeo.com/video/343270204?background=1&autoplay=1&loop=1&autopause=0"
className="iframe"
display="initial"
position="relative"
frameborder="0"
gesture="media"
allowfullscreen
height="100vh"
width="100vw"
allow="autoplay; fullscreen"
webkitallowfullscreen
mozallowfullscreen/>

<div className="video-wrapper">
<Iframe url="https://player.vimeo.com/video/343270367?background=1&autoplay=1&loop=1&autopause=0"
className="iframe"
display="initial"
position="relative"
frameborder="0"
gesture="media"
allowfullscreen
height="100vh"
width="100vw"
allow="autoplay; fullscreen"
webkitallowfullscreen
mozallowfullscreen/>

</div>
<div className="video-wrapper">
<Iframe url="https://player.vimeo.com/video/343284907?background=1&autoplay=1&loop=1&autopause=0"
className="iframe"
display="initial"
position="relative"
frameborder="0"
gesture="media"
allowfullscreen
height="100vh"
width="100vw"
allow="autoplay; fullscreen"
webkitallowfullscreen
mozallowfullscreen/>
</div>
</div>

</div>

</div>

{/*<!-- DETAIL
<div id="pyaraVideo_DETAIL_wrapper" className="row col-xl-4 col-lg-4 col-md-10 col-sm-10 col-xs-10">
<div id="DETAIL">

<iframe src="https://player.vimeo.com/video/343285037" width="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

</div>
</div>
-->*/}

<div id="pyara_nav_english" className="row col-lg-9" >

<div id="PyaraPrev" >
<img className="img-fluid" src={arrowLeft}/>
</div>

<p>GENEROSITY</p>
<p>COMPASSION</p>
<p>EMPATHY</p>

<div id="PyaraNext">
<img className="img-fluid" src={arrowRight}/>
</div>

</div>

<div id="pyara_nav" className=" col-lg-9">

<div className="pyara1_daya active pyara">
<img className="img-fluid" src={dayaSelected}/>
</div>

<div className="pyara2_dharam pyara">
<img className="img-fluid" src={dharam}/>
</div>

<div className="pyara3_himmath pyara">
<img className="img-fluid" src={himmath}/>
</div>

<div className="pyara4_mokham pyara">
<img className="img-fluid" src={mokham}/>
</div>

<div className="pyara5_sahib pyara">
<img className="img-fluid" src={sahib}/>
</div>

</div>

<div id="explanation" className=" col-lg-9">
Panj Pyare are a Sikh philosophy of positive values in the community.
</div>

</div>
</div>
);
}

export default App;

Expected behavior/code

I expected the gulp file to compile properly and export a minfied javascript file that will be imported into my index.html file. This way the index will have an easier time processing the code.

The gulp file should produce it in a folder, it works perfectly for my scss task in gulp but not js task.

Babel Configuration (.babelrc, package.json, cli command)

,

"babel": {

"presets": [

"@babel/preset-env"

]

}

Environment

"gulp": "^3.9.1",

Babel version(s): "@babel/preset-env": "^7.5.5",

"@babel/preset-react": "^7.0.0",

"babelify": "^10.0.0",

"babel-core": "^6.26.3"

Node/npm version: [6.9.0]

OS: [OSX 10.13.4]

How you are using Babel: [cli](not sure)

Possible Solution

I know the problem has something to do with the preset I am choosing, when I run npm start, my app loads properly and everything is linked.

The only issue im having is compiling the js task in my gulp file which uses Babel, it breaks at the Babel step

Additional context/Screenshots

Please some one help me with this I have spent 1 week so far trying to fix this and its a nightmare. Its the worst. I really just want to minify my js :( this hurts.

Issue 2:
Issue originally made by @krainboltgreene

Bug information

Babel version: 6.3.17

Node version: 5.2.0

npm version: 3.3.12

Description

I'm generating my code with babel and running with node everything is transformed correctly and the server runs. When I try to use babel-node it errors out with:

$ ./node_modules/.bin/babel-node ./source/
/Users/krainboltgreene/Code/libmythoas/mythoas.js/source/index.js:1
import http from "http";
^^^^^^

SyntaxError: Unexpected token import
at exports.runInThisContext (vm.js:54:16)
at Module._compile (module.js:375:25)
at loader (/Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/node_modules/babel-register/lib/node.js:130:5)
at Object.require.extensions.(anonymous function) [as .js] (/Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/node_modules/babel-register/lib/node.js:140:7)
at Module.load (module.js:345:32)
at Function.Module._load (module.js:302:12)
at Function.Module.runMain (module.js:431:10)
at /Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/lib/_babel-node.js:161:27
at Object.<anonymous> (/Users/krainboltgreene/Code/libmythoas/mythoas.js/node_modules/babel-cli/lib/_babel-node.js:162:7)
at Module._compile (module.js:399:26)

This only makes sense if it's not looking at my .babelrc.