How to properly separate entrypoints (traditional Rails vs. Inertia) #553

leenyburger · 2025-05-22T21:35:09Z

leenyburger
May 22, 2025

Problem

I have a Rails 7 app running Vite for both Inertia and "traditional Rails" with Turbolinks and sometimes (randomly?) Turbolinks intercepts my Inertia links even though the entrypoints are completely independent.

Question

If I have two different entrypoints that are completely separated (application.js and inertia.js), but Vite is preloading application.js

Background

I have a Rails 7 app I migrated from Webpacker to Vite. This app has some pages that are served by "traditional" rails views with Turbolinks and some that are served using Inertia + React.

The inertia part has it's own entrypoint and layout that does not include TurboLinks. Here is the inerta html layout:

<!DOCTYPE html>
<html>
  <head>
    <title inertia><%= content_for(:title) || "Simple File Upload Documentation Inertia" %></title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
    <link rel="icon" href="/icon.png" type="image/png">
    <link rel="icon" href="/icon.svg" type="image/svg+xml">
    <link rel="apple-touch-icon" href="/icon.png">
    <%= vite_stylesheet_tag "inertia" %>
    <%= vite_react_refresh_tag %>
    <%= vite_client_tag %>
    <%= vite_javascript_tag 'inertia' %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

In what is the weirdest thing ever, when I stop my app, run a different app locally that bundles with Vite, kill that app, and try to start my app again, Turbolinks is loaded on my inertia pages. It's hijacking my inertia links, so definitely a problem.

I have tried every combination of rm -rf node_modules/.vite public/vite* and bin/vite clobber I can think of.

My vite config

import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'
import { fileURLToPath } from 'url'
import RubyPlugin from 'vite-plugin-ruby'

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
    RubyPlugin(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./app/javascript/pages', import.meta.url)),
      account: fileURLToPath(new URL('./app/javascript/account', import.meta.url)),
      sprinkles: fileURLToPath(new URL('./app/javascript/sprinkles', import.meta.url)),
      clean_admin: fileURLToPath(new URL('./app/javascript/clean_admin', import.meta.url)),
      'legacy/homepage': fileURLToPath(new URL('./app/javascript/legacy/homepage', import.meta.url)),
      custom: fileURLToPath(new URL('./app/javascript/custom', import.meta.url)),
      helpers: fileURLToPath(new URL('./app/javascript/helpers', import.meta.url)),
      dropzone_templates: fileURLToPath(new URL('./app/javascript/dropzone_templates', import.meta.url)),
    },
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'], 
  },
  define: {
    global: 'window',
  },
  // Use classic browser globals mode for certain dependencies
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
    // Prevent chunk sharing between entrypoints to avoid Turbolinks leaking into Inertia
    rollupOptions: {
      output: {
        manualChunks: (id) => {
          // Force separate chunks for each entrypoint
          if (id.includes('entrypoints/application')) {
            return 'application';
          }
          if (id.includes('entrypoints/inertia')) {
            return 'inertia';
          }
          if (id.includes('entrypoints/iframe_pack')) {
            return 'iframe_pack';
          }
        }
      }
    }
  }
})

Answered by ElMassimo

May 23, 2025

Hi Colleen!

Something that might be happening is that some of the imports inside inertia.js end up importing some of the files that import turbolinks. In that scenario, even if unused, because turbolinks is not a "pure" library it wouldn't be tree-shaken and would end up in the bundle.

View full answer

ElMassimo · 2025-05-23T15:47:20Z

ElMassimo
May 23, 2025
Maintainer

Hi Colleen!

Something that might be happening is that some of the imports inside inertia.js end up importing some of the files that import turbolinks. In that scenario, even if unused, because turbolinks is not a "pure" library it wouldn't be tree-shaken and would end up in the bundle.

0 replies

leenyburger · 2025-05-27T18:08:06Z

leenyburger
May 27, 2025
Author

Thanks! Disabling turbolinks did the trick.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to properly separate entrypoints (traditional Rails vs. Inertia) #553

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

How to properly separate entrypoints (traditional Rails vs. Inertia) #553

Uh oh!

Uh oh!

leenyburger May 22, 2025

Problem

Question

Background

Replies: 2 comments

Uh oh!

ElMassimo May 23, 2025 Maintainer

Uh oh!

Uh oh!

leenyburger May 27, 2025 Author

leenyburger
May 22, 2025

ElMassimo
May 23, 2025
Maintainer

leenyburger
May 27, 2025
Author