Why do I have multiple <script> tags instead of one in a rails app?

Question

When I inspect my index page on chrome, the head tag has multiple tags:

<script src="/assets/components/questions/question_likes.self-6aaf2ce97062977185e0d5f9fc31643ca8fd012bfb53c12752977afdab1260be.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/components.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/moment.self-0da3eb4ebf8fb8c3113d89afb90e5b7a87760d21b5b39a405a51fe05c8e40fd8.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-fileupload/vendor/jquery.ui.widget.self-92c37a41e67e528eecf100716907331b4b9aa4f546bf75ef2e0529c8c03a562d.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-fileupload/jquery.iframe-transport.self-e461f7ff2a60ee89459106a6f3e349cf79b7f56066b3c8cbc73389b30e1eb592.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-fileupload/jquery.fileupload.self-79c952fc273d5a8955a6093f4f489dcd509c5a2cefb2b9a049d3cdb2710ec8d3.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-fileupload/basic.self-6a3cf5192354f71615ac51034b3e97c20eda99643fcaf5bbe6d41ad59bd12167.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/jquery-fileupload/vendor/tmpl.self-c2108a63ad9ae9ab4a723bcf0104f6a92a63eb917331ff69fad6f02fe7219488.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/s3_direct_upload.self-a71af1e40427c6623d982df253581eb58013b84d84f45bcef7d0352ad4e82534.js?body=1" data-turbolinks-track="true"></script>
<script src="/assets/application.self-c88a422e522d3887e663830741eb19213b74b0bcee8413fffde6decde58266aa.js?body=1" data-turbolinks-track="true"></script>

I thought rails concatenates all js files into one, why is this happening? I am using react, and no turbolinks.

Answer 1

When running in the production environment, Rails will create a single minified javascript file that you can reference using javascript_include_tag. However in the development and testing environments, all the JavasScript files will be included as you've shown for easier debugging.

You can read more about the Rails asset pipeline in development mode in the official guides.

In development mode, assets are served as separate files in the order they are specified in the manifest file.

This manifest app/assets/javascripts/application.js:

//= require core
//= require projects
//= require tickets

would generate this HTML:

<script src="/assets/core.js?body=1"></script>
<script src="/assets/projects.js?body=1"></script>
<script src="/assets/tickets.js?body=1"></script>

The guides also include a section discussing the config.assets.debug option, which was the issue in this case (thanks, @SergioTulentsev).