remove remix dev tools (temporarily)

Author: kentcdodds

app/entry.client.tsx

@@ -8,15 +8,7 @@ if (ENV.MODE === 'development') {
 if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 	import('~/utils/monitoring.client.tsx').then(({ init }) => init())
 }
-if (process.env.NODE_ENV === 'development') {
-	import('remix-development-tools').then(({ initRouteBoundariesClient }) => {
-		initRouteBoundariesClient()
-		startTransition(() => {
-			hydrateRoot(document, <RemixBrowser />)
-		})
-	})
-} else {
-	startTransition(() => {
-		hydrateRoot(document, <RemixBrowser />)
-	})
-}
+
+startTransition(() => {
+	hydrateRoot(document, <RemixBrowser />)
+})

app/entry.server.tsx

@@ -27,13 +27,6 @@ export default async function handleRequest(...args: DocRequestArgs) {
 		remixContext,
 		loadContext,
 	] = args
-	const context =
-		process.env.NODE_ENV === 'development'
-			? await import('remix-development-tools').then(
-					({ initRouteBoundariesServer }) =>
-						initRouteBoundariesServer(remixContext),
-			  )
-			: remixContext
 	const { currentInstance, primaryInstance } = await getInstanceInfo()
 	responseHeaders.set('fly-region', process.env.FLY_REGION ?? 'unknown')
 	responseHeaders.set('fly-app', process.env.FLY_APP_NAME ?? 'unknown')
@@ -54,7 +47,7 @@ export default async function handleRequest(...args: DocRequestArgs) {
 
 		const { pipe, abort } = renderToPipeableStream(
 			<NonceProvider value={nonce}>
-				<RemixServer context={context} url={request.url} />
+				<RemixServer context={remixContext} url={request.url} />
 			</NonceProvider>,
 			{
 				[callbackName]: () => {

app/root.tsx

@@ -20,7 +20,7 @@ import {
 	useSubmit,
 } from '@remix-run/react'
 import { withSentry } from '@sentry/remix'
-import { Suspense, lazy, useRef } from 'react'
+import { useRef } from 'react'
 import { Confetti } from './components/confetti.tsx'
 import { GeneralErrorBoundary } from './components/error-boundary.tsx'
 import { SearchBar } from './components/search-bar.tsx'
@@ -48,11 +48,6 @@ import { useNonce } from './utils/nonce-provider.ts'
 import { makeTimings, time } from './utils/timing.server.ts'
 import { useToast } from './utils/useToast.tsx'
 import { useOptionalUser, useUser } from './utils/user.ts'
-import rdtStylesheetUrl from 'remix-development-tools/stylesheet.css'
-const RemixDevTools =
-	process.env.NODE_ENV === 'development'
-		? lazy(() => import('remix-development-tools'))
-		: undefined
 
 export const links: LinksFunction = () => {
 	return [
@@ -62,9 +57,6 @@ export const links: LinksFunction = () => {
 		{ rel: 'preload', href: fontStylestylesheetUrl, as: 'style' },
 		{ rel: 'preload', href: tailwindStylesheetUrl, as: 'style' },
 		cssBundleHref ? { rel: 'preload', href: cssBundleHref, as: 'style' } : null,
-		rdtStylesheetUrl && process.env.NODE_ENV === 'development'
-			? { rel: 'preload', href: rdtStylesheetUrl, as: 'style' }
-			: null,
 		{ rel: 'mask-icon', href: '/favicons/mask-icon.svg' },
 		{
 			rel: 'alternate icon',
@@ -82,9 +74,6 @@ export const links: LinksFunction = () => {
 		{ rel: 'stylesheet', href: fontStylestylesheetUrl },
 		{ rel: 'stylesheet', href: tailwindStylesheetUrl },
 		cssBundleHref ? { rel: 'stylesheet', href: cssBundleHref } : null,
-		rdtStylesheetUrl && process.env.NODE_ENV === 'development'
-			? { rel: 'stylesheet', href: rdtStylesheetUrl }
-			: null,
 	].filter(Boolean)
 }
 
@@ -236,11 +225,6 @@ function App() {
 			</div>
 			<Confetti confetti={data.flash?.confetti} />
 			<Toaster />
-			{RemixDevTools && (
-				<Suspense>
-					<RemixDevTools />
-				</Suspense>
-			)}
 		</Document>
 	)
 }

package-lock.json

@@ -137,7 +137,6 @@
     "prettier": "^2.8.8",
     "prettier-plugin-sql": "^0.15.1",
     "prettier-plugin-tailwindcss": "^0.3.0",
-    "remix-development-tools": "^1.4.0",
     "remix-flat-routes": "^0.5.10",
     "tsconfig-paths": "^4.2.0",
     "tsx": "^3.12.7",