fullPage.js npm error

[jameslanman]

Step 1: Install latest version of FoundationPress following instructions on ReadMe file and update NPM to v3.9.5 and Node.js to v6.2.1 (latest versions).

Step 2: Add jquery.fullPage.min.js downloaded from https://github.com/alvarotrigo/fullPage.js to the custom folder

Step 3: Execute "npm run build".

I expected "npm run build" to work. Instead, it threw a ton of NPM errors and stopped watching/building.

Please List the Following:

• OS & version: OSX Yosemite 10.10.5
• Node version (node -v) [Node v4+ is required] : v6.2.1
• Foundation version (bower list) : FoundationPress v2.6.2

[colin-marshall]

@jameslanman we can't help you without knowing what errors were thrown by NPM.

[jameslanman]

While I have been able to get this to work with the non-minified script, when I execute and run build it works but then stops watching the project.

Two questions:

1. Should I attempt to fix these errors or should I ignore them?
2. Is this a known issue with minified scripts? It has happened with other minified js plugins now as well.

[14:29:11] gulp-notify: [Gulp notification] jquery.fullPage.js (28 errors)
(466:98) Expected an assignment or function call and instead saw an expression.
(467:101) Expected an assignment or function call and instead saw an expression.
(881:138) Expected an assignment or function call and instead saw an expression.
(882:86) Expected an assignment or function call and instead saw an expression.
(947:142) Expected an assignment or function call and instead saw an expression.
(948:126) Expected an assignment or function call and instead saw an expression.
(960:38) 'slideIndex' used out of scope.
(960:50) 'slideAnchorLink' used out of scope.
(1212:77) Expected an assignment or function call and instead saw an expression.
(1404:22) 'slideIndex' used out of scope.
(1404:34) 'slideAnchorLink' used out of scope.
(1538:138) Expected an assignment or function call and instead saw an expression.
(1546:57) Possible strict violation.
(1546:61) Expected an assignment or function call and instead saw an expression.
(1553:17) 'destiny' is already defined.
(1569:17) 'destiny' is already defined.
(1594:17) 'destiny' is already defined.
(1698:15) Possible strict violation.
(1727:29) Possible strict violation.
(1729:19) Possible strict violation.
(1749:27) Possible strict violation.
(1756:28) Possible strict violation.
(1757:55) Possible strict violation.
(1782:21) Expected a 'break' statement before 'case'.
(1897:156) Expected an assignment or function call and instead saw an expression.
(2734:123) Expected an assignment or function call and instead saw an expression.
(2735:127) Expected an assignment or function call and instead saw an expression.
(2744:74) Expected an assignment or function call and instead saw an expression.
[14:29:12] Finished 'lint' after 1.33 s
[BS] 1 file changed (foundation.js)
[14:29:20] Finished 'javascript' after 9.51 s

[jameslanman]

It might be of interest to note that the newest version of fullPage.js released 4 days ago causes the following major errors to occur but the previous release builds but stops watching...

`[14:41:04] gulp-notify: [Gulp notification] jquery.fullPage.js (8 errors)
(5:1) Expected an identifier and instead saw '<'.
(5:2) Expected an operator and instead saw '!'.
(5:2) Expected an assignment or function call and instead saw an expression.
(5:3) Missing semicolon.
(5:3) Expected an assignment or function call and instead saw an expression.
(5:10) Missing semicolon.
(6:1) Expected an identifier and instead saw '<'.
(6:1) Unrecoverable syntax error. (0% scanned).
[14:41:04] Finished 'sass' after 3.87 s
[14:41:04] Finished 'lint' after 2.91 s

events.js:160
throw er; // Unhandled 'error' event
^
SyntaxError: /Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/assets/javascript/custom/jquery.fullPage.js: Unexpected token (5:0)
3 |
4 |

5 |
| ^
6 |
7 |
8 |
at Parser.pp.raise (/Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:22:13)
at Parser.pp.unexpected (/Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:89:8)
at Parser.pp.parseExprAtom (/Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:517:12)
at Parser.pp.parseExprSubscripts (/Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:272:19)
at Parser.pp.parseMaybeUnary (/Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:252:19)
at Parser.pp.parseExprOps (/Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:183:19)
at Parser.pp.parseMaybeConditional (/Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:165:19)
at Parser.pp.parseMaybeAssign (/Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:128:19)
at Parser.pp.parseExpression (/Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:92:19)
at Parser.pp.parseStatement (/Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:163:19)

npm ERR! Darwin 14.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.2.1
npm ERR! npm v3.9.5
npm ERR! code ELIFECYCLE
npm ERR! foundationpress@2.6.2 build: gulp build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the foundationpress@2.6.2 build script 'gulp build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the foundationpress package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! gulp build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs foundationpress
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls foundationpress
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/npm-debug.log
`

[colin-marshall]

Not sure what's going on here. Looks like it's babel related. Maybe for now you could try moving the script up one directory to assets/javascript and enqueue it in library/enqueue-scripts.php as a temporary workaround.

Something odd about the error is that it says:

SyntaxError: /Applications/MAMP/htdocs/MWarchitects/wordpress/wp-content/themes/FoundationPress/assets/javascript/custom/jquery.fullPage.js: Unexpected token (5:0)
3 | 
4 |

5 | <!DOCTYPE html>

Line 5 does not say <!DOCTYPE html> and the word doctype is nowhere to be found in jquery.fullPage.js. Weird.

[jameslanman]

@colin-marshall Thanks for responding my friend, I massively appreciate you taking the time. I'm pretty new to developing with NPM so this is a bit over my head but I'm doing my damnedest to learn. Glad to hear this wasn't just my ignorance and that there is something odd here. Since the old version is working for now despite stopping NPM from watching every time I build I might hold off on the workaround until I learn more... cheers.

[colin-marshall]

@jameslanman I am not sure why I didn't think of this the first time, but this is the much better way of including 3rd party JS scripts. Most of them you should be able to install via bower. From your theme's directory, run the following command:

bower install fullpage.js --save-dev

Then, in gulpfile.js add Full Page JS below Motion UI in the paths array like this:

    // Motion UI 
    'assets/components/motion-ui/motion-ui.js',

    // Full Page JS
    'assets/components/fullpage.js/dist/jquery.fullpage.js',

The only other thing you need to do is include the CSS. I tested by running gulp and gulp --production and got no errors. Let me know if that works better for you.

[jameslanman]

@colin-marshall Finally had time to test this but with NPM instead of bower - turns out it was the same process but ended up in a different folder (node_modules) and it works like a dream! thank you for teaching me how to do this. I can't tell you how much I appreciate it!