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 over 1 year ago

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

Matthew Andrianakos over 1 year 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 over 1 year 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.

Petr Ogurcak over 1 year ago

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

Rafi Benkual over 1 year 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 over 1 year 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 9 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?

Dwyane Hudson 2 months ago

One of the biggest changes from a development perspective, in my opinion, is that the new JavaScript configuration uses a module based architecture. Includes for js in previous versions of Foundation were defined in config.yml. Gulp would then combine and minified the files on builds. Now js libraries are included in your projects primary js file using Webpack's import syntax and bundled. 

photo enhancer online

Himanshu 2 months ago

I think you can get the best solutions from Zurb support centre!

Aravind K about 2 months ago

Can anyone suggest me one website where I can solve all my problems with javascript and I need to make many changes in my website?  My website villa projects in Kottayam and its mobile app has many problems.