CODEWITHSUNDEEP
javascriptruby-on-railsasset-pipeline
firewire167
firewire167

Reputation: 139

Problems with asset pipeline

I have had problems with the asset pipeline in all of my projects for just about forever and I am trying to figure out why

I have a very basic test javascript function to test it with

html

  <button onclick="myFunction()">Test</button>

javascript

    function myFunction() {
    alert("I am an alert box!");
}

If I put it in script tags in the view it works fine. If I put it in application.js it works fine, but as soon as I try to add my own file it doesn't work, the same is true with any plugins I try to put in vendors.

First I add it to the manifest

    //= require rails-ujs
//= require turbolinks
//= require home.js
//= require_tree .

Then I add the helper to my view

 <%= javascript_include_tag "home", "data-turbolinks-track" => true  %>

Then I precompile it and and restart the server

Rails.application.config.assets.precompile += %w( home.js )

And after all of that it still doesn't work. I have been trying to fix this on and off for days and nothing has worked so far, I really appreciate any help that I am given, thank you for the help.

Error I got from removing the helper for home and adding the helper for application.js to my view:

rails-ujs.self-661556f443fbae7f6cec8f2cd394aa5e8186cb3f96aded9628126d3484eaa71a.js?body=1:626 Uncaught Error: rails-ujs has already been loaded!
    at Object.Rails.start (rails-ujs.self-661556f443fbae7f6cec8f2cd394aa5e8186cb3f96aded9628126d3484eaa71a.js?body=1:626)
    at rails-ujs.self-661556f443fbae7f6cec8f2cd394aa5e8186cb3f96aded9628126d3484eaa71a.js?body=1:675
    at rails-ujs.self-661556f443fbae7f6cec8f2cd394aa5e8186cb3f96aded9628126d3484eaa71a.js?body=1:678
    at rails-ujs.self-661556f443fbae7f6cec8f2cd394aa5e8186cb3f96aded9628126d3484eaa71a.js?body=1:679
    at rails-ujs.self-661556f443fbae7f6cec8f2cd394aa5e8186cb3f96aded9628126d3484eaa71a.js?body=1:686

My layout/application.html.erb file

<html>
  <head>
    <title>PipelinePractice</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

What gets rendered to the view:

   <!DOCTYPE html>
<html>
  <head>
    <title>PipelinePractice</title>
    <meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="gcKJ/jjUrQd6pLwmYwjTn7N25/tTCUu43iKak+/uUgU06n0tBU7v7U58+cCMB/bXVI3K92d5Ii0A2dBCaJfTeg==" />

    <link rel="stylesheet" media="all" href="/assets/home.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
<link rel="stylesheet" media="all" href="/assets/application.self-f0d704deea029cf000697e2c0181ec173a1b474645466ed843eb5ee7bb215794.css?body=1" data-turbolinks-track="reload" />
    <script src="/assets/rails-ujs.self-661556f443fbae7f6cec8f2cd394aa5e8186cb3f96aded9628126d3484eaa71a.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/action_cable.self-be3674a79bb9d13d41d259b2c17fad23aef20946dab3603b9d02374ea795005f.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script>
<script src="/assets/application.self-66347cf0a4cb1f26f76868b4697a9eee457c8c3a6da80c6fdd76ff77e911715e.js?body=1" data-turbolinks-track="reload"></script>
  </head>

  <body>
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="/assets/home.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="true"></script>
</head>
<body>
  <h2>JavaScript Alert</h2>

  <button onclick="myFunction()">Try it</button>


  <script>

</script>
</body>
</html>

  </body>
</html>

Upvotes: 0

Views: 533

Answers (1)

IMM
IMM

Reputation: 11

I have just had a similar problem. In my case there was an additional file called home.coffee in the folder app/assets/javascripts which prevented the home.js "to be seen" by rails. If I renamed the file home.js to test.js (without a test.coffee being present) or deleted the file home.coffee everything worked as expected.

Upvotes: 1

Related Questions