Menu icon Foundation
Foundation for Emails fails inlining

Hi. I'm trying to run a Foundation for Emails build and the process fails at inlining. I'm guessing something is borked about the installation but I don't know how to troubleshoot what's broken. Here's my terminal output:

Joel-Mac-Pro:client-email joel$ npm run build

> foundation-emails-template@1.0.0 build /Sites/client-email
> gulp --production

[14:20:16] Requiring external module babel-register
[14:20:44] Using gulpfile /Sites/client-email/gulpfile.babel.js
[14:20:44] Starting 'default'...
[14:20:44] Starting 'build'...
[14:20:44] Starting 'clean'...
[14:20:44] Finished 'clean' after 17 ms
[14:20:44] Starting 'pages'...
[14:20:47] Finished 'pages' after 2.71 s
[14:20:47] Starting 'sass'...
[14:20:50] Finished 'sass' after 3.68 s
[14:20:50] Starting 'images'...
[14:20:54] gulp-imagemin: Minified 2 images (saved 30.44 kB - 26.2%)
[14:20:54] Finished 'images' after 3.68 s
[14:20:54] Starting 'inline'...
Unhandled rejection TypeError: Cannot read property 'prototype' of undefined
    at /Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/style-data/node_modules/mediaquery-text/index.js:37:107
    at Array.forEach (native)
    at /Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/style-data/node_modules/mediaquery-text/index.js:36:28
    at Array.forEach (native)
    at module.exports (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/style-data/node_modules/mediaquery-text/index.js:23:11)
    at Object.<anonymous> (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/style-data/index.js:39:32)
    at null.exports.each (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/cheerio/lib/api/traversing.js:293:24)
    at module.exports (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/style-data/index.js:25:16)
    at /Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/index.js:14:9
    at next (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/batch/index.js:118:7)
    at Batch.end (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/batch/index.js:154:5)
    at module.exports (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/index.js:24:11)
    at /Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/lib/inlineContent.js:15:9
    at tryCatcher (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/util.js:26:23)
    at Promise._resolveFromResolver (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/promise.js:483:31)
    at new Promise (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/promise.js:71:37)
    at inlineContent (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/lib/inlineContent.js:8:12)
    at /Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/index.js:27:9
    at tryCatcher (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/util.js:26:23)
    at Promise._resolveFromResolver (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/promise.js:483:31)
    at new Promise (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/promise.js:71:37)
    at module.exports (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/index.js:8:12)
[14:20:57] The following tasks did not complete: default, build, inline
[14:20:57] Did you forget to signal async completion?

emailsbuildinliningerror

Hi. I'm trying to run a Foundation for Emails build and the process fails at inlining. I'm guessing something is borked about the installation but I don't know how to troubleshoot what's broken. Here's my terminal output:

Joel-Mac-Pro:client-email joel$ npm run build

> foundation-emails-template@1.0.0 build /Sites/client-email
> gulp --production

[14:20:16] Requiring external module babel-register
[14:20:44] Using gulpfile /Sites/client-email/gulpfile.babel.js
[14:20:44] Starting 'default'...
[14:20:44] Starting 'build'...
[14:20:44] Starting 'clean'...
[14:20:44] Finished 'clean' after 17 ms
[14:20:44] Starting 'pages'...
[14:20:47] Finished 'pages' after 2.71 s
[14:20:47] Starting 'sass'...
[14:20:50] Finished 'sass' after 3.68 s
[14:20:50] Starting 'images'...
[14:20:54] gulp-imagemin: Minified 2 images (saved 30.44 kB - 26.2%)
[14:20:54] Finished 'images' after 3.68 s
[14:20:54] Starting 'inline'...
Unhandled rejection TypeError: Cannot read property 'prototype' of undefined
    at /Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/style-data/node_modules/mediaquery-text/index.js:37:107
    at Array.forEach (native)
    at /Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/style-data/node_modules/mediaquery-text/index.js:36:28
    at Array.forEach (native)
    at module.exports (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/style-data/node_modules/mediaquery-text/index.js:23:11)
    at Object.<anonymous> (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/style-data/index.js:39:32)
    at null.exports.each (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/cheerio/lib/api/traversing.js:293:24)
    at module.exports (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/style-data/index.js:25:16)
    at /Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/index.js:14:9
    at next (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/batch/index.js:118:7)
    at Batch.end (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/node_modules/batch/index.js:154:5)
    at module.exports (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/extract-css/index.js:24:11)
    at /Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/lib/inlineContent.js:15:9
    at tryCatcher (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/util.js:26:23)
    at Promise._resolveFromResolver (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/promise.js:483:31)
    at new Promise (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/promise.js:71:37)
    at inlineContent (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/lib/inlineContent.js:8:12)
    at /Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/index.js:27:9
    at tryCatcher (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/util.js:26:23)
    at Promise._resolveFromResolver (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/promise.js:483:31)
    at new Promise (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/node_modules/bluebird/js/main/promise.js:71:37)
    at module.exports (/Sites/client-email/node_modules/gulp-inline-css/node_modules/inline-css/index.js:8:12)
[14:20:57] The following tasks did not complete: default, build, inline
[14:20:57] Did you forget to signal async completion?

This post has been closed. No new replies can be added.

Joel Davies over 2 years ago

Welp, never mind! The problem seems to be me!

I was trying to insert an @font-face rule so I could use a Google font, as per this Litmus how-to. Their recommendation was to paste the rule in the head, which I did above the commented-out `<!--<style>-->` in src > layouts > default.html like this:

  <head>
    <link rel="stylesheet" type="text/css" href="{{root}}css/app.css">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width">
    <title>{{subject}}</title>
    <style>
    @media screen {@font-face {font-family: 'Cabin';font-style: normal;font-weight: 400;src: local('Cabin'), local('Cabin-Regular'),url(https://fonts.gstatic.com/s/cabin/v10/kJXt72Gt1LyFMZcEKAAvlKCWcynf_cDxXwCLxiixG1c.woff) format('woff');}}
    </style>
    <!-- <style> -->
  </head>

Evidently that's a wrong approach -- inserting an uncommented `<style>` tag there will break the build. Or at any rate, the build ran successfully after I removed that inserted `<style>`block and put the @font-face at the top of my src > assets > scss > app.scss file:

@media screen {@font-face {font-family: 'Cabin';font-style: normal;font-weight: 400;src: local('Cabin'), local('Cabin-Regular'),url(https://fonts.gstatic.com/s/cabin/v10/kJXt72Gt1LyFMZcEKAAvlKCWcynf_cDxXwCLxiixG1c.woff) format('woff');}}

@import 'settings';
@import 'foundation-emails';

@import 'template/template';

/* etc */

So, object lesson, if you are trying to use a web font, do it at the top of your app.scss file!