title: Rails 6 application.js Functions Not Found
body: <p>I am just testing things out in a Rails 6 app and if I put a function in the app/javascript/packs/application.js file I get an Uncaught ReferenceError:  is not defined error.</p>
  
  <p>If I put the following code in my html.erb file:</p>
  
  <pre><code>&lt;%= button_tag "Test", class: 'btn btn-primary', onClick: 'test_func()' %&gt;
  ...
  &lt;script&gt;
    function test_func() {
      console.log("test works");
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>It works as it should.  But if I put the same code inside the app/javascript/packs/application.js file, then I get the uncaught reference error.  The function should be there because if I look through the packs/js/application*.js file I can find the following:</p>
  
  <pre><code>/***/ "./app/javascript/packs/application.js":
  /*!*********************************************!*\
    !*** ./app/javascript/packs/application.js ***!
    \*********************************************/
  /*! no static exports found */
  /***/ (function(module, exports, __webpack_require__) {
  
  // This file is automatically compiled by Webpack, along with any other files
  // present in this directory. You're encouraged to place your actual application logic in
  // a relevant structure within app/javascript and only use these pack files to reference
  // that code so it'll be compiled.
  __webpack_require__(/*! bootstrap/dist/js/bootstrap */ "./node_modules/bootstrap/dist/js/bootstrap.js");
  
  __webpack_require__(/*! @rails/ujs */ "./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js").start();
  
  __webpack_require__(/*! turbolinks */ "./node_modules/turbolinks/dist/turbolinks.js").start();
  
  __webpack_require__(/*! @rails/activestorage */ "./node_modules/@rails/activestorage/app/assets/javascripts/activestorage.js").start();
  
  __webpack_require__(/*! channels */ "./app/javascript/channels/index.js"); // Uncomment to copy all static images under ../images to the output folder and reference
  // them with the image_pack_tag helper in views (e.g &lt;%= image_pack_tag 'rails.png' %&gt;)
  // or the `imagePath` JavaScript helper below.
  //
  // const images = require.context('../images', true)
  // const imagePath = (name) =&gt; images(name, true)
  
  
  function test_func() {
    console.log("test works");
  }
  
  /***/ })
  </code></pre>
  
  <p>So I'm not sure what the problem could be.  Any help would be appreciated.  Thanks!</p>
  
  <p><strong>SOLUTION:</strong></p>
  
  <p>I figured out a workaround to solve this problem.  In the <code>app/javascriipts/packs/application.js</code> file, instead of declaring the function as:</p>
  
  <pre><code>function test_func() {
    console.log("test works");
  }
  </code></pre>
  
  <p>Declare the function like this:</p>
  
  <pre><code>window.test_func = function() {
    console.log("test works);
  }
  </code></pre>
  
  <p>And the function will now be globally available from the html.erb files.</p>