[6.2] Unknown plugin "transform-es2015-arrow-functions" specified in "../foundation-sites/.babelrc" at 0"

[JeremyEnglert]

Sorry if this is just from me not setting this up correctly. The .babelrc file included with the bower install of Foundation seems to be causing issues.

Error:
ReferenceError: Unknown plugin "transform-es2015-arrow-functions" specified in "/Users/jeremy/Documents/Sites/jointswp-github/wp-content/themes/JointsWP-sass/vendor/foundation-sites/.babelrc" at 0

When I remove the .babelrc file, everything compiles fine.

Here is the Gulp task:

// JSHint, concat, and minify Foundation JavaScript
gulp.task('foundation-js', function() {
  return gulp.src([ 

          // Foundation core - needed if you want to use any of the components below
          './vendor/foundation-sites/js/foundation.core.js',
          './vendor/foundation-sites/js/foundation.util.*.js',

          // Pick the components you need in your project
          './vendor/foundation-sites/js/foundation.abide.js',
          './vendor/foundation-sites/js/foundation.accordion.js',
          './vendor/foundation-sites/js/foundation.accordionMenu.js',
          './vendor/foundation-sites/js/foundation.drilldown.js',
          './vendor/foundation-sites/js/foundation.dropdown.js',
          './vendor/foundation-sites/js/foundation.dropdownMenu.js',
          './vendor/foundation-sites/js/foundation.equalizer.js',
          './vendor/foundation-sites/js/foundation.interchange.js',
          './vendor/foundation-sites/js/foundation.magellan.js',
          './vendor/foundation-sites/js/foundation.offcanvas.js',
          './vendor/foundation-sites/js/foundation.orbit.js',
          './vendor/foundation-sites/js/foundation.responsiveMenu.js',
          './vendor/foundation-sites/js/foundation.responsiveToggle.js',
          './vendor/foundation-sites/js/foundation.reveal.js',
          './vendor/foundation-sites/js/foundation.slider.js',
          './vendor/foundation-sites/js/foundation.sticky.js',
          './vendor/foundation-sites/js/foundation.tabs.js',
          './vendor/foundation-sites/js/foundation.toggler.js',
          './vendor/foundation-sites/js/foundation.tooltip.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'))
}); 

[erutan]

@colin-marshall that's missing babel-register. the following worked for someone else (I'm stuck on babel-register not loading at the moment though). #8256 (comment)

[colin-marshall]

@erutan babel-register is a dependency of babel-core so you should not need to include it in package.json. If adding babel-register to package.json makes things "work" then I'm guessing that the underlying cause is a permissions or linking issue, which should be fixed instead.

[erutan]

So far the solution for me includes uninstalling and reinstalling everything and doing manual global installs of packages because NPM doesn't quite manage packages despite the name. :/

Not entirely sure if babel-register in package.json is necessary, but it seems pretty clear that the babel-preset-es2015 itself is busted and needs to be exploded out (and foundation is also missing babel-plugin-transform-es2015-modules-commonjs from it's package.json, a part of that preset, so that would be good to have).

[colin-marshall]

@erutan I was wrong. I was able to reproduce the issue and it comes down to that you need to install gulp 4.0 globally. I ran npm install gulpjs/gulp-cli#4.0 -g and was back in business.

[erutan]

@colin-marshall I think there's a number of different issues that can crop up in the process. The TypeError issue only happens once you have babel-register itself running, which it seems a lot of us aren't able to do following docs (I'm assuming that some people at Zurb had stuff installed globally and missed some of the install issues - understandable and it's a big point release).

[colin-marshall]

Also, the reason that babel-plugin-transform-es2015-modules-commonjs is not included in the main Foundation Sites repo (the repo we are using to discuss this issue) is because we aren't using ES6 modules in Foundation's javascript (yet).

[colin-marshall]

And yes we definitely need to document that gulp 4.0 needs to be installed globally and look into what issues might arise from that with older projects.

[erutan]

It's possible then that using the .babelrc with everything blown out from the zurb-template solves the issue without the additions to the package.json, but going up earlier in the thread in the previous issue that doesn't seem to be the case. I honestly can't tell because I had to nuke everything and reinstall to even get to the gulp 4.0 issue - before it just wasn't loading babel-register at all, and by then I had already made those changes.

In the course of my research it seems like it's all a little squirrely at the moment, given the number of conflicting solutions in other github / stackoverflow issues. :)

[colin-marshall]

@erutan I deleted my initial post in this issue to minimize confusion (and because it was incorrect).

I guess we need to see @JeremyEnglert's package.json to figure out this issue as it is different than the babel-register problem.

[erutan]

Anyways I really appreciate being able to leverage the work in Foundation, even though 6 has been a bit more taxing than 5 in a few ways. It's a big rewrite, so I'm sorta treating it like when Apple comes out with a redesigned pro app and things are a bit ragey until the next version comes out. :p

[JeremyEnglert]

@colin-marshall - here is my package.json file.

{
  "name": "JointsWP-sass",
  "version": "4.0.0",
  "description": "A WordPress starter theme using Foundation 6",
  "repository": {
    "type": "git",
    "url": "https://github.com/JeremyEnglert/JointsWP.git"
  },
  "author": "Jeremy Englert",
  "license": "GPL-2.0 AND MIT",
  "homepage": "https://github.com/JeremyEnglert/JointsWP",
  "devDependencies": {
    "babel-preset-es2015": "^6.5.0",
    "browser-sync": "^2.11.0",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-babel": "^6.1.2",
    "gulp-bower": "0.0.10",
    "gulp-concat": "^2.5.2",
    "gulp-cssnano": "^2.1.1",
    "gulp-jshint": "^1.11.0",
    "gulp-plumber": "^1.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^1.2.0",
    "gulp-util": "^3.0.5",
    "jshint-stylish": "^2.0.0"
  }
}

[andycochran]

@JeremyEnglert I'm getting the same error trying to upgrade wp-foundation-sites. Lemme know if you find a solution.

[erutan]

@andycochran check out some of the solutions in #8256

update: meant more the link to the yeoman issue than my gulp fix, sorry: yeoman/generator-webapp#356 (comment)

[andycochran]

Thanks, @erutan.

@JeremyEnglert I'm pretty sure I'm having the exact issue as you, especially since I based a lot of my wp-foundation-sites theme off of your Joints theme.

I don't get the type error discussed in #8256. So, it's not a Gulp version issue.

This isn't a nice solution, but what worked for me is including all of these Babel plugins in the theme's package.json.

    "babel-plugin-transform-es2015-modules-commonjs": "^6.3.13",
    "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-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-register": "^6.5.2",

Then running gulp works fine.

Harrumph. 😔

[andycochran]

andycochran/wp-foundation-sites@132b4cc#commitcomment-16399810

[andycochran]

@JeremyEnglert FWIW, you'll need to add "what-input": "^2.0.0" too (until merge #8279 get's rolled in).

[JeremyEnglert]

I was able to "fix" the issue by completely removing the .babelrc from foundation-sites. The JS appears to compile without errors. But I'm going to see if it compiles differently when all of the Babel plugins are added to the package.json file.

[jacobarriola]

Same issue happening for me as well. I was able to compile the Foundation JS by also completely removing the .babelrc from foundation-sites as @JeremyEnglert pointed out. Obviously, not ideal; just wanted to make the core team aware as well. 👍

[erutan]

@jacobarriola have you tried including the .babelrc from the updated template instead of the more compact one in the upgrade guide? https://github.com/zurb/foundation-zurb-template/raw/master/.babelrc

[JeremyEnglert]

Okay - here's what I've figured out.

As @andycochran pointed out, adding all of the Babel plugins to the project/theme does "fix" the issue. However, removing .babelrc from foundation-sites also fixes the issue. And both ways end up compiling the same end result.

So I guess it comes down to this: should .babelrc be included with the bower version of foundation-sites?

I would argue that it should be left out - as the only people who will truly bennefit from it are those working inside of the foundation-sites directory. Most users (from what I can tell), simply reference these files and use their own methods to compile.

PS - Simply using babel-preset-es2015 seems to load all of the plugins that are currently being individually called - is there a reason that isn't being used instead?

[erutan]

@JeremyEnglert multiple people have found swapping out the plugin preset fixed the problem for them, read through the sister thread which has been linked here a few times.

Are you sure that babel is still transplicing? If you're getting ES2015 as output that doesn't leave you with a lot of browser support.

[JeremyEnglert]

The output is here: https://github.com/JeremyEnglert/JointsWP/blob/master/assets/js/foundation.js

I think this may be a NPM and/or Node version issue.

On my local machine, I'm running NPM 3.4.0 and Node 4.2.2 and everything works fine (with or without the .babelrc file). On my work machine, I'm running older versions of NPM and Node - that's when the issue arrises.

But I still have to question the necessity of including .babelrc in the Foundation-Sites bower install. Shouldn't those plugins be declared in the project itself? As noted above, I get the same result whether that file is included or not (because I'm declaring my own .babel plugins in the gulpfile.js - as I assume most people do).

https://github.com/JeremyEnglert/JointsWP/blob/master/gulpfile.js#L87

[a3020]

Took me an hour to get 6.2 work with gulp / babel. Ended up removing .babelrc from Foundation and then it worked just fine. Installing Gulp 4 globally doesn't seem to be a good idea to me. I've set the babel preset like below, because I don't have that installed globally either:

.pipe(babel({
  presets: [__dirname + '/node_modules/babel-preset-es2015']
}))

[JeremyEnglert]

Is there any benefit to having the .babelrc included with the bower install of Foundation?

It makes sense for the foundation-template, but for the bower install, it seems to cause more issues than good.

[andycochran]

Agreed.

[adamplabarge]

thank you andycochran - adding the babel plugins to package.json resolved this issue for me