Issue running Foundation Watch

I was running the site a couple hours ago, but restarting the terminal and running foundation watch on an existing project is throwing this error? I was able to build a new foundation project and run the watch command just fine.

foundation-zurb-template@1.0.0 start /Users/preston/Sites/2020
gulp

[23:26:28] Requiring external module @babel/register
[23:26:31] Using gulpfile ~/Sites/2020/gulpfile.babel.js
[23:26:31] Starting 'default'...
[23:26:31] Starting 'build'...
[23:26:31] Starting 'clean'...
[23:26:31] Finished 'clean' after 3.67 ms
[23:26:31] Starting 'pages'...
[23:26:31] Starting 'javascript'...
[23:26:31] Starting 'images'...
[23:26:31] Starting 'copy'...
[23:26:31] 'images' errored after 319 ms
[23:26:31] TypeError: $.imagemin.jpegtran is not a function
    at images (/Users/preston/Sites/2020/gulpfile.babel.js:144:18)
    at bound (domain.js:425:14)
    at runBound (domain.js:438:12)
    at asyncRunner (/Users/preston/Sites/2020/node_modules/async-done/index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:79:9)
[23:26:31] 'build' errored after 335 ms
[23:26:31] 'default' errored after 337 ms
Error: foundation-zurb-template@1.0.0 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:193: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:193:13)
    at maybeClose (internal/child_process.js:999:16)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:266:5)

You might want to reinstall the node_modules with npm ci.
You can also run the project directly with npm start, no need to use foundation-cli for this.

You probably upgraded gulp-imagemin.
We use gulp-imagemin 4.1.0 (https://github.com/sindresorhus/gulp-imagemin/tree/v4.1.0) which uses jpegtran. Newer versions after this (higher major versions) use mozjpeg.

See also https://github.com/sindresorhus/gulp-imagemin/blob/e1e3cf2a35ef1ff1f200aa5432d1167a8f347039/index.js#L120

@DanielRuf thanks for the quick reply!

  1. I just ran npm ci looks like it ran okay
  2. I ran watch again and still got the error
    2a. it is also now asking me to run yarn upgrade (which I do), but running npm ci resets the yarn again lol
  3. I ran npm start and it throws the same .imagemin.jpegtran is not a function error

My version of gulp is on 4.0.0. Is there something I’m missing?

It’s not related to gulp itself. Please check the version of gulp-imagemin in node_modules/gulp-imagemin/package.json.

It should be 4.1.0. And check the package.json file of your generated project. It should show the same like here: https://github.com/foundation/foundation-zurb-template/blob/2ce1e137d63db12715f667a5edcb5b32119c6330/package.json#L32

1 Like

Please don’t, this upgrades dependencies.
So you are using yarn?

:man_shrugging:the CLI gave me this message
Browserslist: caniuse-lite is outdated. Please run next command yarn upgrade

It’s just a notice / warning. You can ignore this message regarding browserslist for now.

1 Like

my package.json in the project actually says it’s on 7.1.0 LOL :pleading_face::sob:
in node_modules it says 4.0.0 lol

You can manually set it to ^4.1.0 in your root package.json and run npm i again.

1 Like

I actually misspoke and I didn’t even have gulp-imagemin installed :joy:
I installed it and watch ran perfectly. appreciate it.

@DanielRuf I have a tangential question if you don’t mind…
I was having an issue running the Slick Carousel in my project: Uncaught ReferenceError: $ is not defined

Adding this to my footer fixes is: <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script> but obviously it’s not being loaded from the app.js file?

I’m unsure what this means if it’s not loading jquery into the proj:

import $ from 'jquery';
import 'what-input';

// Foundation JS relies on a global variable. In ES6, all imports are hoisted
// to the top of the file so if we used `import` to import Foundation,
// it would execute earlier than we have assigned the global variable.
// This is why we have to use CommonJS require() here since it doesn't
// have the hoisting behavior.
window.jQuery = $;

Oh, seems I found the solution… I need to replace the $ with jQuery

Correct, it is exported as window.jQuery. And the app.js bundle should already contain jQuery, unless externals is used in the webpack config.

The $ is only available in the app.js through the import. webpack prevents that it is overwritten by renaming it to something like jQuery1234 when bundling the dependencies.

Thanks :sob::joy: I embarked on this journey trying to figure out why my carousel wasn’t working and ended up breaking some many other things hahaha.