feat(remix)!: Move the Vite plugin to @sentry/remix/vite

MIGRATION.md

@@ -1260,6 +1260,18 @@ Affected SDKs: `@sentry/react-router`.
 + import { sentryOnBuildEnd } from '@sentry/react-router/vite';
 ```
 
+### Remix: Vite plugin moved to `@sentry/remix/vite`
+
+Affected SDKs: `@sentry/remix`.
+
+`sentryRemixVitePlugin` is no longer available from the main `@sentry/remix` entry point. Import it from the dedicated subpath instead:
+
+```diff
+// vite.config.ts
+- import { sentryRemixVitePlugin } from '@sentry/remix';
++ import { sentryRemixVitePlugin } from '@sentry/remix/vite';
+```
+
 ## 3. Removed APIs
 
 ### `@sentry/core` / All SDKs

dev-packages/e2e-tests/test-applications/create-remix-app-express-vite-dev/vite.config.ts

@@ -1,6 +1,6 @@
 import { installGlobals } from '@remix-run/node';
 import { vitePlugin as remix } from '@remix-run/dev';
-import { sentryRemixVitePlugin } from '@sentry/remix';
+import { sentryRemixVitePlugin } from '@sentry/remix/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 

dev-packages/e2e-tests/test-applications/create-remix-app-express/vite.config.ts

@@ -1,6 +1,6 @@
 import { installGlobals } from '@remix-run/node';
 import { vitePlugin as remix } from '@remix-run/dev';
-import { sentryRemixVitePlugin } from '@sentry/remix';
+import { sentryRemixVitePlugin } from '@sentry/remix/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 

dev-packages/e2e-tests/test-applications/create-remix-app-v2/vite.config.ts

@@ -1,5 +1,5 @@
 import { vitePlugin as remix } from '@remix-run/dev';
-import { sentryRemixVitePlugin } from '@sentry/remix';
+import { sentryRemixVitePlugin } from '@sentry/remix/vite';
 import { sentryOrchestrionPlugin } from '@sentry/server-utils/orchestrion/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';

dev-packages/e2e-tests/test-applications/remix-hydrogen/vite.config.ts

@@ -1,5 +1,5 @@
 import { vitePlugin as remix } from '@remix-run/dev';
-import { sentryRemixVitePlugin } from '@sentry/remix';
+import { sentryRemixVitePlugin } from '@sentry/remix/vite';
 import { hydrogen } from '@shopify/hydrogen/vite';
 import { oxygen } from '@shopify/mini-oxygen/vite';
 import { defineConfig } from 'vite';

dev-packages/e2e-tests/test-applications/remix-server-timing/vite.config.ts

@@ -1,5 +1,5 @@
 import { vitePlugin as remix } from '@remix-run/dev';
-import { sentryRemixVitePlugin } from '@sentry/remix';
+import { sentryRemixVitePlugin } from '@sentry/remix/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 

packages/remix/package.json

@@ -42,6 +42,11 @@
       "types": "./build/types/cloudflare/index.d.ts",
       "default": "./build/esm/cloudflare/index.js"
     },
+    "./vite": {
+      "types": "./build/types/vite/index.d.ts",
+      "import": "./build/esm/vite/index.js",
+      "require": "./build/cjs/vite/index.js"
+    },
     "./import": {
       "import": {
         "default": "./build/import-hook.mjs"

packages/remix/rollup.npm.config.mjs

@@ -13,6 +13,7 @@ export default [
         'src/client/index.ts',
         'src/server/index.ts',
         'src/cloudflare/index.ts',
+        'src/vite/index.ts',
       ],
       packageSpecificConfig: {
         external: ['react-router', 'react-router-dom', 'react', 'react/jsx-runtime'],

packages/remix/src/index.server.ts

@@ -1,7 +1,6 @@
 export * from './server';
 export { captureRemixErrorBoundaryError, withSentry, ErrorBoundary, browserTracingIntegration } from './client';
 
-export { sentryRemixVitePlugin } from './config/vite';
 export { createRemixRouteManifest } from './config/createRemixRouteManifest';
 export type { CreateRemixRouteManifestOptions } from './config/createRemixRouteManifest';
 

packages/remix/src/vite/index.ts

@@ -0,0 +1,32 @@
+import type { Plugin } from 'vite';
+import { makeRouteManifestPlugin } from './routeManifestPlugin';
+import type { SentryRemixVitePluginOptions } from './types';
+
+export type { SentryRemixVitePluginOptions };
+
+/**
+ * Sentry Vite plugins for Remix.
+ *
+ * Add these to your Vite configuration to inject the Remix route manifest, so client-side
+ * transactions are parameterized.
+ *
+ * @example
+ * ```typescript
+ * // vite.config.ts
+ * import { vitePlugin as remix } from '@remix-run/dev';
+ * import { sentryRemixVitePlugin } from '@sentry/remix/vite';
+ * import { defineConfig } from 'vite';
+ *
+ * export default defineConfig({
+ *   plugins: [
+ *     remix(),
+ *     sentryRemixVitePlugin({
+ *       appDirPath: './app',
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+export function sentryRemixVitePlugin(options: SentryRemixVitePluginOptions = {}): Plugin[] {
+  return [makeRouteManifestPlugin(options)];
+}

packages/remix/src/config/vite.ts → packages/remix/src/vite/routeManifestPlugin.ts

@@ -1,6 +1,7 @@
 import * as path from 'path';
 import type { Plugin } from 'vite';
-import { createRemixRouteManifest } from './createRemixRouteManifest';
+import { createRemixRouteManifest } from '../config/createRemixRouteManifest';
+import type { SentryRemixVitePluginOptions } from './types';
 
 /**
  * Escapes a JSON string for safe embedding in HTML script tags.
@@ -12,45 +13,13 @@ function escapeJsonForHtml(jsonString: string): string {
     .replace(/<!--/g, '<\\!--'); // Escape <!-- to prevent HTML comment injection
 }
 
-export type SentryRemixVitePluginOptions = {
-  /**
-   * Path to the app directory (where routes folder is located).
-   * Can be relative to project root or absolute.
-   * Defaults to 'app' in the project root.
-   *
-   * @example './app'
-   * @example '/absolute/path/to/app'
-   */
-  appDirPath?: string;
-};
-
 // Global variable key used to store the route manifest
 const MANIFEST_GLOBAL_KEY = '_sentryRemixRouteManifest' as const;
 
 /**
  * Vite plugin to inject Remix route manifest for Sentry client-side route parameterization.
- *
- * @param options - Plugin configuration options
- * @returns Vite plugin
- *
- * @example
- * ```typescript
- * // vite.config.ts
- * import { defineConfig } from 'vite';
- * import { vitePlugin as remix } from '@remix-run/dev';
- * import { sentryRemixVitePlugin } from '@sentry/remix';
- *
- * export default defineConfig({
- *   plugins: [
- *     remix(),
- *     sentryRemixVitePlugin({
- *       appDirPath: './app',
- *     }),
- *   ],
- * });
- * ```
  */
-export function sentryRemixVitePlugin(options: SentryRemixVitePluginOptions = {}): Plugin {
+export function makeRouteManifestPlugin(options: Pick<SentryRemixVitePluginOptions, 'appDirPath'> = {}): Plugin {
   let routeManifestJson: string = '';
   let isDevMode = false;
 

packages/remix/src/vite/types.ts

@@ -0,0 +1,11 @@
+export type SentryRemixVitePluginOptions = {
+  /**
+   * Path to the app directory (where routes folder is located).
+   * Can be relative to project root or absolute.
+   * Defaults to 'app' in the project root.
+   *
+   * @example './app'
+   * @example '/absolute/path/to/app'
+   */
+  appDirPath?: string;
+};