title: How to properly load jQuery alongside Stimulus in Rails 7
body: <p>I am learning Rails 7 with the new default <strong>Importmap jsmp</strong> syntax.  I have tried to follow what few tutorials are out there, but am still unable to get either jQuery or Stimulus to respond to a simple <code>alert</code> function on page load.</p>
  <p>I started over with a bare-bones Rails 7 application, ran <code>bundle install</code>, followed by <code>rails turbo:install</code>, <code>rails stimulus:install</code> and created a Static controller to route to a Landing page at <code>Static#Landing</code>.</p>
  <p>My `landing.html.erb' file contains:</p>
  <pre><code>&lt;h2&gt;Landing&lt;/h2&gt;
  &lt;p&gt;
    &lt;script&gt;
      document.write(&quot;Vanilla JS is working...&quot;);
    &lt;/script&gt;
  &lt;/p&gt;
  </code></pre>
  <p>I get the expected string output, so I know Javascript is enabled in the Browser.</p>
  <p>My <code>importmap.rb</code> file contains:</p>
  <pre><code># Pin npm packages by running ./bin/importmap
  pin &quot;application&quot;, preload: true
  pin &quot;@hotwired/turbo-rails&quot;, to: &quot;turbo.min.js&quot;, preload: true
  pin &quot;@hotwired/stimulus&quot;, to: &quot;stimulus.min.js&quot;, preload: true
  pin &quot;@hotwired/stimulus-loading&quot;, to: &quot;stimulus-loading.js&quot;, preload: true
  
  pin &quot;jquery&quot;, to: &quot;library/jquery.js&quot;  #&quot;https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js&quot;
  pin &quot;jquery-ui-dist&quot;, to: &quot;library/jquery.js&quot;  #&quot;https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js&quot;
  pin &quot;jqtree&quot;, to: &quot;https://ga.jspm.io/npm:jqtree@1.6.2/lib/tree.jquery.js&quot;
  
  pin_all_from &quot;app/javascript/controllers&quot;, under: &quot;controllers&quot;
  </code></pre>
  <p>The only lines I added were the 3 invoking a form of jQuery.</p>
  <p>I next added the 3 <code>import</code> statements for jQuery, jQuery-ui-dist, and jqtree to the <code>application.js</code> file.  The complete file contains:</p>
  <pre><code>// Javascript document
  // Document Name: application.js
  // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
  
  import &quot;@hotwired/turbo-rails&quot;
  import &quot;jQuery&quot;
  import &quot;jquery-ui-dist&quot;
  import &quot;jqtree&quot;
  
  import &quot;controllers&quot;
  
  
  // Configure Stimulus development experience
  application.debug = false
  window.Stimulus   = application
  
  // NOTE: make jquery global
  window.$ = window.jQuery = jQuery;
  $(function(){
    window.alert(&quot;It looks like jQuery is too.&quot;);
  });
  
  export { application }
  </code></pre>
  <p>I next edited my <code>app/assets/config/manifest.js</code> file to include the following:</p>
  <pre><code>//= link_tree ../images
  //= link_tree ../icons
  //= link_directory ../stylesheets .css
  //= link_tree ../../javascript .js
  //= link_tree ../../javascript/library .js
  //= link_tree ../../../vendor/javascript .js
  </code></pre>
  <p>However, even though inline <code>&lt;script&gt;</code>s work as outlined above, I get no response from either jQuery or Stimulus to the <code>alert</code> function in <code>application.js</code>.  When I check my source code, I see the following:</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Testingjquery&lt;/title&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;
      &lt;meta name=&quot;csrf-param&quot; content=&quot;authenticity_token&quot; /&gt;
  &lt;meta name=&quot;csrf-token&quot; content=&quot;LkQZA1mB-KU38K8S1lg_BMJWPx4HLonSyQ0s8W2vCotmw3aHIXZNDnPcJCtbgeXSTWrEuWJBZWlkOZcLe7Ru9w&quot; /&gt;
      
  
      &lt;link rel=&quot;stylesheet&quot; href=&quot;/assets/application-e0cf9d8fcb18bf7f909d8d91a5e78499f82ac29523d475bf3a9ab265d5e2b451.css&quot; data-turbo-track=&quot;reload&quot; /&gt;
      &lt;script type=&quot;importmap&quot; data-turbo-track=&quot;reload&quot;&gt;{
    &quot;imports&quot;: {
      &quot;application&quot;: &quot;/assets/application-79a33b4392f09ada2a09f9c0b7de4d6479378090d98fa671caaef897dcec0de9.js&quot;,
      &quot;@hotwired/turbo-rails&quot;: &quot;/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js&quot;,
      &quot;@hotwired/stimulus&quot;: &quot;/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js&quot;,
      &quot;@hotwired/stimulus-loading&quot;: &quot;/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js&quot;,
      &quot;jquery&quot;: &quot;/assets/library/jquery-58fa327d47526faff06ea7057a0022e9c42b2ca3a9aeea413f0e18176a63cd9f.js&quot;,
      &quot;jquery-ui-dist&quot;: &quot;/assets/library/jquery-58fa327d47526faff06ea7057a0022e9c42b2ca3a9aeea413f0e18176a63cd9f.js&quot;,
      &quot;jqtree&quot;: &quot;https://ga.jspm.io/npm:jqtree@1.6.2/lib/tree.jquery.js&quot;,
      &quot;controllers/application&quot;: &quot;/assets/controllers/application-368d98631bccbf2349e0d4f8269afb3fe9625118341966de054759d96ea86c7e.js&quot;,
      &quot;controllers/hello_controller&quot;: &quot;/assets/controllers/hello_controller-549135e8e7c683a538c3d6d517339ba470fcfb79d62f738a0a089ba41851a554.js&quot;,
      &quot;controllers&quot;: &quot;/assets/controllers/index-2db729dddcc5b979110e98de4b6720f83f91a123172e87281d5a58410fc43806.js&quot;
    }
  }&lt;/script&gt;
  &lt;link rel=&quot;modulepreload&quot; href=&quot;/assets/application-79a33b4392f09ada2a09f9c0b7de4d6479378090d98fa671caaef897dcec0de9.js&quot;&gt;
  &lt;link rel=&quot;modulepreload&quot; href=&quot;/assets/turbo.min-e5023178542f05fc063cd1dc5865457259cc01f3fba76a28454060d33de6f429.js&quot;&gt;
  &lt;link rel=&quot;modulepreload&quot; href=&quot;/assets/stimulus.min-b8a9738499c7a8362910cd545375417370d72a9776fb4e766df7671484e2beb7.js&quot;&gt;
  &lt;link rel=&quot;modulepreload&quot; href=&quot;/assets/stimulus-loading-1fc59770fb1654500044afd3f5f6d7d00800e5be36746d55b94a2963a7a228aa.js&quot;&gt;
  &lt;script src=&quot;/assets/es-module-shims.min-d89e73202ec09dede55fb74115af9c5f9f2bb965433de1c2446e1faa6dac2470.js&quot; async=&quot;async&quot; data-turbo-track=&quot;reload&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;module&quot;&gt;import &quot;application&quot;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;h2&gt;Landing&lt;/h2&gt;
  &lt;p&gt;
    &lt;script&gt;
      document.write(&quot;Vanilla JS is working...&quot;);
    &lt;/script&gt;
  &lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>As you can see, jQuery is not being loaded at all and Stimulus is being loaded, but is unresponsive to any code references.  I am new to Stimulus, intermediate with Javascript/jQuery and new to Rails 7.  From what I have read, I like the conceptualization behind these radical shifts in Rails methodology, but so far, haven't been able to get it to work.</p>
  <p>The files are all in their appropriate places according to the references to them.  For illustration, this is my file tree:</p>
  <pre><code>-app
    -assets
      -config
        -manifest.js
    -javascript
      -controllers
        -application.js
        ...
      -library
        -jquery.js
        -jquery-ui.js
      -application.js
  ...
  -config
    -importmap.js
    ...
  </code></pre>
  <p>The final <code>application.js</code> file contains no code that I changed and is as follows:</p>
  <pre><code>import { Application } from &quot;@hotwired/stimulus&quot;
  
  const application = Application.start()
  
  // Configure Stimulus development experience
  application.debug = false
  window.Stimulus   = application
  
  // NOTE: make jquery global
  window.$ = window.jQuery = jQuery;
  
  export { application }
  </code></pre>
  <p>Granted, there are two <code>application.js</code> files that Importmaps/Stimulus/Turbo seem to rely upon, and perhaps I inserted some code into the wrong <code>application.js</code> file.  If so, it was because the tutorials that I was following didn't specify or clarify which file to insert certain code into.</p>
  <p>Does anyone see a fundamental error in my code or can suggest another approach?  Thanks in advance.</p>