Avoid infinite recursion from window.fetch name collision
#1077
Conversation
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
|
@jorgemanrubia @afcapel I'm not entirely sure why this resolves the issue. During my investigation, I found that the build output was using I think something is either wrong built the build tooling configuration, or something else at the browser layer. |
|
What can we do to fix the underlying issue? How can we prevent future changes from reintroducing the regression? The test suite did not catch it. |
|
Something weird is that turbo-rails uses its own bundling pipeline, which is not the same that Turbo uses, and I suspect that is a factor here. I'm not sure about the historical reasons for that, but we should unify those. |
|
The problem here is that a new I checked that adding This doesn't happen using importmaps because |
|
I can reproduce this with Turbo 7.3 and bun, same pollution of the global |
Bun.js generates JS bundles in the ESM format and they need be imported with the `type="module"` attribute. Otherwise the module varibles end up in the global scope. See hotwired/turbo#1077 This commit updates the install generator to add the type="module" attribute to the default `javascript_include_tag`. `defer` is no longer needed, as JS modules are deferred by default. Ref. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts This PR also updates the default config to ensure that all bundlers are configured to output ESM bundles. - bun only supports ESM at the moment https://bun.sh/docs/bundler#format - esbuild outputs ESM by default when bundling is enabled https://esbuild.github.io/api/#format-esm - webpacker is configured to output ESM bundles with `output.chunkFormat` https://webpack.js.org/configuration/output/#outputchunkformat - rollup is configured to output ESM bundles with `output.format` https://rollupjs.org/configuration-options/#output-format
|
Fix in js-bundling-rails here rails/jsbundling-rails#178 |
|
Amazing work tracking this one down @afcapel! |
|
Would it be worth reverting this commit, since the fix is better suited elsewhere? |
|
I think the change is ok @seanpdoyle. It uses a clearer naming approach IMO. |
Bun.js generates JS bundles in the ESM format and they need be imported with the `type="module"` attribute. Otherwise the module varibles end up in the global scope. See hotwired/turbo#1077 This commit updates the install generator to add the type="module" attribute to the default `javascript_include_tag`. `defer` is no longer needed, as JS modules are deferred by default. Ref. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts This PR also updates the default config to ensure that all bundlers are configured to output ESM bundles. - bun only supports ESM at the moment https://bun.sh/docs/bundler#format - esbuild is configured to output ESM with the --format=esm flag https://esbuild.github.io/api/#format-esm - webpacker is configured to output ESM bundles with `output.chunkFormat` https://webpack.js.org/configuration/output/#outputchunkformat - rollup is configured to output ESM bundles with `output.format` https://rollupjs.org/configuration-options/#output-format
+1. This behavior still exists on @hotwired/turbo@8.beta-1 using Bun which comes with Rails new. Not sure if a new release has been made. |
Bun.js generates JS bundles in the ESM format and they need be imported with the `type="module"` attribute. Otherwise the module varibles end up in the global scope. See hotwired/turbo#1077 This commit updates the install generator to add the type="module" attribute to the default `javascript_include_tag`. `defer` is no longer needed, as JS modules are deferred by default. Ref. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#other_differences_between_modules_and_standard_scripts This PR also updates the default config to ensure that all bundlers are configured to output ESM bundles. - bun only supports ESM at the moment https://bun.sh/docs/bundler#format - esbuild is configured to output ESM with the --format=esm flag https://esbuild.github.io/api/#format-esm - webpacker is configured to output ESM bundles with `output.chunkFormat` https://webpack.js.org/configuration/output/#outputchunkformat - rollup is configured to output ESM bundles with `output.format` https://rollupjs.org/configuration-options/#output-format
Closes @hotwired/turbo-rails#526
Prevent naming collisions between the new
Turbo.fetchfunction and the built-inwindow.fetchfunction.To do so, create a module-local reference to
window.fetch, and define the exported function asfetchWithTurboHeaders. At export-time, rename tofetchso that consumers can continue to import it asTurbo.fetch.