Foundation-sites: ZURB/template fails to load Babel

[Lefthandmedia]

What should happen?

Upon runnig Gulp the dist folder should be build properly.
...

What happens instead?

After a clean install , running yarn install and running gulp
The terminal gives:

[09:31:15] Failed to load external module babel-register
[09:31:15] Failed to load external module babel-core/register
[09:31:15] Failed to load external module babel/register
/Users/rdg/Documents/REPOSITORY/xxx/gulpfile.babel.js:3
import plugins       from 'gulp-load-plugins';
       ^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:80:7)
    at createScript (vm.js:264:10)
    at Object.runInThisContext (vm.js:316:10)
    at Module._compile (internal/modules/cjs/loader.js:670:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:718:10)
    at Module.load (internal/modules/cjs/loader.js:605:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:544:12)
    at Function.Module._load (internal/modules/cjs/loader.js:536:3)
    at Module.require (internal/modules/cjs/loader.js:643:17)
    at require (internal/modules/cjs/helpers.js:22:18)

...

Possible Solution

Test Case and/or Steps to Reproduce (for bugs)

How to reproduce:

1. clone a fresh repo Master,
2. run yarn install
3. and then gulp

Context

...

Your Environment

• Foundation version(s) used: https://github.com/zurb/foundation-zurb-template
• Browser(s) name and version(s): NA
• Device, Operating System and version: OSX High Sierra
• Link to your project: NA

Checklist

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] There are no other issues similar to this one.
• [x] The issue title and template are correctly filled.

[DanielRuf]

The template is probably outdated.

Can you test which version of gulp-load-plugins is installed and which version of Node.js is used?

[Lefthandmedia]

Hi,

  "name": "gulp-load-plugins",
  "version": "1.5.0",

node -v = 8.12.0

To me it looks like its fails to load Babel properly, therefore it trips over the import statement in the first line in gulpfile.babel.js

the error

[10:32:57] Failed to load external module babel-register
[10:32:57] Failed to load external module babel-core/register
[10:32:57] Failed to load external module babel/register

I see there is no module babel-register
there is only @babel/register maybe thats why
RDG

[DanielRuf]

@babel/register

That's the new one.

Can you provide your full package.json and .babelrc and gulpfile or some zip file without node_modules sow e can test and reproduce this?

[Lefthandmedia]

I just downloaded the Master zip from https://github.com/zurb/foundation-zurb-template.
But im happy to upload the requested files here
foundation-zurb-template-freshtest.zip

We tested on several machines and all have the same result

RDG

[afoeder]

I have an interesting observation in this context; running gulp standalone gives

$ gulp
[11:12:44] Requiring external module babel-register
[11:12:46] Using gulpfile ~/WebsiteProjects/acme/www/gulpfile.babel.js
[11:12:46] Starting 'default'...
[11:12:46] Starting 'build'...
[11:12:46] Starting 'clean'...
[11:12:46] Finished 'clean' after 58 ms
[11:12:46] Starting 'pages'...
[11:12:46] Starting 'sass'...
[11:12:46] Starting 'javascript'...
[11:12:46] Starting 'images'...
[11:12:46] Starting 'copy'...
[11:12:46] Starting 'appicons'...
[11:12:46] Starting '<anonymous>'...
[11:12:47] Finished 'copy' after 1.13 s
[11:12:47] Finished '<anonymous>' after 1.14 s
[11:12:48] Finished 'sass' after 2.05 s
[11:12:49] Version: webpack 2.7.0
 Asset    Size  Chunks             Chunk Names
app.js  121 kB       0  [emitted]  app
[11:12:49] Finished 'appicons' after 2.49 s
[11:12:49] Finished 'javascript' after 2.49 s
[11:12:49] Finished 'pages' after 2.52 s
[11:12:49] Finished 'images' after 2.68 s
[11:12:49] Starting 'styleGuide'...
[11:12:49] Finished 'styleGuide' after 34 ms
[11:12:49] Finished 'build' after 2.77 s
[11:12:49] Starting 'server'...
[11:12:49] Finished 'server' after 31 ms
[11:12:49] Starting 'watch'...
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:8000
    External: http://172.16.11.35:8000
…

When running npm start I get

$ npm start

> [email protected] start /Users/foeder/WebsiteProjects/acme/www
> gulp

[11:14:28] Failed to load external module @babel/register
[11:14:28] Requiring external module babel-register
[11:14:29] Using gulpfile ~/WebsiteProjects/acme/www/gulpfile.babel.js
[11:14:29] Starting 'default'...
[11:14:29] Starting 'build'...
[11:14:29] Starting 'clean'...
[11:14:29] Finished 'clean' after 28 ms
…

Despite the error message everything seems to work fine though.

[DanielRuf]

Despite the error message everything seems to work fine though.

In general this should just be a warning and it is a known problem of the babel-loader.

[afoeder]

and it is a known problem

ok thanks sorry for the interruption then :)

[DanielRuf]

Also see https://github.com/gulpjs/gulp/issues/1631#issuecomment-347587264 as the maintainer of gulp closed the issue and writes that this is intended when using Gulp.

Fact is Babel changed their internal setup to @babel packages and thus loads them if they are installed. Otherwise is throws this warning which is shown by Gulp and other consumers.

[DanielRuf]

Imho it is an issue in Gulp (which won't be "fixed").

[Lefthandmedia]

@afoeder Can you confirm you have some babel package installed globally? Because the log you show tells me that babel loader can't be found in first instance but can be found under a different name, its fallback so to speak. This is quite normal. Why my case differs form yours and the one @DanielRuf qoutes on the gulp site is, that none of the fallbacks are found. So gulp stops because the gulpfile.js itself isnt 'babelified'.

So imho the package.json should contain the a babel-register that works, apparently it doesn't. So my guess is that you have a version of babel-register globaly installed and therefore the Gulp proces CAN find a fallback version of babel-register and you can build as expected. Still i would expect the project should be able to build without relying on global packages

@DanielRuf Does this means that gulp won't be used anymore in the ZURB-template?

[afoeder]

@Lefthandmedia I can offer you the output of

$ npm list --global | grep -C 5 babel 
/usr/local/lib
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └─┬ [email protected]
--
--
│   ├── [email protected] deduped
│   ├── [email protected] deduped
│   └── [email protected] deduped
├─┬ [email protected]
│ ├─┬ @serverless/[email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ ├── [email protected] deduped
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]

So yes I guess I have babel installed/available globally due to at least create-react… and serverless.

If you need more details let me know.

[ncoden]

@DanielRuf This issue seems to be similar to https://github.com/zurb/foundation-sites/issues/11589. Should we consider it as resolved?

[DanielRuf]

Seems so. Should be resolved with Babel 7 and Gulp 4.

[Lefthandmedia]

Nope,
just did a fresh clone from https://github.com/zurb/foundation-zurb-template and still get the same

[16:42:32] Failed to load external module babel-register
[16:42:32] Failed to load external module babel-core/register
[16:42:32] Failed to load external module babel/register

[ncoden]

@Lefthandmedia I cannot reproduce the issue, even with no gulp or babel installed globally.

git clone [email protected]:zurb/foundation-zurb-template.git
cd foundation-zurb-template
npm i
npm start

➜  npm ls -g --depth=0
/Users/ncoden/.nvm/versions/node/v11.0.0/lib
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Did you tried the following:

rm -rf node_modules
rm package-lock.json
npm i

[Lefthandmedia]

hi i deleted everything in /usr/local/lib/node-modules and now it works.

[daniel-thisnow]

aaaaaaaaaaaaaaaaaaaa - why doesn't any of this work?

[JeremyEnglert]

aaaaaaaaaaaaaaaaaaaa - why doesn't any of this work?

Can you be more specific? This comment doesn't help us get any closer to fixing this. Did you try what other users above posted as fixes?

[daniel-thisnow]

Sorry Jeremy, I should delete my comment, but I'll reply first. I spent a few hours last night starting with the Zurb Foundation for Emails installation tutorial, then various forums looking for solutions.

Failed to load external module @babel/register was a common error amongst others. I was starting to feel like I was going round in circles. I am not familiar enough to understand what the problem really is.

[DanielRuf]

Failed to load external module @babel/register was a common error amongst others.

In most cases this can be ignored and it should still work. If not do npm install @babel/register --save-dev.

[daniel-thisnow]

i finally got there. I had to update the to "gulp": "^4.0.0" in the package.json from the longer line "gulp": "git+https://github.com/gulpjs/gulp.git#4.0" and then "npm rebuild node-sass" and its working.

thanks for your help and patience.

[melcarthus]

I got here via search, but this seems to be an obvious notification when running the script, where the script itself, does not brake. But I just started a new foundation-sites project and I can get it to work. When running foundation-watch or gulp I get

/Users/name/Documents/webdevelopment/xx/gulpfile.babel.js:3
import plugins from 'gulp-load-plugins';
       ^^^^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Module._compile (/Users/name/Documents/webdevelopment/xx/node_modules/pirates/lib/index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.newLoader [as .js] (/Users/name/Documents/webdevelopment/xx/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at execute (/Users/name/Documents/webdevelopment/xx/node_modules/gulp-cli/lib/versioned/^4.0.0/index.js:36:18)
Error: [email protected] start: `gulp`
Exit status 1
    at EventEmitter.<anonymous> (/usr/local/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/lifecycle.js:217:16)
    at EventEmitter.emit (events.js:198:13)
    at ChildProcess.<anonymous> (/usr/local/lib/node_modules/foundation-cli/node_modules/npm/lib/utils/spawn.js:24:14)
    at ChildProcess.emit (events.js:198:13)
    at maybeClose (internal/child_process.js:982:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)

I tried the solutions in this thread. But these solutions did not help me.

[Loosie94]

Was having the same issue an it cost me hours, but found the solution that worked for me.
Add a file in the same directory as the gulpfile.babel.js, called:

.babelrc

Then add:

{ "presets": [ "@babel/preset-env" ] }

Inside it.
Run: yarn start or gulp
And it should work again.