Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

RangeError: Maximum call stack size exceeded #526

Closed
psantos10 opened this issue Nov 26, 2023 · 2 comments · Fixed by hotwired/turbo#1077
Closed

RangeError: Maximum call stack size exceeded #526

psantos10 opened this issue Nov 26, 2023 · 2 comments · Fixed by hotwired/turbo#1077

Comments

@psantos10
Copy link

I just created a new app using the following command:

rails new demo -a propshaft -T -j bun -c tailwind

Then run the following commands:

bin/rails g model User name

bin/rails db:migrate

Created a simple controller with a single new action with the related view:

<h1>Create new user</h1>


<%= form_with model: @user do |form| %>
  <div>
    <%= form.label :name %>
    <%= form.text_field :name %>
  </div>

  <div>
    <%= form.submit %>
  </div>
<% end %>

If I try to submit the form, the form is not submitted and I got the following error on browser's console:

application-42fbe8c3175662614184a417572cdac9274ca809.js:3648 RangeError: Maximum call stack size exceeded
at application-42fbe8c3175662614184a417572cdac9274ca809.js:754:41
at Array.map ()
at uuid (application-42fbe8c3175662614184a417572cdac9274ca809.js:754:37)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:858:22)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
formSubmissionErrored @ application-42fbe8c3175662614184a417572cdac9274ca809.js:3648
requestErrored @ application-42fbe8c3175662614184a417572cdac9274ca809.js:2153
perform @ application-42fbe8c3175662614184a417572cdac9274ca809.js:1937
await in perform (async)
start @ application-42fbe8c3175662614184a417572cdac9274ca809.js:2100
submitForm @ application-42fbe8c3175662614184a417572cdac9274ca809.js:3584
formSubmitted @ application-42fbe8c3175662614184a417572cdac9274ca809.js:4424
submitBubbled @ application-42fbe8c3175662614184a417572cdac9274ca809.js:2268
application-42fbe8c3175662614184a417572cdac9274ca809.js:754 Uncaught (in promise) RangeError: Maximum call stack size exceeded
at application-42fbe8c3175662614184a417572cdac9274ca809.js:754:41
at Array.map ()
at uuid (application-42fbe8c3175662614184a417572cdac9274ca809.js:754:37)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:858:22)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
at fetch (application-42fbe8c3175662614184a417572cdac9274ca809.js:861:17)
(anonymous) @ application-42fbe8c3175662614184a417572cdac9274ca809.js:754
uuid @ application-42fbe8c3175662614184a417572cdac9274ca809.js:754
fetch @ application-42fbe8c3175662614184a417572cdac9274ca809.js:858
fetch @ application-42fbe8c3175662614184a417572cdac9274ca809.js:861
...

If I comment the following line in app/javascript/application.js: import "@hotwired/turbo-rails" The app runs fine.
seanpdoyle added a commit to seanpdoyle/turbo that referenced this issue Nov 27, 2023
@seanpdoyle
Avoid infinite recursion from window.fetch name collision
9a4c994 
Closes [hotwired#526][]

Prevent naming collisions between the new `Turbo.fetch` function and the
built-in `window.fetch` function.

To do so, create a module-local reference to `window.fetch`, and define
the exported function as `fetchWithTurboHeaders`. At export-time, rename
to `fetch` so that consumers can continue to import it as `Turbo.fetch`.

[hotwired#526]: hotwired/turbo-rails#526
@seanpdoyle seanpdoyle mentioned this issue Nov 27, 2023
Merged
@seanpdoyle
Copy link
Contributor

@psantos10 Thank you for opening this issue!

I've opened hotwired/turbo#1077 to try and resolve this issue.

@afcapel
Copy link
Contributor

afcapel commented Nov 27, 2023

I think the proper fix for this should be in the jsbundling-rails generator. See rails/jsbundling-rails#178

In the meantime, anyone hitting this issue can fix it adding type: "module" to javascript_include_tag "application" in application.html.erb.

domchristie pushed a commit to domchristie/turbo that referenced this issue Jul 20, 2024
@seanpdoyle @domchristie
Avoid infinite recursion from window.fetch name collision
0207b11 
Closes [hotwired#526][]

Prevent naming collisions between the new `Turbo.fetch` function and the
built-in `window.fetch` function.

To do so, create a module-local reference to `window.fetch`, and define
the exported function as `fetchWithTurboHeaders`. At export-time, rename
to `fetch` so that consumers can continue to import it as `Turbo.fetch`.

[hotwired#526]: hotwired/turbo-rails#526
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Avoid infinite recursion from window.fetch name collision seanpdoyle/turbo
3 participants
@afcapel @psantos10 @seanpdoyle