Sprockets::DoubleLinkError - Multiple files with the same output path cannot be linked ("application.js")

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!

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.