title: Why does part of my javascript code isn't runnig correctly?
body: <p>So when I press start button I get this output</p>
  <blockquote>
  <p>Init1</p>
  </blockquote>
  <p>and this error</p>
  <blockquote>
  <p>Source map error: Error: Invalid URL: webpack://Packs.[name]/webpack/bootstrap
  Resource URL: <a href="http://0.0.0.0:3000/packs/js/application-50e3aceac3d862ba8b6d.js" rel="nofollow noreferrer">http://0.0.0.0:3000/packs/js/application-50e3aceac3d862ba8b6d.js</a>
  Source Map URL: application-50e3aceac3d862ba8b6d.js.map</p>
  </blockquote>
  <p>Even according my code I have to get <code>&quot;Init2&quot;</code> and <code>&quot;Init3&quot;</code> too.</p>
  <p>my <code>games.html.haml</code> view file:</p>
  <pre><code>%h1 Catcher game
  %p Catch bloks which are failling
  %canvas#main_canvas
  =button_tag &quot;Start!&quot;, class: 'start_button', onclick: 'Packs.application.start'
  </code></pre>
  <p>my <code>start()</code> and <code>init()</code> functions in <code>chatcher.js</code> file:</p>
  <pre><code>function start() {
      console.log(&quot;Init3&quot;)
      var eater = new BigBlock(20, &quot;pink&quot;);
      var smallBlocks = [];
      setInterval(function() { game(eater, smallBlocks); }, 1000/16);
      addEventListener(&quot;keydown&quot;, function(key) { eater.move(key) } ); 
  }
  
  
  
  window.init = function() {
      console.log(&quot;init2&quot;)
      var canvas = document.getElementById(&quot;main_canvas&quot;);
      var ctx = canvas.getContext(&quot;2d&quot;);
  }
  </code></pre>
  <p>my <code>application.js</code> file</p>
  <pre><code>require(&quot;@rails/ujs&quot;).start()
  require(&quot;turbolinks&quot;).start()
  require(&quot;@rails/activestorage&quot;).start()
  require(&quot;channels&quot;)
  require(&quot;jquery&quot;)
  
  export * from '../packs/games/chatcher'
  
  $(document).ready(function() {
      console.log(&quot;init1&quot;)
      window.init;
  })
  </code></pre>
  <p>and lastly my <code>config/webpack/environment.js</code></p>
  <pre><code>const { environment } = require('@rails/webpacker')
  
  var webpack = require('webpack');
  environment.plugins.append(
    'Provide',
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery/src/jquery'
    })
  )
  
  module.exports = environment
  environment.config.merge({
    output: {
      library: ['Packs', '[name]'],
      libraryTarget: 'var'
    },
  })
  </code></pre>
  <p>Thank you for helping. Have a nice day.</p>