How to make jQuery globally accessible? #12324

I’m using foundation to build a site with the cms. I created a sites project with the ZURB template/stack. Because of the structure of the cms I moved my asset files other directories.
I’m failing to deal with the JS.

Foundation already imports jQuery. Therefore, there is no need, to add an additional <script src="...jqery.js"> import in the <head> or <body>. But if I omit the import I run into problems:

jQuery not globally accessible in inline script

I’m using a bit of html inline JS which relies on jQuery. It starts with:

jQuery(function() {

I thought this would work, because app.js includes

window.jQuery = $

But I get an reference error Uncaught ReferenceError: jQuery is not defined. Why is that?

jQuery not avaible in other files

Because of the structure of the cms I use app.js only as an entry point. From there I import another file, which, again, imports JS of some components I’m using (I’m probably overcomplicating things here, I know):


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

window.jQuery = $;
window.$ = $;

import './lib/foundation-explicit-pieces';


import '../../../../Fusion/Main';


import 'Components/CompA/component.js';
import 'Components/CompB/component.js';

Code in CompA and CompB relies on jQuery, too. app.js already imports jQuery, but the same reference error gets raised from these code snippets.

How do I resolve this? I tried to add a import $ from 'jquery'; in the component’s *.js files, but this breaks the build and gives me a Module not found error.

I guess it boils down to my lacking knowledge of JS and Modules/gulp, etc. I’d really appreciate if you could point me in the right direction. The structure of the project probably isn’t helping, too.