Can't get Uppy to work with Rails 6.1 + Hotwire

Hello! I was able to get Shrine and Uppy working in an older Rails 6 app last year, no problem, but have hit a wall with Rails 6.1 using the Hotwire gem. I’ve followed the Direct S3 Uploads wiki step by step, and got S3 uploads working, but the next step of getting Uppy working is…not working.

My browser’s console keeps reporting this error:
“Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘#’” (along with a bunch of other info I’ll print below.

And on my Rails log, Webpacker reports lots of Uppy-related errors in various Node modules (I’ll list them below too).

I also notice that when I click the Delete button on any record in my app, I get its Show page, instead of a Javascript-enabled “Are you sure?” pop-up. That’s weird…

I’ve double-checked everything in my application.js file, and my fileUpload.js file, and my Shrine initializer, and they look fine (also listed below). I’ve also tried a stimulus controller instead of the Application.js code but same problem.

Any guidance much appreciated, thanks!

And here are the errors and code…

BROWSER ERROR
Uncaught TypeError: Cannot assign to read only property ‘exports’ of object ‘#’
at Module. (application-528c12914fc5a2fdd236.js:19883:16)
at Module…/node_modules/@uppy/core/lib/Uppy.js (application-528c12914fc5a2fdd236.js:19884:30)
at webpack_require (application-528c12914fc5a2fdd236.js:64:30)
at Object…/node_modules/@uppy/core/lib/index.js (application-528c12914fc5a2fdd236.js:19922:12)
at webpack_require (application-528c12914fc5a2fdd236.js:64:30)
at Module…/node_modules/uppy/index.mjs (application-528c12914fc5a2fdd236.js:62253:68)
at webpack_require (application-528c12914fc5a2fdd236.js:64:30)
at Module…/app/javascript/fileUpload.js (application-528c12914fc5a2fdd236.js:584:62)
at webpack_require (application-528c12914fc5a2fdd236.js:64:30)
at Module…/app/javascript/controllers/uppy_initializer_controller.js (application-528c12914fc5a2fdd236.js:518:68)

WEBPACK ERRORS (these list many Node modules, Im just including a couple)
Webpacker] Compilation failed:
Hash: 7f93cab49183d29151d2
Version: webpack 4.46.0
Time: 13579ms
Built at: 01/14/2022 12:51:17 PM
Asset Size Chunks Chunk Names
js/application-cff17e2a21a8cde915f0.js 7.55 MiB application [emitted] [immutable] application
js/application-cff17e2a21a8cde915f0.js.map 8.02 MiB application [emitted] [dev] application
js/vendors~actioncable-a9a439982dea30932847.chunk.js 35.5 KiB vendors~actioncable [emitted] [immutable] vendors~actioncable
js/vendors~actioncable-a9a439982dea30932847.chunk.js.map 32 KiB vendors~actioncable [emitted] [dev] vendors~actioncable
manifest.json 554 bytes [emitted]
Entrypoint application = js/application-cff17e2a21a8cde915f0.js js/application-cff17e2a21a8cde915f0.js.map
[./app/javascript/channels sync recursive _channel.js$] ./app/javascript/channels sync _channel.js$ 160 bytes {application} [built]
[./app/javascript/channels/index.js] 211 bytes {application} [built]
[./app/javascript/controllers sync recursive _controller.(js|ts)$] ./app/javascript/controllers sync _controller.(js|ts)$ 262 bytes {application} [built]
[./app/javascript/controllers/dynamic_select_controller.js] 3.36 KiB {application} [optional] [built]
[./app/javascript/controllers/extended_modal_controller.js] 4.05 KiB {application} [optional] [built]
[./app/javascript/controllers/index.js] 520 bytes {application} [built]
[./app/javascript/controllers/nested_form_controller.js] 3.57 KiB {application} [optional] [built]
[./app/javascript/fileUpload.js] 1.47 KiB {application} [built]
[./app/javascript/packs/application.js] 731 bytes {application} [built]
[./app/javascript/stylesheets/application.scss] 664 bytes {application} [built]
[./node_modules/css-loader/dist/cjs.js?!./node_modules/postcss-loader/src/index.js?!./node_modules/sass-loader/dist/cjs.js?!./app/javascript/stylesheets/application.scss] ./node_modules/css-loader/dist/cjs.js??ref–6-1!./node_modules/postcss-loader/src??ref–6-2!./node_modules/sass-loader/dist/cjs.js??ref–6-3!./app/javascript/stylesheets/application.scss 5.18 MiB {application} [built]
[./node_modules/webpack/buildin/amd-options.js] (webpack)/buildin/amd-options.js 80 bytes {application} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 905 bytes {application} [built]
[./node_modules/webpack/buildin/harmony-module.js] (webpack)/buildin/harmony-module.js 631 bytes {application} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 552 bytes {application} [built]
+ 301 hidden modules

ERROR in ./node_modules/uppy/index.mjs 36:0-47
"export ‘default’ (reexported as ‘Audio’) was not found in ‘@uppy/audio’
@ ./app/javascript/fileUpload.js
@ ./app/javascript/packs/application.js

ERROR in ./node_modules/uppy/index.mjs 17:0-55
"export ‘default’ (reexported as ‘Dashboard’) was not found in ‘@uppy/dashboard’
@ ./app/javascript/fileUpload.js
@ ./app/javascript/packs/application.js

MY APPLICATION.JS Uppy Code
import fileUpload from ‘fileUpload’
document.addEventListener(‘turbo:load’, () => {
document.querySelectorAll(’.upload-file’).forEach(fileInput => {
fileUpload(fileInput)
})
})

MY SHRINE INITIALIZER FOR UPPY
Shrine.plugin :presign_endpoint, presign_options: lambda { |request|
filename = request.params[‘filename’]
type = request.params[‘type’]
{
content_disposition: ContentDisposition.inline(filename), # set download filename
content_type: type, # set content type (defaults to “application/octet-stream”)
content_length_range: 0…(10 * 1024 * 1024) # limit upload size to 10 MB
}
}