Rails アプリケーションのストライプチェックアウトとスティミュラスコントローラーの問題

概要

Rails アプリケーションでの Stripe Checkout のレンダリングと Stimulus コントローラーの接続で問題が発生しました。以下に詳細を説明しました。

刺激コントローラー:

関連するコード:

ストライプコントローラー.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static values = { publicKey: String, clientSecret: String }
  stripe = Stripe(this.publicKeyValue, { betas: ["embedded_checkout_beta_1"] });

  connect() {
    console.log("Stimulus controller connected");
  }

  async connect() {
    console.log("Connect method is called");
    console.log("Public Key:", this.publicKeyValue);
    console.log("Client Secret:", this.clientSecretValue);

    this.checkout = await this.stripe.initEmbeddedCheckout({
      clientSecret: this.clientSecretValue
    });

    console.log("Checkout Object:", this.checkout);

    this.checkout.mount(this.element);
  }

  disconnect() {
    this.checkout.destroy();
  }
}

インポートマップ.rb

# Pin npm packages by running ./bin/importmap

pin "application", preload: true
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
pin_all_from "app/javascript/controllers", under: "controllers"

show.html.erb

<h1>Checkout Page</h1>
<%# <script type="module" src="/javascript/controllers/stripe_controller.js"></script> %>
<div data-controller="stripe"
  data-stripe-public-key-value="<%= Rails.application.credentials.dig(:stripe, :publishable_key)%>"
  data-stripe-client-secret-value="<%= @session.client_secret %>">
</div>

講じた手順:

インポートマップの構成をチェックし、正しいパスを確認しました。アセットは、インポートマップを変更した後にプリコンパイルされています。 javascript_importmap_tags はレイアウトファイルの先頭に配置されます。

アップデート

application.js ファイルで console.log を実行しましたが、何も記録されませんでした。

発生したエラー:

ブラウザのコンソールに次のようなエラーが表示されます。

キャッチされない TypeError: モジュール指定子「アプリケーション」を解決できませんでした。相対参照は、「/」、「./」、または「../」のいずれかで始まる必要があります。 Uncaught TypeError: モジュール指定子「@hotwired/turbo-rails」を解決できませんでした。相対参照は、「/」、「./」、または「../」のいずれかで始まる必要があります。

バージョン:

Rails バージョン: Rails 7.0.8 ターボバージョン: @hotwired/turbo-rails: 8.0.0-beta.2

アプリケーションはローカルホスト上で実行されます。 Stripe キーをテストキーに変更してみましたが、問題は解決しません。

これらの問題の原因とその解決方法についての洞察や提案をいただければ幸いです。

ありがとう。

解決策

<%= javascript_importmap_tags %> がすべてを処理するため、application.html.erb の先頭にあるアプリケーションの JavaScript include タグを削除することで問題を解決しました。次に、次の行を追加しました。 import { StripeController } から “./ストライプ_コントローラー”;私の application.js ファイルに次のように追加します。

アプリ/javascript/コントローラー/application.js

import { Application } from "@hotwired/stimulus";
import { StripeController } from "./stripe_controller";

const application = Application.start();
application.register("stripe", StripeController);
application.debug = false;
window.Stimulus = application;

export { application };

そしてストライプコントローラーではこれを変更しました:

export class extends Controller {

これに：

export class StripeController extends Controller {

importmap に固定されていないインポートもありました。それらも次のようにコメントアウトしました。

アプリ/javascript/application.js

import "@hotwired/turbo-rails"
import "controllers"
// import "bootstrap"
// import "jquery"
// import "popper.js"

Rails アプリケーションのストライプ チェックアウトとスティミュラス コントローラーの問題

概要

解決策

Rails アプリケーションのストライプチェックアウトとスティミュラスコントローラーの問題