Problems with asset pipeline

Question

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>

When you say ‘manifest’, is that application.js? If so, I don't think you'll need to add a javascript_include_tag for "home", that code will be included in application.js. Do you have a javascript_include_tag for "application" i.e. ` <%= javascript_include_tag "application" %>`. If so, can you see that in the code of the rendered view in the browser? — maxshelley
– maxshelley, Commented Aug 27, 2017 at 14:30
Can you post some of your view code and more information about the steps you've taken? You've added home.js to application.js but I think it should automatically be included by require_tree and not need to be precompiled individually. In development.rb what is config.assets.compile set to? Can you see anywhere that Rails UJS could be added twice? — maxshelley
– maxshelley, Commented Aug 27, 2017 at 16:07
Apologies, I wasn't clear enough. I meant the code in your application layout file that's being rendered in the view, i.e. all of your javascript_include_tag tags to check they aren't being rendered twice or anything like that. — maxshelley
– maxshelley, Commented Aug 27, 2017 at 16:22
You've got home.js appearing twice in the rendered code, you should no longer need the <%= javascript_include_tag "home", "data-turbolinks-track" => true %> in the view, nor should you need //= require home.js in the application.js as it will be added by require_tree . Once that's working and you can see only one instance of home.js in your rendered code (the one that's being added automatically by require_tree ., can you check that it contains your js function? — maxshelley
– maxshelley, Commented Aug 27, 2017 at 17:16
Hmm, I wonder if it's using an older version. You mentioned in you question you'd precompiled. Can you check there's nothing in public/assets. If there is, erase it and restart the server. You can remove that Rails.application.config.assets.precompile line you added too. Once that's done, try making a change to home.js and saving it, I'm wondering if it's cached it somehow. — maxshelley
– maxshelley, Commented Aug 27, 2017 at 17:46

IMM · Accepted Answer · 2019-09-30 03:34:57Z

1

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.

answered Sep 30, 2019 at 3:34

IMM

114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dpapadopoulos Over a year ago

This is like a bit of advice and not an answer. You can comment instead.

Collectives™ on Stack Overflow

Problems with asset pipeline

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related