4

Rails version: 7.0.3.1

Ruby version: 3.1.0p0

React version: 18.2.0

I'm trying to add React to my existing rails app and followed the tutorial here - https://medium.com/rd-shipit/how-to-set-up-a-rails-7-project-with-react-and-jest-f2e016bfbdf3 Since I already had an existing rails app, I installed esbuild using the instructions here - https://github.com/rails/jsbundling-rails

Run ./bin/bundle add jsbundling-rails
Run ./bin/rails javascript:install:[esbuild|rollup|webpack]

However, when I try to run the app locally, it fails with

$ esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets
remote:
remote:          app/assets/builds/application.js      1014.9kb
remote:          app/assets/builds/application.js.map     1.6mb
remote:
remote:        Done in 0.17s.
remote:        W, [2022-08-30T02:32:56.872963 #271]  WARN -- : Removed sourceMappingURL comment for missing asset 'assets/application.js.map' from /tmp/build_54e3859f/app/assets/builds/application.js
remote:        rake aborted!
remote:        Sprockets::DoubleLinkError: Multiple files with the same output path cannot be linked ("application.js")
remote:        In "/tmp/build_54e3859f/app/assets/config/manifest.js" these files were linked:
remote:          - /tmp/build_54e3859f/app/javascript/application.js
remote:          - /tmp/build_54e3859f/app/assets/builds/application.js

I'm very new to the whole frontend work and have never worked before on frontend. I'm just learning all this firehose of information so I'm quite stuck here as I've tried multiple things without any success. And quite honestly, I don't understand a bunch of this stuff. The things I've tried are:

  • Renamed app/javascript/application.js to app/javascript/application2.js. This works on local but fails when I push to heroku.
  • Deleted application.js and application.js.map in app/assets/builds/* and only kept the app/assets/builds/.keep file.
  • Tried running the commands here - How to resolve Sprockets::DoubleLinkError application.css

app/javascript/application.js:

// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
// import "@hotwired/turbo-rails"
// import "controllers"
import "./react/src/index.js"

I tried uncommenting import "@hotwired/turbo-rails" and import "controllers" but that just gives different errors.

I'm out of ideas to try at this point. What am I missing here? Thank you!

1 Answer 1

10

Only thing I see is that you are using Javascript from 2 places: app/javascript/applications.js and app/assets/javascript/application.js

The good way is as you did from app/javascript/application.js (don't comment out @hotwired and Stimulus Controllers, it is not where the problem is comming from)

Basically with the new way to handle Javascript with JSBundling, the application.js file in app/javascript/ will be bundled into builds folder. Then grabbed by Sprockets to be fingerprinted and compressed.

Sprockets will also compress and fingerprint everything from the app/assets/javascript folder and then you end up having two files named the same.

If you have no app/assets/javascript folder then there may be a problem with your app/assets/config/manifest.js file. You probably try to pass to sprockets both the app/assets/builds folder AND the app/javascript folder. Then you end up adding to your app, both the bundled and unbundled file.

5
  • 2
    Thank you! It was definitely an issue with my app/assets/config/manifest.js file like you said. It was also checking the app/assets/builds/ directory there, leading to the conflict.
    – Posiedon
    Commented Aug 31, 2022 at 12:58
  • 1
    Great. Though it is the builds folder that holds the bundled files and should be referenced in manifest. Everything in app/javascript is rather source files than need be dealt by the bundler.
    – Maxence
    Commented Aug 31, 2022 at 19:33
  • 2
    Just to make this obvious for other new people like me, I removed //= link_tree ../builds from app/asses/config/manifest.js and this fixed my problem. Thank you!
    – PBukuras
    Commented Nov 18, 2022 at 21:18
  • I'm curious, what's the implication for removing the app/assets/builds links? Is it related to dev or prod environments? Commented Jul 25, 2023 at 13:27
  • 3
    I think you should rather delete the //= link_tree ../../javascript .js part, as you want to have the application.js from the build folder rather. I did this, and everything is perfect
    – Howard
    Commented Aug 25, 2023 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.