Rails 5 trouble loading precompiled javascript assets

Question

I am fairly new to Rails and have encountered a problem that I can't understand. I'm trying to add the Trix editor to my application. I installed it with the gem and it worked fine...but only in development. In production it does not load the editor. I can also get it to fail in development if I change:

config.assets.debug = false

in development.rb

I have verified that the code is included in the precompiled .js file. It looks something like:

<script src="/assets/application-xyz" data-turbolinks-track="reload"></script>

The only way I am able to get it to work is by explicitly declaring the Trix CSS and JS file in the header:

<link rel="stylesheet" type="text/css" href="/assets/trix.css">
<script type="text/javascript" src="/assets/trix.js"></script>

I'm confused why that would even work because those files aren't even in the assets folder...perhaps they are automatically added by the gem? Anyway, it works even in production but it seems like a bad idea.

application.js:

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require trix
//= require_tree .

Is there any reason why it would appear in the precompiled js file yet not load properly? I'm not sure how to narrow down the source of the error. Is there any way to tell in developer tools whether it's being loaded or whether there is an error?

Thank you for investigating that. Not sure what I could have changed from default rails settings to affect the asset pipeline. I have made the repository public here. — jkmuller
– jkmuller, Commented Nov 30, 2016 at 23:14

Sebastián Palma · Accepted Answer · 2022-08-08 18:22:20Z

1

I realized that your problem is the way you're adding bootstrap to your project, in your assets/stylesheets you have both the unminified and the minified version of those two files, bootstrap.js and bootstrap.css and also you're adding them again to your project in both application.js and application.css files.

What I did was to remove all the css and javascript files that weren't being used, as the duplicated of bootstrap files and scaffold's autogenerated files, and also comment or delete the way you were adding Trix to the project, this way you also have a Trix call in your both application files.

# application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require trix
//= require_tree .

Note there's no Bootstrap call because they're already being loaded with require_tree

# application.scss
/*
*= require trix
*= require_self
*= require_tree .
*/

And also you have Trix added in your Gemfile, so you can call it making a require in your 'assets' application files.

edited Aug 8, 2022 at 18:22

answered Dec 1, 2016 at 2:14

Sebastián Palma

33.6k6 gold badges45 silver badges65 bronze badges

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

2 Comments

jkmuller Over a year ago

Thank you! That was really helpful for me to understand how the assets are added. I have it working on production now.

RajeshM Over a year ago

I had the exact same problem and the exact same behavior.. I too had //= require bootstrap-sprockets in my `application. When I removed that one line, it works now. But I don't understand how bootstrap interfered with trix.

Collectives™ on Stack Overflow

Rails 5 trouble loading precompiled javascript assets

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related