Foundation-sites: Unexpected character '`' when building using Blendid and Foundation 6.4.0-rc

[ryanjavens]

Hi everyone!

I'm having an issue with compiling Javascript using 6.4.0-rc-x. I've narrowed the issue down to something that the newest version of Foundation is causing, but I'm not sure if it is an incompatible script on Blendid's behalf or if it is an issue in Foundation. I hope you don't mind that I've posted this bug in both Blendid's repo and here to see what answers I can get.

How to reproduce this bug:

1. Install either versions of the Foundation 6.4.0 release candidate and the latest version of Blendid using Yarn (4.1.1).
2. Initialize a project using Blendid.
3. Attempt to build using yarn run blendid -- build
4. A gulp error appears
5. No javascript is compiled on build.

What should happen:

A build task through Yarn should be completed successfully.

What happened instead:

[09:36:10] gulp-notify: [Error running Gulp] Error: app-819bcd75fef4d361a966.js from UglifyJs Unexpected character '`' [app-819bcd75fef4d361a966.js:10358,124]

Browser(s) and Device(s) tested on:

MacOS Sierra 10.12.5
Blendid 4.1.1 through Yarn

Foundation Version(s) you are using:

Foundation Sites 6.4.0-rc2 and Foundation Sites 6.4.0-rc1 (both produce the error)

Test case link:

https://github.com/ryanjavens/broken-foundation-blendid

I look forward to any tips or discussion we can have on this!

[kball]

HI @ryanjavens
Thank you for the report... I just checked out your repository and it appears to be working properly (results of my build posted below). And looking at the app.js the page is loading, it seems to have all of the Foundation JS in there... I'm not familiar with blendid, just cloned your repository and did yarn install followed by yarn blendid --build, is there anything else I should do to reproduce?

$ yarn blendid --build
yarn blendid v0.24.6
$ "/Users/kball/git/broken-foundation-blendid/node_modules/.bin/blendid" 
[10:31:30] Working directory changed to ~/git/broken-foundation-blendid/node_modules/blendid
[10:31:33] Using gulpfile ~/git/broken-foundation-blendid/node_modules/blendid/gulpfile.js
[10:31:33] Starting 'default'...
[10:31:33] Starting 'clean'...
[10:31:33] Finished 'clean' after 16 ms
[10:31:33] Starting 'fonts'...
[10:31:33] Starting 'images'...
[10:31:33] Starting 'svgSprite'...
[10:31:33] Finished 'fonts' after 61 ms
[10:31:33] Finished 'images' after 29 ms
[10:31:33] Finished 'svgSprite' after 27 ms
[10:31:33] Starting 'html'...
[10:31:33] Starting 'stylesheets'...
[10:31:33] Finished 'html' after 80 ms
[10:31:33] Finished 'stylesheets' after 190 ms
[10:31:33] Starting 'static'...
[10:31:33] Finished 'static' after 4.06 ms
[10:31:33] Starting 'browserSync'...
[10:31:33] Finished 'browserSync' after 161 ms
[10:31:33] Starting 'watch'...
[10:31:33] Finished 'watch' after 12 ms
[10:31:33] Finished 'default' after 465 ms
[BS] Access URLs:
 ---------------------------------------
       Local: http://localhost:3000
    External: http://192.168.100.88:3000
 ---------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.100.88:3001
 ---------------------------------------
[BS] Serving files from: /Users/kball/git/broken-foundation-blendid/public
(node:69163) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
webpack: wait until bundle finished: /javascripts/app.js
webpack built efa7d7dc2f9f5488258c in 2754ms

webpack: Compiled successfully.

[ryanjavens]

Hey @kball!

I appreciate your reply! Would you be able to run your build again by using yarn blendid -- build to see if you can recreate my error? Blendid is really nitpicky and threw me off the first time too, but the space after the two dashes is how Blendid handles arguments. yarn blendid --build opens a dev environment whereas yarn blendid -- build will try to create production assets.

Thanks!

[kball]

@ryanjavens Thanks, now I am able to reproduce the issue. I'll see what I can figure out.

[artursopelnik]

+1

[kball]

I traced this to a config issue... to import the ES2016 modules you need to configure babel to not ignore them (blendid defaults to ignoring node_modules for babel)...

I changed config/task-config.js to do this in this way:

  javascripts: {                                                                                                     │//Foundation.rtl = rtl;
    entry: {                                                                                                         │//Foundation.GetYoDigits = GetYoDigits;
      // files paths are relative to                                                                                 │//Foundation.transitionend = transitionend;
      // javascripts.dest in path-config.json                                                                        │//
      app: ["./app.js"]                                                                                              │//import { Box } from '../../js/foundation.util.box'
    },                                                                                                               │//import { onImagesLoaded } from '../../js/foundation.util.imageLoader';
    babelLoader: {                                                                                                   │//import { Keyboard } from '../../js/foundation.util.keyboard';
      // "test" is derived from TASK_CONFIG.javascripts.extensions                                                   │//import { MediaQuery } from '../../js/foundation.util.mediaQuery';
      // "options" is derived from TASK_CONFIG.javascripts.babel                                                     │//import { Motion, Move } from '../../js/foundation.util.motion';
      loader: 'babel-loader',                                                                                        │//import { Nest } from '../../js/foundation.util.nest';
      exclude: /node_modules\/(?!(foundation-sites)\/).*/                                                            │//import { Timer } from '../../js/foundation.util.timer';
    },                                                                                                               │//
  },       

Going to leave this open for now until we add this to docs, but please confirm this resolves for you @artursopelnik @ryanjavens

[ryanjavens]

@kball you rule! It looks like it fixed it on my end. Thank you so much!

[york-xtrem]

@ryanjavens to include the sass framework you have a fork and modified the stylesheets task to include:

.pipe ($ .sass ({includePaths: PATHS.sass})

sass:
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src "

or is there another way to do it?

[york-xtrem]

I respond to myself:

// config/task-config.js

  stylesheets: {
    sass: {
      includePaths: [
        "node_modules/foundation-sites/scss",
        "node_modules/motion-ui/src"
      ]
    }
  }

[gustavokrause]

I set this way to avoid a memory issue on Windows:

exclude: [/node_modules\/(?!(foundation-sites)\/).*/, /node_modules/]

and it worked, before it was working only on Ubuntu.