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:
app/javascript/application.js
to app/javascript/application2.js
. This works on local but fails when I push to heroku.application.js
and application.js.map
in app/assets/builds/*
and only kept the app/assets/builds/.keep
file.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.