Uncaught ReferenceError: exports is not defined

[arjendejong12]

I'm using JointsWP 5.0 and I updated Foundation to the latest release candidate (6.4.0rc3). When I build the scripts with npm and reload my browser, I'm getting this error in the console: Uncaught ReferenceError: exports is not defined at foundation.core.js:1. Foundation 6.3.0 doesn't give this error. The result is that all javascript is not working on my site. I suppose this is a problem with the javascript not being compiled to ES5 (only to CommonJS, which browsers cannot read). Looking at the gulpfile in the Foundation repository, I should use webpack2 to do this but I'm not sure how to edit JointsWP's gulpfile.

[heidipowers]

@arjendejong12 - here's what I did.

I used the gulp bower command to install.

I have a .babelrc file in my root to get past the exports error using the ES2015 modules to UMD transform :

{
  "presets": ["es2015"],
  "plugins": [
  "transform-es2015-modules-umd"
    ]
}

I use several foundation plugins in my project and I have almost no experience with a gulpfile or webpack but by changing the structure in the gulpfile.js 'foundation-js' task I got it working. Only using the dist folder though...and I haven't pushed to production yet. I tested the task with the same setup Jeremy used and just the foundation.min.js and they both worked.

gulp.task('foundation-js', function() {
  return gulp.src([ 
      './vendor/foundation-sites/dist/js/foundation.min.js'
     ])
    .pipe(babel({
    presets: ['es2015'],
      compact: true
  }))
    .pipe(gulp.dest('./assets/js'))
}); 

gulp.task('foundation-js', function() {
  return gulp.src([ 
      './vendor/foundation-sites/dist/js/foundation.js',
     ])
    .pipe(babel({
    presets: ['es2015'],
      compact: true
  }))
    .pipe(sourcemaps.init())
    .pipe(concat('foundation.js'))
    .pipe(gulp.dest('./assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(sourcemaps.write('.')) // Creates sourcemap for minified Foundation JS
    .pipe(gulp.dest('./assets/js'))
}); 

Anyway, I hope that helps. Someone who has more experience may know a better way and chime in. On another note, you can run webpack through gulp with webpack-stream.

[JeremyEnglert]

This was a Foundation bug. It has been addressed. Closing.