英文:
Rails 7: Stimulus Rails Nested Form not working
问题
抱歉，您提供的内容似乎包含了一些代码和错误信息，但我无法提供针对具体代码和错误的翻译，因为这需要更多的上下文和代码理解。如果您有关于代码和错误的具体问题，可以提出并提供更多信息，我将尽力提供帮助。
英文:
I am trying to follow the instrcutions mentioned here
https://www.stimulus-components.com/docs/stimulus-rails-nested-form/
but when I add the import statement
import NestedForm from 'stimulus-rails-nested-form'
i see the following error
ERROR in ./node_modules/stimulus-rails-nested-form/dist/stimulus-rails-nested-form.mjs 2:16-17Can't import the named export 'Controller' from non EcmaScript module (only default export is available)
below is my app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"import NestedForm from 'stimulus-rails-nested-form'const application = Application.start()// application.register('nested-form', NestedForm)// Configure Stimulus development experienceapplication.debug = falsewindow.Stimulus = applicationexport { application }
below are the contents of my package.json
{"name": "backend","private": true,"dependencies": {"@hotwired/stimulus": "^3.2.1","@hotwired/stimulus-webpack-helpers": "^1.0.1","@rails/webpacker": "5.4.4","node": "^16.20.1","stimulus-rails-nested-form": "^4.1.0","webpack": "^4.46.0","webpack-cli": "^3.3.12"},"devDependencies": {"@babel/plugin-proposal-private-methods": "^7.18.6","@babel/plugin-proposal-private-property-in-object": "^7.21.11","webpack-dev-server": "^3"}}
I am on rails Rails 7.0.3. Any help on what could be missing would be great, Thanks.
答案1
得分: 1
我的JavaScript技能不够好，但似乎这是stimulus-rails-nested-form中的一个bug。它的.mjs文件，即默认的模块入口点，以错误的方式导入了*@hotwired/stimulus*。正如错误提到的，该模块仅支持默认导出，但却进行了命名导入。
stimulus-rails-nested-form在这里使用了命名导入，如下所示：
import { Controller as n } from "@hotwired/stimulus";class r extends n { ... }
正如错误提到的，导入的模块只有默认导出，所以应该像这样导入：
import Stimulus from "@hotwired/stimulus";class r extends Stimulus.Controller { ... }
由于这需要更改库，因此在那之前，可以通过从stimulus-rails-nested-form提供的UMD文件进行导入来解决问题。
import NestedForm from 'stimulus-rails-nested-form/dist/stimulus-rails-nested-form.umd.js';
英文:
My Javascript fu, is not good enougth, but it seems this is a bug in stimulus-rails-nested-form. Its '.mjs' file, the default module entrypoint, imports @hotwired/stimulus in an incorrect way. As the error mentions only default export is available in the module, but a named import it been done.
stimulus-rails-nested-form uses a named import here, like this
import { Controller as n } from "@hotwired/stimulus"class r extends n { ... }
As the error mentions, the imported module only has a default export, so it should be imported like this:
import Stimulus from "@hotwired/stimulus"class r extends Stimulus.Controller { ... }
Since this requires a library change, until then, it can be solved by importing from the UMD file that stimulus-rails-nested-form provides.
import NestedForm from 'stimulus-rails-nested-form/dist/stimulus-rails-nested-form.umd.js'
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论