Menu icon Foundation
Failed to load external module @babel/register

Hi There!

 

I've installed the stack Zurb via Terminal on MAC, launched the "Foundation Watch" and get this message:

 

Failed to load external module @babel/register

Requiring external module babel-register

 

That might be why when I preview my files in a browser, my CSS won't link to my HTML. 

 

Anyone has an idea?

 

Thank you!

stack foundation

Hi There!

 

I've installed the stack Zurb via Terminal on MAC, launched the "Foundation Watch" and get this message:

 

Failed to load external module @babel/register

Requiring external module babel-register

 

That might be why when I preview my files in a browser, my CSS won't link to my HTML. 

 

Anyone has an idea?

 

Thank you!

Nikki James over 1 year ago

I have the same issue

michel bocande over 1 year ago

... Where is Rafi? Is there anyone at Zurb who can help? 

 

Thank you!

Andrew Henning over 1 year ago

I also have this issue, using:

latest (current) Foundation 6.4.1 for Sites (Official Zurb Template) from Github

My environment:

  • Windows 10 1709
  • NodeJS v9.2.0
  • Visual Studio Code 1.18.1

I made one change to the package.json file:

"gulp-sass": "^2.1.0",

is now:

"gulp-sass": "^3.1.0",

The output from npm start:

What is wrong with babel register? How can I fix this?

Nikki James over 1 year ago

I just found a temporary solution for this. For some reason gulp v3.9.1~4.0 has this issue but when using 3.9.0 i have no issue what so ever. 

 

$ sudo npm uninstall -g gulp
$ npm install -g gulp@3.9.0
$ npm uninstall --save-dev gulp
$ npm install --save-dev gulp@3.9.0

 

$ gulp -v
Requiring external module babel-core/register
CLI version 3.9.0
Local version 3.9.0

Nikki James over 1 year ago

Or update to v4 alpha2

 

 npm install --g 'gulpjs/gulp.git#4.0'

 

I think this does not affect project functionality. 

 

I think this right here is just the old way to load external module.

 Failed to load external module @babel/register

And this is the new way to load the modules which works well.

Requiring external module babel-register

 

correct me if i'm wrong. It's just weird because this doesn't happen in my other foundation project using v6.4.3 or 6.4.1 which is using the same gulp v4.

Andrew Henning over 1 year ago

Hey Nikki James

I am using already using gulp@4.0.0-alpha.2 (see below). In fact, using the latest Foundation for sites 6.4.3 (Zurb template), gulp v4 alpha 2 is what is configured by default in package.json. Setup a brand new project with no changes and you get exactly the aforementioned babel/register error, despite using that version of gulp. That suggests the problem is a combination of other things.

These are the packages used in my project (as setup by the standard Zurb template, except for gulp-sass, which I changed from version 2.1.0 to 3.1.0):

npm list --depth=0
foundation-zurb-template@1.0.0 C:\Users\***************\Documents\Main\Ayrino
+-- babel-core@6.26.0
+-- babel-loader@6.4.1
+-- babel-preset-es2015@6.24.1
+-- babel-register@6.26.0
+-- browser-sync@2.18.13
+-- foundation-sites@6.4.3
+-- gulp@4.0.0-alpha.2 (github:gulpjs/gulp#6d71a658c61edb3090221579d8f97dbe086ba2ed)
+-- gulp-autoprefixer@3.1.1
+-- gulp-babel@6.1.2
+-- gulp-clean-css@3.9.0
+-- gulp-cli@1.4.0
+-- gulp-concat@2.6.1
+-- gulp-extname@0.2.2
+-- gulp-if@2.0.2
+-- gulp-imagemin@2.4.0
+-- gulp-load-plugins@1.5.0
+-- gulp-sass@3.1.0
+-- gulp-sourcemaps@1.12.0
+-- gulp-uglify@1.5.4
+-- gulp-uncss@1.0.6
+-- jquery@3.2.1
+-- js-yaml@3.10.0
+-- motion-ui@1.2.3
+-- panini@1.5.1
+-- rimraf@2.6.2
+-- style-sherpa@1.0.2
+-- vinyl-named@1.1.0
+-- webpack@2.7.0
+-- webpack-stream@3.2.0
+-- what-input@4.3.1
`-- yargs@3.32.0

michel bocande over 1 year ago

Hi guys,

 

Thanks for your help, but could you walk me through step by step to install or modify those files. I'm not familiar yet to those scripts. I don't know which one to follow at this point - Andrew or Nikki?

Should I worry about the errors message Failed to load external module @babel/register and Requiring external module babel-register

In fact, my problem is that when previewing my HTML files in the browser the CSS is missing. That happens only from the src folder. The Dist folder output the HTML files entirely with CSS. Therefore, Foundation is useless at this point.

Does it make sense?

Thanks a lot guys!

Andrew Henning over 1 year ago

I've come to the same conclusion as Nikki. The error message:

"Failed to load external module @babel/register "

is nothing to worry about. It can be ignored.

I just pulled down a fresh copy of the Foundation for Sites Template, v6.3.1 (advanced version with SCSS support) and it gives me the exact same error. The debugger issue I mentioned earlier (which I deleted) was unrelated.

Andrew Henning over 1 year ago

@Michael Bocande

I don't use Zurb's foundation-cli tool because:

  • it can only install the very latest version of the Foundation for Sites template, which is rarely what I need.
  • I don't need anything automatically updating Foundation for Sites to a newer version. I prefer to do that manually in a very controlled way and always starting from the default template.

For that reason I can't help you with your foundation-cli and/or CSS issue. All I can say is that the error message is not the problem (it can be ignored). However, I also don't really understand what you are saying:

> when I preview my files in a browser, my CSS won't link to my HTML.

  • What does preview mean?
  • What web server?
  • What files (location/type/name)?

From the command prompt, cd to your project directory. Then type "npm start". Is your site opened up in a browser and does it look as expected?

michel bocande over 1 year ago

Andrew,

I want to learn how to install the Zurb Template manually.

I went to the foundation doc but frankly I think they're talking to experts not to even intermediate. There is not enough walk through in my opinion. Could you point me to detailed documentations? Videos are welcome. Or if you could put me on the right track that would be very much appreciated.

I really want to learn Foundation.

Thanks!

michel bocande over 1 year ago

For some reasons, this post was supposed to come before the last one and it disappeared. This is to answer your question.

 

OK, "npm start" opened up in a browser and looked as expected - let’s call it localhost:8000

 

Here is my src file structure:

 

src

assets

data

layout

default.html

pages

index.html        

partials

styleguide

 

Let’s say I use bracket - If I am in index.html I would preview this page in Chrome for example. The result should look like localhost:8000

Instead I have the unstyled version of localhost:8000 like below -

Welcome to Foundation for Sites

We’re stoked you want to try Foundation!

To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.

Once you've exhausted the fun in this document, you should check out:

Foundation Documentation
Everything you need to know about using the framework.

Foundation Code Skills
These online courses offer you a chance to better understand how Foundation works and how you can master it to create awesome projects.

Foundation Forum
Join the Foundation community to ask a question or show off your knowledge.

Foundation on Github
Latest code, issue reports, feature requests and more.

@zurbfoundation
Ping us on Twitter if you have questions. When you build something with this we'd love to see it (and send you a totally boss sticker).

Here’s your basic grid:

This is a twelve column section in a grid-x with grid-margin-x. Each of these includes a div.callout element so you can see where the cell are - it's not required at all for the grid.

Six cell

Six cell

Four cell

Four cell

Four cell

 

 

In this condition, it’s impossible to see changes I would make in /src/pages/index.html or any other files in /src/pages/