ruby on rails - Why does part of my javascript code isn't runnig correctly?

Question

So when I press start button I get this output

Init1

and this error

Source map error: Error: Invalid URL: webpack://Packs.[name]/webpack/bootstrap Resource URL: http://0.0.0.0:3000/packs/js/application-50e3aceac3d862ba8b6d.js Source Map URL: application-50e3aceac3d862ba8b6d.js.map

Even according my code I have to get "Init2" and "Init3" too.

my games.html.haml view file:

%h1 Catcher game
%p Catch bloks which are failling
%canvas#main_canvas
=button_tag "Start!", class: 'start_button', onclick: 'Packs.application.start'

my start() and init() functions in chatcher.js file:

function start() {
    console.log("Init3")
    var eater = new BigBlock(20, "pink");
    var smallBlocks = [];
    setInterval(function() { game(eater, smallBlocks); }, 1000/16);
    addEventListener("keydown", function(key) { eater.move(key) } ); 
}



window.init = function() {
    console.log("init2")
    var canvas = document.getElementById("main_canvas");
    var ctx = canvas.getContext("2d");
}

my application.js file

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

export * from '../packs/games/chatcher'

$(document).ready(function() {
    console.log("init1")
    window.init;
})

and lastly my config/webpack/environment.js

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'
  },
})

Thank you for helping. Have a nice day.

Answer 1

等待大神答复