Menu icon Foundation
Foundation custom GULP - Uncaught ReferenceError: exports is not defined

Hello,

I created a custom gulp file for WordPress development. It works but i get this error on the console: Uncaught ReferenceError: exports is not defined. I installed babel but the keeps coming. Can somebody tell me how to fix this?

Regards,
Bas

package.json

{
  "name": "Hyperconnected",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "bourbon": "^4.3.4",
    "foundation-sites": "^6.4.1"
  },
  "devDependencies": {
	"babel-core": "^6.5.2",
	"babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
	"babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
	"babel-plugin-transform-es2015-block-scoping": "^6.4.0",
	"babel-plugin-transform-es2015-classes": "^6.3.15",
	"babel-plugin-transform-es2015-destructuring": "^6.3.15",
	"babel-plugin-transform-es2015-modules-commonjs": "^6.3.13",
	"babel-plugin-transform-es2015-parameters": "^6.3.26",
	"babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
	"babel-plugin-transform-es2015-spread": "^6.4.0",
	"babel-plugin-transform-es2015-template-literals": "^6.3.13",
	"babel-preset-es2015": "^6.5.0",
	"babel-register": "^6.5.2",
    "browser-sync": "^2.18.12",
    "foundation-sites": "^6.4.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-babel": "^6.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-favicons": "^2.2.7",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8",
    "slick-carousel": "^1.6.0"
  },
  "scripts": {
    "favicons": "gulp favicons"
  },
  "author": "Bas van der Togt",
  "license": "ISC",
  "repository": {
    "private": true
  }
}

.babelrc

{
  "name": "Hyperconnected",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "bourbon": "^4.3.4",
    "foundation-sites": "^6.4.1"
  },
  "devDependencies": {
	"babel-core": "^6.5.2",
	"babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
	"babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
	"babel-plugin-transform-es2015-block-scoping": "^6.4.0",
	"babel-plugin-transform-es2015-classes": "^6.3.15",
	"babel-plugin-transform-es2015-destructuring": "^6.3.15",
	"babel-plugin-transform-es2015-modules-commonjs": "^6.3.13",
	"babel-plugin-transform-es2015-parameters": "^6.3.26",
	"babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
	"babel-plugin-transform-es2015-spread": "^6.4.0",
	"babel-plugin-transform-es2015-template-literals": "^6.3.13",
	"babel-preset-es2015": "^6.5.0",
	"babel-register": "^6.5.2",
    "browser-sync": "^2.18.12",
    "foundation-sites": "^6.4.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-babel": "^6.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-favicons": "^2.2.7",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8",
    "slick-carousel": "^1.6.0"
  },
  "scripts": {
    "favicons": "gulp favicons"
  },
  "author": "Bas van der Togt",
  "license": "ISC",
  "repository": {
    "private": true
  }
}

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var favicons = require('gulp-favicons');
var	gutil = require('gulp-util');
var browserSync = require('browser-sync').create();
var babel = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');

var appName = 'Van Es';
var host = 'vanes.dev';
var theme = './wp-content/themes/vanes';
var buildDest = theme + '/assets/build/';
var PATHS = {
	sass: [
		'./node_modules/foundation-sites/scss',
		'./node_modules/bourbon/app/assets/stylesheets'
	],
	scripts: [
		// Foundation core
		'./node_modules/foundation-sites/js/foundation.core.js',
		'./node_modules/foundation-sites/js/foundation.util.*.js',

		// Foundation plugins
		//'./node_modules/foundation-sites/js/foundation.abide.js',
		//'./node_modules/foundation-sites/js/foundation.accordion.js',
		//'./node_modules/foundation-sites/js/foundation.accordionMenu.js',
		//'./node_modules/foundation-sites/js/foundation.drilldown.js',
		//'./node_modules/foundation-sites/js/foundation.dropdown.js',
		//'./node_modules/foundation-sites/js/foundation.dropdownMenu.js',
		'./node_modules/foundation-sites/js/foundation.equalizer.js',
		//'./node_modules/foundation-sites/js/foundation.interchange.js',
		//'./node_modules/foundation-sites/js/foundation.magellan.js',
		//'./node_modules/foundation-sites/js/foundation.offcanvas.js',
		//'./node_modules/foundation-sites/js/foundation.orbit.js',
		//'./node_modules/foundation-sites/js/foundation.positionable.js',
		//'./node_modules/foundation-sites/js/foundation.responsiveAccordionTabs.js',
		//'./node_modules/foundation-sites/js/foundation.responsiveMenu.js',
		//'./node_modules/foundation-sites/js/foundation.responsiveToggle.js',
		//'./node_modules/foundation-sites/js/foundation.reveal.js',
		//'./node_modules/foundation-sites/js/foundation.slider.js',
		'./node_modules/foundation-sites/js/foundation.smoothScroll.js',
		//'./node_modules/foundation-sites/js/foundation.sticky.js',
		//'./node_modules/foundation-sites/js/foundation.tabs.js',
		//'./node_modules/foundation-sites/js/foundation.toggler.js',
		//'./node_modules/foundation-sites/js/foundation.tooltip.js',

		//'./node_modules/what-input/dis/what-input.js',

		// Slick slider
		'./node_modules/slick-carousel/slick/slick.js',

		theme + '/assets/js/*.js'
	]
};

gulp.task('serve', ['sass', 'scripts'], function() {
	browserSync.init({
		proxy: host
	});

	gulp.watch(theme + '/assets/scss/**/*.scss', ['sass']);
	gulp.watch(theme + '/assets/js/**/*.js', ['scripts']);
	gulp.watch(theme + '/**/*.php').on('change', browserSync.reload);
});

gulp.task('sass', function() {
	return gulp.src([theme + '/assets/scss/app.scss'])
		.pipe(plumber({errorHandler: function(err) {
			notify.onError({
				title: 'Gulp error in ' + err.plugin,
				message: err.toString()
			})(err);
		}}))
		.pipe(sass({
			outputStyle: 'compressed',
			includePaths: PATHS.sass,
			errLogToConsole: false
		}))
		.on('error', catchErr)
		.pipe(rename('app.min.css'))
		.pipe(autoprefixer({
			browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3'],
			cascade: false
		}))
		.pipe(gulp.dest(buildDest))
		.pipe(browserSync.stream()
	);
});

gulp.task('scripts', function() {
	return gulp.src(PATHS.scripts)
		.pipe(sourcemaps.init())
		.pipe(babel())
		.pipe(concat('app.js'))
		.pipe(uglify())
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest(buildDest))
		.pipe(rename('app.min.js'))
		.pipe(browserSync.stream()
	);
});

gulp.task('favicons', function () {
	return gulp.src(theme + '/assets/img/logo.svg')
		.pipe(favicons({
			appName: appName,
			appDescription: '',
			developerName: 'Bas van der Togt',
			developerURL: 'http://www.hyperconnected.nl/',
			background: '#ffffff',
			path: '/' + theme + '/assets/build/icons/',
			url: '',
			display: 'standalone',
			orientation: 'portrait',
			start_url: '/',
			version: 1.0,
			logging: false,
			online: false,
			html: 'index.html',
			pipeHTML: true,
			replace: true,
			icons: {
				android: true,
				appleIcon: true,
				appleStartup: false,
				coast: false,
				favicons: true,
				firefox: false,
				windows: false,
				yandex: false
			}
		}))
		.on('error', gutil.log)
		.pipe(gulp.dest(theme + '/assets/build/icons/')
	);
});

function catchErr(e) {
	console.log(e);
	this.emit('end');
}

gulp.task('default', ['serve']);

FoundationgulpBabel

Hello,

I created a custom gulp file for WordPress development. It works but i get this error on the console: Uncaught ReferenceError: exports is not defined. I installed babel but the keeps coming. Can somebody tell me how to fix this?

Regards,
Bas

package.json

{
  "name": "Hyperconnected",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "bourbon": "^4.3.4",
    "foundation-sites": "^6.4.1"
  },
  "devDependencies": {
	"babel-core": "^6.5.2",
	"babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
	"babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
	"babel-plugin-transform-es2015-block-scoping": "^6.4.0",
	"babel-plugin-transform-es2015-classes": "^6.3.15",
	"babel-plugin-transform-es2015-destructuring": "^6.3.15",
	"babel-plugin-transform-es2015-modules-commonjs": "^6.3.13",
	"babel-plugin-transform-es2015-parameters": "^6.3.26",
	"babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
	"babel-plugin-transform-es2015-spread": "^6.4.0",
	"babel-plugin-transform-es2015-template-literals": "^6.3.13",
	"babel-preset-es2015": "^6.5.0",
	"babel-register": "^6.5.2",
    "browser-sync": "^2.18.12",
    "foundation-sites": "^6.4.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-babel": "^6.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-favicons": "^2.2.7",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8",
    "slick-carousel": "^1.6.0"
  },
  "scripts": {
    "favicons": "gulp favicons"
  },
  "author": "Bas van der Togt",
  "license": "ISC",
  "repository": {
    "private": true
  }
}

.babelrc

{
  "name": "Hyperconnected",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "dependencies": {
    "bourbon": "^4.3.4",
    "foundation-sites": "^6.4.1"
  },
  "devDependencies": {
	"babel-core": "^6.5.2",
	"babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
	"babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
	"babel-plugin-transform-es2015-block-scoping": "^6.4.0",
	"babel-plugin-transform-es2015-classes": "^6.3.15",
	"babel-plugin-transform-es2015-destructuring": "^6.3.15",
	"babel-plugin-transform-es2015-modules-commonjs": "^6.3.13",
	"babel-plugin-transform-es2015-parameters": "^6.3.26",
	"babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
	"babel-plugin-transform-es2015-spread": "^6.4.0",
	"babel-plugin-transform-es2015-template-literals": "^6.3.13",
	"babel-preset-es2015": "^6.5.0",
	"babel-register": "^6.5.2",
    "browser-sync": "^2.18.12",
    "foundation-sites": "^6.4.1",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-babel": "^6.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-favicons": "^2.2.7",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.0.0-alpha",
    "gulp-uglify": "^3.0.0",
    "gulp-util": "^3.0.8",
    "slick-carousel": "^1.6.0"
  },
  "scripts": {
    "favicons": "gulp favicons"
  },
  "author": "Bas van der Togt",
  "license": "ISC",
  "repository": {
    "private": true
  }
}

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var uglify = require('gulp-uglify');
var autoprefixer = require('gulp-autoprefixer');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var favicons = require('gulp-favicons');
var	gutil = require('gulp-util');
var browserSync = require('browser-sync').create();
var babel = require('gulp-babel');
var sourcemaps = require('gulp-sourcemaps');

var appName = 'Van Es';
var host = 'vanes.dev';
var theme = './wp-content/themes/vanes';
var buildDest = theme + '/assets/build/';
var PATHS = {
	sass: [
		'./node_modules/foundation-sites/scss',
		'./node_modules/bourbon/app/assets/stylesheets'
	],
	scripts: [
		// Foundation core
		'./node_modules/foundation-sites/js/foundation.core.js',
		'./node_modules/foundation-sites/js/foundation.util.*.js',

		// Foundation plugins
		//'./node_modules/foundation-sites/js/foundation.abide.js',
		//'./node_modules/foundation-sites/js/foundation.accordion.js',
		//'./node_modules/foundation-sites/js/foundation.accordionMenu.js',
		//'./node_modules/foundation-sites/js/foundation.drilldown.js',
		//'./node_modules/foundation-sites/js/foundation.dropdown.js',
		//'./node_modules/foundation-sites/js/foundation.dropdownMenu.js',
		'./node_modules/foundation-sites/js/foundation.equalizer.js',
		//'./node_modules/foundation-sites/js/foundation.interchange.js',
		//'./node_modules/foundation-sites/js/foundation.magellan.js',
		//'./node_modules/foundation-sites/js/foundation.offcanvas.js',
		//'./node_modules/foundation-sites/js/foundation.orbit.js',
		//'./node_modules/foundation-sites/js/foundation.positionable.js',
		//'./node_modules/foundation-sites/js/foundation.responsiveAccordionTabs.js',
		//'./node_modules/foundation-sites/js/foundation.responsiveMenu.js',
		//'./node_modules/foundation-sites/js/foundation.responsiveToggle.js',
		//'./node_modules/foundation-sites/js/foundation.reveal.js',
		//'./node_modules/foundation-sites/js/foundation.slider.js',
		'./node_modules/foundation-sites/js/foundation.smoothScroll.js',
		//'./node_modules/foundation-sites/js/foundation.sticky.js',
		//'./node_modules/foundation-sites/js/foundation.tabs.js',
		//'./node_modules/foundation-sites/js/foundation.toggler.js',
		//'./node_modules/foundation-sites/js/foundation.tooltip.js',

		//'./node_modules/what-input/dis/what-input.js',

		// Slick slider
		'./node_modules/slick-carousel/slick/slick.js',

		theme + '/assets/js/*.js'
	]
};

gulp.task('serve', ['sass', 'scripts'], function() {
	browserSync.init({
		proxy: host
	});

	gulp.watch(theme + '/assets/scss/**/*.scss', ['sass']);
	gulp.watch(theme + '/assets/js/**/*.js', ['scripts']);
	gulp.watch(theme + '/**/*.php').on('change', browserSync.reload);
});

gulp.task('sass', function() {
	return gulp.src([theme + '/assets/scss/app.scss'])
		.pipe(plumber({errorHandler: function(err) {
			notify.onError({
				title: 'Gulp error in ' + err.plugin,
				message: err.toString()
			})(err);
		}}))
		.pipe(sass({
			outputStyle: 'compressed',
			includePaths: PATHS.sass,
			errLogToConsole: false
		}))
		.on('error', catchErr)
		.pipe(rename('app.min.css'))
		.pipe(autoprefixer({
			browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3'],
			cascade: false
		}))
		.pipe(gulp.dest(buildDest))
		.pipe(browserSync.stream()
	);
});

gulp.task('scripts', function() {
	return gulp.src(PATHS.scripts)
		.pipe(sourcemaps.init())
		.pipe(babel())
		.pipe(concat('app.js'))
		.pipe(uglify())
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest(buildDest))
		.pipe(rename('app.min.js'))
		.pipe(browserSync.stream()
	);
});

gulp.task('favicons', function () {
	return gulp.src(theme + '/assets/img/logo.svg')
		.pipe(favicons({
			appName: appName,
			appDescription: '',
			developerName: 'Bas van der Togt',
			developerURL: 'http://www.hyperconnected.nl/',
			background: '#ffffff',
			path: '/' + theme + '/assets/build/icons/',
			url: '',
			display: 'standalone',
			orientation: 'portrait',
			start_url: '/',
			version: 1.0,
			logging: false,
			online: false,
			html: 'index.html',
			pipeHTML: true,
			replace: true,
			icons: {
				android: true,
				appleIcon: true,
				appleStartup: false,
				coast: false,
				favicons: true,
				firefox: false,
				windows: false,
				yandex: false
			}
		}))
		.on('error', gutil.log)
		.pipe(gulp.dest(theme + '/assets/build/icons/')
	);
});

function catchErr(e) {
	console.log(e);
	this.emit('end');
}

gulp.task('default', ['serve']);
Stuart Starrs 3 months ago

I'm in a similar position. I'll tell you what I know.

 

All the Foundation 6 components are written in ES2016, which needs to be transpiled to ES2015 so that browsers who don't support it can still use it. This is common still, this transpiling is part of many workflows and we use Babel to do this.

 

ES2016 has import and export functionality for modular JS, which allows for dependency control, something that JS doesn't normally have. To transpile this into regular JS we make "exports" be an attribute on an Object. Babel 5 had this defaulting to something other than `undefined`, whereas in Babel 6, it's simply not defined and is left to us to define it.

 

That's the issue. I have it too on a project where I have a similar gulp file.

 

Unfortunately I'm not a super cool ES2016 and build tool wizard. Hopefully someone else can help.

Pavol Caban about 1 month ago

Hi guys,

In Foundation 6.4 those javascript components are written slightly different than in 6.3.

I had the same problem with 'exports' error and tried whole bunch of stuff to fix it (different babel versions, configs, additional libraries, ...)

 

But what worked for me is to load already compiled files,

so e.g. load 

./node_modules/foundation-sites/dist/js/plugins/foundation.core.js

instead of 

./node_modules/foundation-sites/js/foundation.core.js

 

I'm not sure if this is the right way to do it, but at least it will work until they fix it or someone else will find another way how to do it :)

Tim 10 days ago

I tried loading everything from dist/js/plugins. This gives me another error

foundation.core.js:358TypeError: undefined is not an object (evaluating '__WEBPACK_IMPORTED_MODULE_1__foundation_util_mediaQuery__["MediaQuery"]._init')