0

Despite dozens of questions regarding using jquery with webpack, I can't figure out how to include JS file that depends on jquery and achieve the same effect as a script tag. Every approach mentioned on github or Stack Overflow are not explained in details and none have worked for me. In addition, I don't have experience with webpack.

I found those questions that sound close enough to mine but they do not answer this question specifically: question & another question & another. Those questions do not provide steps for achieving this result.

Overview: I'm using this template. I have replaced the nav-html file with code that requires a (non-module) JS file. The code in the file does not export anything and it should run globally.

See this commit for the base template before any changes.

Approach 1: Included the js file in the vendor array in the webpack.config.vendor.js, check this commit

Result 1: I can see the code in the vendor.js but when I put a breakpoint on chrome dev tools the code is not hit

Approach 2: Added require for the js file inside the boot.ts. Note that it is not a module. Check this commit.

Result 2: Uncaught ReferenceError: $ is not defined

Approach 3: Used Script loader. Check this commit.

Result 3: Uncaught ReferenceError: $ is not defined

Ahmed Mansour
  • 435
  • 5
  • 11
  • So why don't you want to include jQuery using a script tag? – Chris G Jun 21 '17 at 07:30
  • @ChrisG jquery is already included in the vendor.js why include it again? The way I see it, it's either I use webpack to bundle together libraries and dependencies or use script tags all the way. – Ahmed Mansour Jun 21 '17 at 14:03
  • When I added jQuery to my react app, I had to add `/* global $ */` after my import lines. – Chris G Jun 21 '17 at 15:28

1 Answers1

0

Sorry, I haven't looked at you code but hopefully this helps.

You can expose anything in a module to the global scope just by creating a global var within one of you modules.

import * as $ from 'JQuery';
window.$ = $;

This will allow your non-module code to reference the Jquery that was loaded as a module.

moefinley
  • 1,148
  • 1
  • 10
  • 23