Rails 7 重定向错误：触发模块脚本加载后添加导入映射

Question

我有一个 Rails 7 应用程序。我的控制器操作之一（注销操作）将用户重定向到

root_url

。

由于某种原因，在重定向后，我在 Chrome 控制台上看到以下错误，并且该页面上的一个按钮（登录按钮）停止工作。

turbo.es2017-esm.js:2407 An import map is added after module script load was triggered.

如果我展开错误，以下是堆栈跟踪：

turbo.es2017-esm.js:2407 An import map is added after module script load was triggered.
assignNewBody @ turbo.es2017-esm.js:2407
(anonymous) @ turbo.es2017-esm.js:2369
preservingPermanentElements @ turbo.es2017-esm.js:961
preservingPermanentElements @ turbo.es2017-esm.js:1039
replaceBody @ turbo.es2017-esm.js:2367
render @ turbo.es2017-esm.js:2342
renderSnapshot @ turbo.es2017-esm.js:892
render @ turbo.es2017-esm.js:862
renderPage @ turbo.es2017-esm.js:2483
(anonymous) @ turbo.es2017-esm.js:1517
render @ turbo.es2017-esm.js:1682
await in render (async)
loadResponse @ turbo.es2017-esm.js:1512
visitRequestCompleted @ turbo.es2017-esm.js:1724
recordResponse @ turbo.es2017-esm.js:1498
simulateRequest @ turbo.es2017-esm.js:1485
issueRequest @ turbo.es2017-esm.js:1475
visitStarted @ turbo.es2017-esm.js:1710
start @ turbo.es2017-esm.js:1436
startVisit @ turbo.es2017-esm.js:2055
visitProposedToLocation @ turbo.es2017-esm.js:1706
visitProposedToLocation @ turbo.es2017-esm.js:2638
proposeVisit @ turbo.es2017-esm.js:2045
formSubmissionSucceededWithResponse @ turbo.es2017-esm.js:2096
await in formSubmissionSucceededWithResponse (async)
requestSucceededWithResponse @ turbo.es2017-esm.js:685
receive @ turbo.es2017-esm.js:450
perform @ turbo.es2017-esm.js:431
await in perform (async)
start @ turbo.es2017-esm.js:644
submitForm @ turbo.es2017-esm.js:2060
formSubmitted @ turbo.es2017-esm.js:2662
Q.submitBubbled @ turbo.es2017-esm.js:1826

document.body.replaceWith(this.newElement);

是发生错误的代码行：

 assignNewBody() {
        if (document.body && this.newElement instanceof HTMLBodyElement) {
            document.body.replaceWith(this.newElement);
        }
        else {
            document.documentElement.appendChild(this.newElement);
        }
    }

控制器动作：

def destroy
    log_out

    respond_to do |format|
      format.html {redirect_to root_url, status: 303}
      format.json {render json: {} }
    end
  end

如果刷新页面，错误就会消失，按钮会再次开始工作。

Answer 1

如果您不小心在页面中两次包含导入地图 (

<%= javascript_importmap_tags %>

)，则可能会发生此错误。

Answer 2

发生此错误的原因是您可能已在导入地图脚本标记下方添加了脚本标记。

例如-

<script type="module" src="./hello.js"></script>
<script type="importmap">
    {
      "imports": {
        "@lodash/startCase": "https://unpkg.com/[email protected]/startCase.js"
      }
    }
  </script>

您应该始终在导入脚本标签之后添加脚本文件标签。

<script type="importmap">
    {
      "imports": {
        "@lodash/startCase": "https://unpkg.com/[email protected]/startCase.js"
      }
    }
  </script>
  <script type="module" src="./hello.js"></script>

Answer 3

当您将脚本添加到application.html.erb和application.js时，<%= javascript_importmap_tags %>将导致此错误。

像这样；

application.js

import "adminlte"

application.html.erb

<script src="/assets/dist/js/adminlte.min.js"></script>

<%= javascript_importmap_tags %>

Answer 4

我的

application.html.erb

中有以下代码行，它订阅了用户模型的更新：

 <%= turbo_stream_from current_user, "counter" %>

我在

current_user

不为零（注销操作后

current_user

为零）的条件下包装了它：

<% if logged_in? %>
  <%= turbo_stream_from current_user, "counter" %>
<% end %>

现在错误消失了，登录按钮也没有损坏。

我还是不太明白根本原因。

Answer 5

对我来说，这是由 Chrome 扩展引起的