When creating a new project from scratch, browser errors with "foundation is not a function"

Question

After creating a brand new foundation 6 application with foundation new, building the application with foundation build, and loading the application in the web browser, I see the following error on the developer console:

Uncaught TypeError: o(...)(...).foundation is not a function
    at Module.<anonymous> (app.js:formatted:4175)
    at o (app.js:formatted:11)
    at Object.<anonymous> (app.js:formatted:4166)
    at o (app.js:formatted:11)
    at app.js:formatted:71
    at app.js:formatted:72

What gives? It seems like the minifier lost a reference to jquery, because this line seems to correlate to the only line in the generated app.js that calls the .foundation() function.

versions on windows. browser is a late chrome.

$ foundation -v; npm -v; node -v; webpack -v
Foundation CLI version 2.2.5
6.4.1
v8.11.1
4.26.1

Answer 1

tldr: use the Foundation variable, like this in app.js

import $ from 'jquery'
import whatInput from 'what-input'
window.$ = $
import Foundation from 'foundation-sites'
if (Foundation) {
  // if `Foundation` is left as an unused variable
  // webpack will exclude it from the build output;
  // therefore, any expression that uses it will work.
}
$(document).foundation()

for the curious

here's how i found the answer

find the right source map settings

it took some tweaking, but i found the right source map settings for devtool. change the webpackConfig to devtool: 'eval' in gulpfile.babel.js and build for production with $ gulp build --production or $ foundation build. you want the eval setting to be used in production.

inspect the source

the browser is still throwing exceptions on the undefined foundation, but this time you see who was supposed to define it.

marking up the code with comments after the call that brings in Foundation from "foundation-sites", and building that, then reloading the browser, here's the content of app.js after it's been minified and source mapped:

// app.js comment i added
...
import Foundation from 'foundation-sites' // here, right?
...


// app.js minified
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
/* harmony import */ var jquery__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(jquery__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var what_input__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(4);
/* harmony import */ var what_input__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(what_input__WEBPACK_IMPORTED_MODULE_1__);


window.$ = jquery__WEBPACK_IMPORTED_MODULE_0___default.a;
 // here, right?

jquery__WEBPACK_IMPORTED_MODULE_0___default()(document).foundation();

and now the error we get in the console is about that last line: Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_0___default(...)(...).foundation is not a function

that's crazy, where's Foundation?

i guess webpack will skip importing Foundation entirely, unless you actually use it in your entry-point code. after guessing that this was the case, i added console statement that printed the console.info(Foundation) and bingo. suddenly Foundation Sites imported.