Foundation-sites: ZF 6.2.0 Babel Error / Menu Broken / Build Fails

[bahart]

Wisdom First:
Rock solid stability is the reason we are all focused on Foundations. On my end, we have extended the dev framework with highly crafted code and it has worked in a reliable and predictable manner. The leap from 5.5x to 6.xx has not been for the faint of heart. I believe now may be the precise time to rewind and recapture that stability using tight configuration management standards, while still being Agile and very cutting edge.

Inspiration: a designer, inventor and technologist familiar with ZF underlying technologies tells me: "while you scale seamlessly from mobile to 12K video wall, next generation computing incorporating IoT, M2M, advanced Cloud is well poised to render on top of a highly stable, advanced mathematical platform like ZF so we may build the future that is in R&D Labs across the globe".

--Barbara--

Dev Notes - Steps Taken to Configure ZF Sites 6.20 / Installation & Errors:

Step 1: Babel Modules
npm install babel-register babel-plugin-transform-es2015-arrow-functions babel-plugin-transform-es2015-block-scoped-functions babel-plugin-transform-es2015-block-scoping babel-plugin-transform-es2015-classes babel-plugin-transform-es2015-destructuring babel-plugin-transform-es2015-template-literals babel-plugin-transform-es2015-parameters babel-plugin-transform-es2015-shorthand-properties babel-plugin-transform-es2015-spread babel-plugin-transform-es2015-modules-commonjs

Step 2: Update package.json file with the following:

"babel-core": "^6.3.26",
"babel-eslint": "^5.0.0",
"babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
"babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
"babel-plugin-transform-es2015-block-scoping": "^6.4.0",
"babel-plugin-transform-es2015-classes": "^6.3.15",
"babel-plugin-transform-es2015-destructuring": "^6.3.15",
"babel-plugin-transform-es2015-parameters": "^6.3.26",
"babel-plugin-transform-es2015-shorthand-properties": "^6.5.0",
"babel-plugin-transform-es2015-spread": "^6.4.0",
"babel-plugin-transform-es2015-template-literals": "^6.3.13",

Step 3: Update .babelrc file:
{
"presets": ["es2015"]
}

Result from 'foundation watch' - error message:
[BABEL] Note: The code generator has deoptimised the styling of "D:/Sites/F_620a
/bower_components/jquery/dist/jquery.js" as it exceeds the max of "100KB".

note: same error message for other (well behaved) javascript integrated to extend the ZF dev foundation (ie: jwplayer, others...).

Step 4: Update .babelrc file eliminates error message, but...
{
"presets": ["es2015"],
"compact": true
}
Either Way - after foundation Watch or NPM Start:
Dropdown, drilldown, responsive menu and toggler fail to render sub-menus for dropdown and no menu items are displayed for drilldown.

Step 5: NMP Build fails with:
Reference error Can't find variable $ jquery
Reference error Can't find variable $
for every html file

Note 6: CSSNano, UnCSS:
CSSNano appears set to Safe (non aggressive process). Previous errors on menu and other items associated with UNCSS ( via Geoff Kimball). Turning off UNCSS (by B. Ahart Ref. #7435 ) verified root cause. Appears an old problem lingering is persistent in 6.20.

Note 7: Windows, Paths, Babel, Source Maps:
Another post for Windows users struggling may be appropriate - but keep in mind: some directories may be so deep they are not recognized by the OS. After moving or installing, component locations need to be redefined (ie: path, env variable and sometimes easier just to Set in in NPM).
For example, Python may need installation on Win, a path statement and a Set from NPM:
npm config set python d:\dev_tools\Python27\python.exe
As this is done with other components (ie: phantomjs, etc) the development environment starts to break down and has the potential to become unstable.

[agoradesign]

Using a different Babel preset worked for me regarding the JS errors mentioned in "Step 5", further information here: https://github.com/PolymerElements/polymer-starter-kit/issues/694

[mhair]

@bahart, can't agree with you more. As a previous user of Foundation 4/5, I have experienced extreme difficulties with Foundation 6. Too many to mention, but including every one you have mentioned. As a Windows user, I suspect others are also experience a very broken and confusing situation in use gulp/npm/bower/Python/Visual C++/libsass dependency stack. The Windows dependencies are broken, yet it is impossible to determine where. It has been enough to cause me to seriously consider moving to the Mac....except I can't at work. Too much expense and time. Not quite sure what I'm going to do. Had high hopes for 6.2. Nothing but further churn.

It is as if Zurb is not even testing on Windows and/or the majority of those using Windows don't even realize that their platform is likely a great cause of their difficulties. But that is certainly not the only reason for the difficulties. I'm finding this codebase is hurtling forward at supersonic speeds with the latest and greatest (ES2015/Babel) with no regard for stability or shoring up technical debt. I'm very cynical at this point.

[gakimball]

@mhair We hear your issues—know that we're working on it. We moved a little too fast the last three months, and our intent for the near future is to slow down and stabilize. You might have noticed that we've started writing visual regression tests as we address bugs. We've also published a full testing guide and started an initiative to build out a JavaScript test suite.

We also intend to soon bring in members of the community to be direct contributors to the codebase, help review pull requests, and so on. So we're gradually moving towards a system where decisions are made in a more deliberate manner, by a larger group of people. Foundation 6 was an aggressive reset to the structure of the codebase, with an eye towards making it more sustainable long-term. (You can see this in the CSS, where we cut the file size by almost two-thirds.) We're still committed to that, even though we've run into issues along the way.

I appreciate you voicing your concerns and frustrations—it means a lot. :)

[avasquez]

Feeling the same way as @mhair - I've done virtually all my site projects using F3,4,5... and have had nothing but great things to say about foundation - but now with v6 I spend about 5% of my time building the projects, and 95% of the time trying to figure out why none of my js works in production. I'm having a really hard time finding any GOOD help out there to fix any of the issues, and I don't know where to start. - So I try manual install, install via CLI, install via Yeti Launch, and every avenue has it's own issues that I just can't figure out.

Please help! I really don't want to shift all my workflow to a totally different framework. I absolutely love using foundation, and it just really puts a bad taste in your mouth with all the issues of v6.

[dherran]

All these issues would be solved by including individually transpiled JS components into the /dist folder. Currently, Zurb is compiling all components into a single JS file. Developers looking to use only a couple of those JS components have to resort to setup Babel, presets, etc and compile from source which is completely unnecessary.

Making it so...

/dist/foundation.abide.js
/dist/foundation.accordion.js
/dist/foundation.dropdown.js

etc.. would render Babel unnecessary for developers looking to pull and quickly mockup a project.

[kball]

The dist components have been separated out, and as far as I know we've resolved the babel issues, so I believe this is closeable, but please reopen if you're still seeing problems.