Menu icon Foundation
Foundation 6.4.1 - Add JS files

Hi all, 

Ive installed a clean version of 6.4.1 through the CLI.

On previous versions I would add a js file into the js folder and it would be compiled into app.js file, just as the foundation docs outline.  

I'm unfamiliar with webpack, but briefly looking I can add the file through "import './file-name.js'; within the app.js file.

But I am getting error.

 

How do I add a js file to 6.4.1?

 

Thanks

 

Uncaught ReferenceError: jQuery is not defined

    at Object.<anonymous> (app.js:22225)

    at __webpack_require__ (app.js:20)

    at Object.defineProperty.value (app.js:14483)

    at __webpack_require__ (app.js:20)

    at Object.<anonymous> (app.js:22363)

    at __webpack_require__ (app.js:20)

    at _typeof (app.js:66)

    at app.js:69

(anonymous) @ app.js:22225

__webpack_require__ @ app.js:20

Object.defineProperty.value @ app.js:14483

__webpack_require__ @ app.js:20

(anonymous) @ app.js:22363

__webpack_require__ @ app.js:20

_typeof @ app.js:66

(anonymous) @ app.js:69

 

js6.4.1

Hi all, 

Ive installed a clean version of 6.4.1 through the CLI.

On previous versions I would add a js file into the js folder and it would be compiled into app.js file, just as the foundation docs outline.  

I'm unfamiliar with webpack, but briefly looking I can add the file through "import './file-name.js'; within the app.js file.

But I am getting error.

 

How do I add a js file to 6.4.1?

 

Thanks

 

Uncaught ReferenceError: jQuery is not defined

    at Object.<anonymous> (app.js:22225)

    at __webpack_require__ (app.js:20)

    at Object.defineProperty.value (app.js:14483)

    at __webpack_require__ (app.js:20)

    at Object.<anonymous> (app.js:22363)

    at __webpack_require__ (app.js:20)

    at _typeof (app.js:66)

    at app.js:69

(anonymous) @ app.js:22225

__webpack_require__ @ app.js:20

Object.defineProperty.value @ app.js:14483

__webpack_require__ @ app.js:20

(anonymous) @ app.js:22363

__webpack_require__ @ app.js:20

_typeof @ app.js:66

(anonymous) @ app.js:69

 

Cédric 2 months ago

Up

... How to add a js file under 6.4.1 ?

I would like to add owl.carousel ... i've done it with 6.3.1 .. but I didn't success to do it under 6.4.1 :-(

 

thanks

 

Kyle De Sousa 2 months ago

Im also getting this error

 

app.js:22248 Uncaught ReferenceError: $ is not defined

    at Object.<anonymous> (app.js:22248)

    at __webpack_require__ (app.js:20)

    at Object.defineProperty.value (app.js:14485)

    at __webpack_require__ (app.js:20)

    at Object.<anonymous> (app.js:22290)

    at __webpack_require__ (app.js:20)

    at _typeof (app.js:66)

    at app.js:69

(anonymous) @ app.js:22248

__webpack_require__ @ app.js:20

Object.defineProperty.value @ app.js:14485

__webpack_require__ @ app.js:20

(anonymous) @ app.js:22290

__webpack_require__ @ app.js:20

_typeof @ app.js:66

(anonymous) @ app.js:69

Martin 2 months ago

I think this has something to do with JQuery not being loaded. 

Kyle De Sousa 2 months ago

But how do you get Jquery to be loaded, i thought its included in the Foundation already, maybe its due to the variable changing 

import $ from 'jquery';

import whatInput from 'what-input';

window.$ = $;

Martin 2 months ago

Im afraid I dont know.

I discovered that when I added a reference to JQuery within the html template that it solved the error. Just like you I assumed JQuery was included in foundation.js.

Can anyone else answer if JQuery is loaded in through webpack and how to check? 

 

M

Petr Ogurcak 2 months ago

I have the same issue.. 

- I installed for example nette.ajax.js via yarn

- added it to config.yml

  entries:
    - "node_modules/nette.ajax.js/nette.ajax.js"

- created assets/js/lib/dependencies.js

// custom dependencies
import nette_ajax from 'nette.ajax.js';

const deps = {

  nette_ajax: nette_ajax

};

module.exports = deps;

 

- added this piece of code to app.js

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

window.$ = $;

//import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
import './lib/foundation-explicit-pieces';

import libs from './lib/dependencies';

window.libs = libs;

$(document).foundation();

 

and I run into this issue

jQuery is missing, load it please

 

Why is it happening? What's wrong? Is there any tutorial how to do that?

 

Matteo Bagni about 2 months ago

You guys might want to try and do:

 

window.jQuery = $;

 

I think this will work with some plugins that use jQuery() instead of $()

If this is wrong please keep the thread going ;)

I hope some explanation/tutorial/doc will be up soon :P