Can't import the named export 'Controller' from non EcmaScript module

[dacook]

I've added these lines in app/webpacker/controllers/index.js as per the instructions:

import NestedForm from 'stimulus-rails-nested-form';
...
application.register('nested-form', NestedForm);

But getting this compilation error and don't know how to fix it:

./node_modules/stimulus-rails-nested-form/dist/stimulus-rails-nested-form.mjs 42:2-3
Can't import the named export 'Controller' from non EcmaScript module (only default export is available)

Environment

@hotwired/stimulus@^3.2.2
webpack@^4.46.0
rails (7.0.8)
node-version 17.9.1 (Edit: I note that this component uses Node 18)

[Pauloparakleto]

This guy had this exactly same problem
Check if the module is indeed there as per this question
It seems to have to import like this:
import NestedForm from 'stimulus-rails-nested-form/dist/stimulus-rails-nested-form.umd.js'

[dacook]

Thank you! This solved it for me.

I wish I could contribute the fix, but can't figure out how. I wonder if this affects all other stimulus-components.