Menu icon Foundation
How do I add more javascript files to my Foundation 6.4 zurb stack?

Hi,

I've just upgraded to 6.4. I can't seem to get additional javascript files to work. 

I've created a file main.js in assets/js

I've updated the entries in config.yml, but the main.js file won't get compiled into the app.js

This is an extract from the config.yml file. That #TODO might be the problem.

  # Paths to JavaScript libraries, which are combined into one file

  # TODO:  Rework this using webpack build. Right now just verifying the files are being built properly

  entries:

    - "src/assets/js/app.js"

    - "src/assets/js/main.js"

 

Any ideas? This new update is a huge paradigm shift for an incremental update and it's doing my head in. Halp!

 

javascript

Hi,

I've just upgraded to 6.4. I can't seem to get additional javascript files to work. 

I've created a file main.js in assets/js

I've updated the entries in config.yml, but the main.js file won't get compiled into the app.js

This is an extract from the config.yml file. That #TODO might be the problem.

  # Paths to JavaScript libraries, which are combined into one file

  # TODO:  Rework this using webpack build. Right now just verifying the files are being built properly

  entries:

    - "src/assets/js/app.js"

    - "src/assets/js/main.js"

 

Any ideas? This new update is a huge paradigm shift for an incremental update and it's doing my head in. Halp!

 

Rafi Benkual 10 months ago

Looks like there is an existing thread on this here: https://github.com/zurb/foundation-sites/issues/10353 that will help!

Matthew Andrianakos 10 months ago

Hi Rafi,

Thanks for the link, but I can't make heads or tails of it. 

My first experience with cli/gulp/node/bower/babel etc was when I installed Foundation 6.3 a couple of weeks ago. I'm kicking myself for developing the old way for as long as I did. I got my head around how that worked. But this new stack is a steeper learning curve for my technical level.

I've tried several methods for including my additional file - main.js. The closest I got to working was this:

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';

$(document).foundation();
import './main';

 

app.js compiles and includes the contents of main.js

//main.js

$(document).ready(function(){
	alert("Hello,world");
});

However, I get this error in the browser:

 

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:22256)
    at __webpack_require__ (app.js:20)
    at _typeof (app.js:66)
    at app.js:69

 

Additionally, if I leave the fresh build untouched (No main.js) and reference the following script as below:

<script src="{{root}}assets/js/app.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/v/zf/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/datatables.min.js"></script>

 

I get the following error:

Uncaught ReferenceError: jQuery is not defined
    at datatables.min.js:17
    at datatables.min.js:17

 

 

Any ideas?

 

Matthew Andrianakos 10 months ago

UPDATE:

Everything seems to work as it should if I add Jquery by link reference:

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous">
</script>
    
<script src="{{root}}assets/js/app.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/v/zf/dt-1.10.15/b-1.3.1/b-colvis-1.3.1/b-html5-1.3.1/b-print-1.3.1/cr-1.3.3/fc-3.2.2/fh-3.1.2/datatables.min.js"></script>

 

I suspect I shouldn't need to do this. Doesn't Jquery get packaged into app.js? Is something breaking the Jquery code in the compiled app.js?

 

FURTHER UPDATE - This doesn't work. It looks like Jquery is loaded twice. Everything breaks.

cs joshi 9 months ago

A calendar is a system of organising days for social, religious, commercial or administrative purposes. This is done by giving names to periods of time, typically days, weeks, months and years. A date is the designation of a single, specific day within such a system. A calendar is also a physical record (often paper) of such a system. A calendar can also mean a list of planned events, such as a court calendar or a partly or fully chronological list of documents, such as a calendar of wills.

Petr Ogurcak 8 months ago

I run into the same issues is there any documentation how javascripts and jquery should be added into foundation 6.4?

Rafi Benkual 8 months ago

There may be a more specific way to initialize for webpack - In less than 1 hour - Get answers to your questions on webpack and the ZURB Stack with @kball - https://www.crowdcast.io/e/foundation-open-chat-2

Kevin Ball 8 months ago

In case it helps, I just published a thorough walkthrough of the ZURB stack - check out the JavaScript portion and see if it makes it clearer: Front-end Development Kickstarter: All about the ZURB Template

 

Diwakar about 2 months ago

I was trying to install Zurb on my server through FTP but unable to log in after uploading it to the root folder. what should I do now? I changed HTTP to HTTPS- Kodi Add-ons 2018 <<< This blog. Can you help me, please?