通过npm下载jQuery UI后出现jQuery未定义错误，Datepicker无法使用求助

Hey there, let's fix that error you're hitting with jQuery UI's Datepicker. This is a super common issue, and it all comes down to one key point: jQuery UI depends entirely on jQuery, so jQuery has to be loaded and available before any jQuery UI components run.

Here's how to get this sorted step by step:

• First, make sure jQuery is installed
  Double-check if jQuery is in your project's dependencies. If not, install it via npm:

  npm install jquery
  

• Fix your import order (critical!)
  In your entry file (looks like it-spa.js in your error log), you must import jQuery first, then jQuery UI's Datepicker. Even better, expose jQuery to the global window object—this helps tools like Parcel recognize it for jQuery UI's modules that expect a global jQuery or $ variable. Example code:

  // Import jQuery first
  import $ from 'jquery';
  // Attach to window so jQuery UI can find it
  window.jQuery = $;
  window.$ = $;
  
  // Now import jQuery UI Datepicker and its styles
  import 'jquery-ui/ui/widgets/datepicker';
  import 'jquery-ui/themes/base/datepicker.css';
  

• Check your bundler config (if using Parcel)
  Parcel usually handles dependencies well, but if you still run into issues, you can explicitly map jQuery as a global in your project's package.json:

  {
    "globals": {
      "jquery": "$"
    }
  }
  

• Verify your Datepicker initialization
  Make sure you're initializing the Datepicker only after the DOM is fully loaded. Use either:

  // jQuery's ready method
  $(document).ready(function() {
    $("#your-datepicker-element").datepicker();
  });
  

  Or the modern DOM event listener:

  document.addEventListener('DOMContentLoaded', function() {
    $("#your-datepicker-element").datepicker();
  });
  

A few quick pitfalls to avoid:

• Don't import jQuery UI components before jQuery—this is the #1 cause of this error
• Avoid installing multiple versions of jQuery, as this can cause conflicts
• If you ever switch to CDN links instead of npm, make sure the jQuery <script> tag comes before the jQuery UI one

内容的提问来源于stack exchange，提问作者ninde22