I have a stimulus controller that I can’t connect. I have followed a youtube video for Stripe Payments but the checkouts page isn’t rendering and the stripe controller is not logging anything. I’m getting all sorts of errors on the console:
1:1 An import map is added after module script load was triggered.
es-module-shims.min.source.js:1
Uncaught Error: Unable to resolve specifier 'bootstrap' imported from http://localhost:3000/assets/application-67ea6b3da0ef8f02b986a773e4506976fff6e9dd8ee99ae1eca202e98914abb8.js
at throwUnresolved (es-module-shims.min.source.js:1:1)
at _resolve (es-module-shims.min.source.js:1:1)
at es-module-shims.min.source.js:1:1
at Array.map (<anonymous>)
at es-module-shims.min.source.js:1:1
throwUnresolved @ es-module-shims.min.source.js:1
_resolve @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
Promise.catch (async)
processScript @ es-module-shims.min.source.js:1
processScriptsAndPreloads @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
Promise.then (async)
(anonymous) @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
es-module-shims.min.source.js:1
Uncaught Error: Unable to resolve specifier 'bootstrap' imported from http://localhost:3000/assets/application.debug-b4d869f0ecee3111a6ebcb703926c8338a7e295824fbbc578005e1b1856e8287.js
at throwUnresolved (es-module-shims.min.source.js:1:1)
at _resolve (es-module-shims.min.source.js:1:1)
at es-module-shims.min.source.js:1:1
at Array.map (<anonymous>)
at es-module-shims.min.source.js:1:1
at async loadAll (es-module-shims.min.source.js:1:1)
at async topLevelLoad (es-module-shims.min.source.js:1:1)
throwUnresolved @ es-module-shims.min.source.js:1
_resolve @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
Promise.catch (async)
processScript @ es-module-shims.min.source.js:1
processScriptsAndPreloads @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
Promise.then (async)
(anonymous) @ es-module-shims.min.source.js:1
(anonymous) @ es-module-shims.min.source.js:1
1:1
Uncaught TypeError: Failed to resolve module specifier "@hotwired/turbo-rails". Relative references must start with either "/", "./", or "../".
1:1
Uncaught TypeError: Failed to resolve module specifier "application". Relative references must start with either "/", "./", or "../".
I cant get the stimulus controller to connect for some reason. Here are some relevant files.
importmap.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"
app/javascript/controllers/index.js
// Import and register all your controllers from the importmap under controllers/*
import { application } from "controllers/application"
// Eager load all controllers defined in the import map under controllers/**/*_controller
import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
eagerLoadControllersFrom("controllers", application)
// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
// lazyLoadControllersFrom("controllers", application)
app/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 "bootstrap"
import "jquery"
import "popper.js"
head in application.html.erb
<head>
<title>PYE Candles</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css" %>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag 'application', 'data-turbo-track': 'reload', type: "module", defer: true %>
<%# <%= javascript_include_tag 'stripe_controller.js', 'data-turbo-track': 'reload', defer: true %>
<%= javascript_include_tag 'https://js.stripe.com/v3/', 'data-turbo-track': 'reload' %>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Work+Sans:wght@600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@1,100&display=swap" rel="stylesheet">
<%= javascript_importmap_tags %>
</head>
app/javascript/controllers/application.js
import { Application } from "@hotwired/stimulus"
const application = Application.start()
application.register("stripe", StripeController)
application.debug = false
window.Stimulus = application
export { application }
app/javascript/controllers/stripe_controller.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"] });
async connect() {
console.log("Stimulus controller connected");
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();
}
}
I’m not sure what to try as I don’t understand the problem.