Sprockets::DoubleLinkError - 无法链接具有相同输出路径的多个文件（“application.js”）

Question

Rails 版本：7.0.3.1

红宝石版本：3.1.0p0

反应版本：18.2.0

我正在尝试将 React 添加到我现有的 Rails 应用程序中，并按照此处的教程进行操作 - https://medium.com/rd-shipit/how-to-set-up-a-rails-7-project-with-react- and-jest-f2e016bfbdf3 由于我已经有一个现有的 Rails 应用程序，因此我使用此处的说明安装了 esbuild - https://github.com/rails/jsbundling-rails

Run ./bin/bundle add jsbundling-rails
Run ./bin/rails javascript:install:[esbuild|rollup|webpack]

但是，当我尝试在本地运行该应用程序时，它失败了

$ 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

我对整个前端工作非常陌生，以前从未从事过前端工作。我刚刚学习了所有这些信息，所以我被困在这里，因为我尝试了多种方法但没有成功。老实说，我不明白这些东西。我尝试过的事情是：

• 重命名app/javascript/application.js为app/javascript/application2.js. 这在本地有效，但当我推送到 heroku 时失败。
• 删除application.js并只保留该application.js.map文件。app/assets/builds/*app/assets/builds/.keep
• 尝试在此处运行命令 -如何解决 Sprockets::DoubleLinkError application.css

应用程序/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"

我尝试取消注释import "@hotwired/turbo-rails"，import "controllers"但这只会给出不同的错误。

我现在没有尝试的想法。我在这里缺少什么？谢谢你！

Answer 1

我唯一看到的是你在两个地方使用Javascript：app/javascript/applications.js和app/assets/javascript/application.js

好的方法就像你所做的那样app/javascript/application.js（不要注释掉@hotwired和刺激控制器，这不是问题所在）

基本上，使用 JSBundling 处理 Javascript 的新方法，application.js 文件app/javascript/将被捆绑到builds文件夹中。然后被链轮抓住进行指纹识别并压缩。

Sprockets 还将压缩app/assets/javascript文件夹中的所有内容并对其进行指纹识别，然后您最终会得到两个名称相同的文件。

如果您没有app/assets/javascript文件夹，则您的文件可能有问题app/assets/config/manifest.js。您可能尝试将app/assets/builds文件夹和app/javascript文件夹都传递给 sprocket。然后，您最终将捆绑和未捆绑的文件添加到您的应用程序中。