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 5 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 4 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 4 months ago

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

Kyle De Sousa 4 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 4 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 4 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 4 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

 

Steve Winnington about 1 month ago

Hi Guys 

I think that you need to add the Jquery import to the custom files as it is using the webpacks with Babel.  

 

Add this to the top of your custom.js and recompile.

import $ from 'jquery';

your query will then load as it is imported into the file scope.

 

 

Adam009 18 days ago

Successful men and women who know what they want. They’re driven, 

and enjoy attractive company by their side. Money isn’t an issue, 

thus they are generous when it comes to supporting a Sugar daddy.

http://findsugardaddy.info