Import application JS as a module

afcapel · afcapel · commit d302e633322f · 2023-11-27T16:09:58.000Z
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
diff --git a/lib/install/install.rb b/lib/install/install.rb
@@ -14,10 +14,10 @@
 if (app_layout_path = Rails.root.join("app/views/layouts/application.html.erb")).exist?
   say "Add JavaScript include tag in application layout"
   insert_into_file app_layout_path.to_s,
-    %(\n    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>), before: /\s*<\/head>/
+    %(\n    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>), before: /\s*<\/head>/
 else
   say "Default application.html.erb is missing!", :red
-  say %(        Add <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %> within the <head> tag in your custom layout.)
+  say %(        Add <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %> within the <head> tag in your custom layout.)
 end
 
 unless (app_js_entrypoint_path = Rails.root.join("app/javascript/application.js")).exist?
diff --git a/lib/install/rollup/rollup.config.js b/lib/install/rollup/rollup.config.js
@@ -4,7 +4,7 @@ export default {
   input: "app/javascript/application.js",
   output: {
     file: "app/assets/builds/application.js",
-    format: "iife",
+    format: "esm",
     inlineDynamicImports: true,
     sourcemap: true
   },
diff --git a/lib/install/webpack/webpack.config.js b/lib/install/webpack/webpack.config.js
@@ -10,6 +10,7 @@ module.exports = {
   output: {
     filename: "[name].js",
     sourceMapFilename: "[file].map",
+    chunkFormat: "module",
     path: path.resolve(__dirname, "app/assets/builds"),
   },
   plugins: [
