ReferenceError: Can't find variable: exports

[melcarthus]

I wanted to start with using foundation x-y grid system. But when compiling my JS I get the error;

ReferenceError: Can't find variable: exports

If I use the the minified version of foundation.js (6.4.3) everything is fine and the js is working as it should. But I don't want all the plugins. I want to choose from my gulp.js what I want to use.

How to reproduce this bug:

1. Install foundation 6.4.2/6.4.3
2. run gulp project
3. open inspecter

What should happen:

the console should not log any errors about ReferenceError: Can't find variable: exports, and just work.

What happened instead:

I got ReferenceError: Can't find variable: exports

Foundation Version(s) you are using:

6.4.3 (also tested 6.4.2)

This is my Gulp file.

var gulp = require('gulp');
var $    = require('gulp-load-plugins')();
var argv = require('yargs').argv;
var browserSync = require('browser-sync').create();
var URL = 'http://newsite.site';
var PORT = 8008;
// Check for --production flag
var isProduction = !!(argv.production);

// Browsers to target when prefixing CSS.
var COMPATIBILITY = ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3'];

// File paths to various assets are defined here.
var PATHS = {
  assets: [
   'src/assets/**/*',
   '!src/assets/{img,js,scss}/**/*'
  ],
  sass: [
    'bower_components/foundation-sites/scss',
    //'bower_components/motion-ui/src'
  ],
  javascript: [
    // 'bower_components/jquery/dist/jquery.js',
    // 'bower_components/what-input/what-input.js',
    'bower_components/foundation-sites/js/foundation.core.js',
    'bower_components/foundation-sites/js/foundation.util.*.js',
    // Paths to individual JS components defined below
    //'bower_components/foundation-sites/js/foundation.abide.js',
    'bower_components/foundation-sites/js/foundation.accordion.js',
    'bower_components/foundation-sites/js/foundation.accordionMenu.js',
    //'bower_components/foundation-sites/js/foundation.drilldown.js',
    'bower_components/foundation-sites/js/foundation.dropdown.js',
    'bower_components/foundation-sites/js/foundation.dropdownMenu.js',
    'bower_components/foundation-sites/js/foundation.equalizer.js',
    // 'bower_components/foundation-sites/js/foundation.interchange.js',
    //'bower_components/foundation-sites/js/foundation.magellan.js',
    //'bower_components/foundation-sites/js/foundation.offcanvas.js',
    //'bower_components/foundation-sites/js/foundation.orbit.js',
    'bower_components/foundation-sites/js/foundation.responsiveMenu.js',
    'bower_components/foundation-sites/js/foundation.responsiveToggle.js',
    //'bower_components/foundation-sites/js/foundation.reveal.js',
    //'bower_components/foundation-sites/js/foundation.slider.js',
    'bower_components/foundation-sites/js/foundation.sticky.js',
    //'bower_components/foundation-sites/js/foundation.tabs.js',
    'bower_components/foundation-sites/js/foundation.toggler.js',
    //'bower_components/foundation-sites/js/foundation.tooltip.js',
    //'bower_components/magnific-popup/dist/jquery.magnific-popup.js',

    'src/assets/js/**/!(app).js',
    'src/assets/js/app.js'
  ]
};

// Browsersync task
gulp.task('browser-sync', ['build'], function() {

  var files = [
          ];

  browserSync.init(files, {
    // Proxy address
    proxy: URL,
    notify: false,
    // Port #
    port: PORT
  });
});

// Combine JavaScript into one file
// In production, the file is minified
gulp.task('javascript', function() {
  var uglify = $.if(isProduction, $.uglify()
    .on('error', function (e) {
      console.log(e);
    }));

  return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.concat('foundation.js'))
    .pipe(uglify)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('../js'))
    //.pipe(browserSync.stream({match: '**/*.js'}));
});

// Compile Foundation Sass into CSS. In production, the CSS is compressed
gulp.task('foundation-sass', function() {

  var minifycss = $.if(isProduction, $.cssnano());

  return gulp.src('scss/foundation.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    .pipe(minifycss)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('../css'))
    .pipe(browserSync.stream({match: '**/*.css'}));
});

// Compile Theme Sass into CSS. Not compressed.
gulp.task('theme-sass', function() {

  var minifycss = $.if(isProduction, $.cssnano());

  return gulp.src('scss/theme.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass({
      includePaths: PATHS.sass
    })
      .on('error', $.sass.logError))
    .pipe($.autoprefixer({
      browsers: COMPATIBILITY
    }))
    // If you _do_ want to compress this file on 'production', uncomment the the lines below.
    .pipe(minifycss)
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('../css'))
    .pipe(browserSync.stream({match: '**/*.css'}));
});

gulp.task('twig', function() {
    return gulp.src('../**/*.twig')
    .pipe(browserSync.stream({match: '**/*.twig'}));
});

gulp.task('uncss-foundation', function () {
    var uncss = $.if(!isProduction, $.uncss({
      html: [
      ],
      ignore: [ new RegExp('.foundation-mq'), new RegExp('.is-stuck'), new RegExp('.is-at-top'), new RegExp('.sticky'), new RegExp('.is-anchored'), new RegExp('.svg'), new RegExp('.cssanimations'), new RegExp('.csstransitions'), new RegExp('.multiplebgs'), ]
      })
    );
    return gulp.src('scss/foundation.scss')
        .pipe($.sourcemaps.init())
        .pipe($.sass({
          includePaths: PATHS.sass
        })
          .on('error', $.sass.logError))
        .pipe($.autoprefixer({
          browsers: COMPATIBILITY
        }))
        .pipe($.sass())
        .pipe($.concat('foundation.css'))
        .pipe($.if(!isProduction, $.sourcemaps.write()))
        .pipe($.uncss({
            html: ['http://ikzoektim.site'],
            ignore: [ new RegExp('.foundation-mq'), new RegExp('.is-stuck'), new RegExp('.is-at-top'), new RegExp('.sticky'), new RegExp('.is-anchored'), new RegExp('.svg'), new RegExp('.cssanimations'), new RegExp('.csstransitions'), new RegExp('.multiplebgs'), ]
        }))
        .pipe($.cssnano())
        .pipe(gulp.dest('../css'));
});

gulp.task('uncss-theme', function () {
    var uncss = $.if(!isProduction, $.uncss({
      html: [
      ],
      ignore: [ new RegExp('.foundation-mq'), new RegExp('.is-stuck'), new RegExp('.is-at-top'), new RegExp('.sticky'), new RegExp('.is-anchored'), new RegExp('.svg'), new RegExp('.cssanimations'), new RegExp('.csstransitions'), new RegExp('.multiplebgs'), ]
      })
    );
    return gulp.src('scss/theme.scss')
        .pipe($.sourcemaps.init())
        .pipe($.sass({
          includePaths: PATHS.sass
        })
          .on('error', $.sass.logError))
        .pipe($.autoprefixer({
          browsers: COMPATIBILITY
        }))
        .pipe($.sass())
        .pipe($.concat('theme.css'))
        .pipe($.if(!isProduction, $.sourcemaps.write()))
        .pipe($.cssnano())
        .pipe(gulp.dest('../css'));
        ignore: [ new RegExp('.foundation-mq'), new RegExp('.is-stuck'), new RegExp('.is-at-top'), new RegExp('.sticky'), new RegExp('.is-anchored'), new RegExp('.svg'), new RegExp('.cssanimations'), new RegExp('.csstransitions'), new RegExp('.multiplebgs'), ]
});

// Build the "dist" folder by running all of the above tasks
// gulp.task('build', ['javascript', 'uncss-foundation', 'uncss-theme' ]);
gulp.task('build', ['javascript', 'foundation-sass', 'theme-sass' ]);
gulp.task('default', ['javascript', 'foundation-sass', 'theme-sass', 'browser-sync'], function() {
  gulp.watch(['scss/**/*.scss'], ['foundation-sass', 'theme-sass']);
  gulp.watch(['../**/*.twig' ], ['twig']);
});

[DaSchTour]

In guess the plugin files are not made for simple concatenation. You should use a module loader/bundler. Than you also don't need to specify the list of plugins you want to add but just import them into your JS and the module bundler will follow the imports.

[melcarthus]

Ok, thats another big change coming from 6.3 than for me. I was really scratching my head over this 'issue' not knowing what you just explained to me. Thanks!

[ncoden]

Fixed in https://github.com/zurb/foundation-sites/pull/10864. This sould be released in v6.4.4.