I'm stumped. I'm working on building an Adobe Illustrator panel (based on Adobe CEP) and I cannot figure out why I'm getting an uncaught reference error: $ is not defined. I have my jQuery script linked before my .js file. To my knowledge, I need to use a local copy of jQuery so that it can be bundled with the other files to be deployed as an extension.

Here is an excerpt of my index.html and panel.js files:

I have my script links at the footer of my html (no script is being called within the HTML).

</div>
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/js/CSInterface.js"></script>
    <script src="assets/js/panel.js"></script>
</body>

</html>

// panel.js
var csi = new CSInterface();  // Adobe CEP

$(btnAddRegistration).on("click", function (e) { // Errors here
// more code here
}

Console: Uncaught ReferenceError: $ is not defined (panel.js:10) (It says line 10 because there are additional lines of comments at the top of the document).

I appreciate any advice or help figuring this one out. Thank you for your time!

I've tried moving my jQuery code into a document ready and window onl oad block, but no luck.

"window.onload = function() {
 //code here
};

$(document).ready(function () {
  //your code here
});

I re-downloaded my jquery.min.js file to make sure it wasn't corrupted. I've also tried moving the script src to the header section of my HTML and no change.

CodePudding user response：

I searched through the Adobe CEP documentation and adding the line below above my scripts fixed the issue.

<script>if (typeof module === 'object') { window.module = module; module = undefined; }</script>
<script>if (typeof exports === 'object') { window.exports = exports; exports = undefined; }</script>

Excerpt from the documentation:

JQuery startup code

if ( typeof module === "object" && typeof module.exports === "object" ) {
    // set jQuery in `module`
} else {
   // set jQuery in `window`
}

When this code is executed in CEP's browser with nodejs enabled, it will make JQuery to load in module context instead of Browser context. This would cause issues to extension's startup. Please use below code to handle such scenarios:

global symbols handling

<!-- Insert this line above script imports -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
<script>if (typeof exports === 'object') {window.exports = exports; exports = undefined;}</script>
<!-- extension's imports -->
<script src="scripts/jquery.min.js"></script>
<script src="scripts/csinterface.js"></script>
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>
<script>if (window.exports) exports = window.exports;</script>

If you are not using "module" and "exports" in the extension, you could skip last 2 lines of above code. This logic is similar to how users handled nodejs's require while importing. If you are handling require already, you should continue to handle same way.

CodePudding user response：

You have to actually assign $ to the variable jQuery. Try to wrap your entire code in the following IIFE:

( function( $ ) {

  // all your code here:
  // panel.js 
  var csi = new CSInterface();   // Adobe CEP
  $(btnAddRegistration).on("click", function (e) { }
  // end of your code
} )( jQuery );

Purpose of this anonymous closure:

1. map $ to jQuery
2. Variables and methods declared inside this function will not be visible outside of it.

What is an IIFE: https://developer.mozilla.org/en-US/docs/Glossary/IIFE