remove remix-development-tools

It keeps causing issues like this: #414

Closes #414

Author: kentcdodds

app/entry.client.tsx

@@ -6,17 +6,6 @@ if (ENV.MODE === 'production' && ENV.SENTRY_DSN) {
 	import('./utils/monitoring.client.tsx').then(({ init }) => init())
 }
 
-const callback = () =>
-	startTransition(() => {
-		hydrateRoot(document, <RemixBrowser />)
-	})
-
-if (ENV.MODE === 'development') {
-	import('remix-development-tools').then(({ initClient }) => {
-		// Add all the dev tools props here into the client
-		initClient()
-		callback()
-	})
-} else {
-	callback()
-}
+startTransition(() => {
+	hydrateRoot(document, <RemixBrowser />)
+})

app/entry.server.tsx

@@ -40,19 +40,13 @@ export default async function handleRequest(...args: DocRequestArgs) {
 	const nonce = String(loadContext.cspNonce) ?? undefined
 	return new Promise(async (resolve, reject) => {
 		let didError = false
-		const context =
-			process.env.NODE_ENV === 'development'
-				? await import('remix-development-tools').then(({ initServer }) =>
-						initServer(remixContext),
-				  )
-				: remixContext
 		// NOTE: this timing will only include things that are rendered in the shell
 		// and will not include suspended components and deferred loaders
 		const timings = makeTimings('render', 'renderToPipeableStream')
 
 		const { pipe, abort } = renderToPipeableStream(
 			<NonceProvider value={nonce}>
-				<RemixServer context={context} url={request.url} />
+				<RemixServer context={remixContext} url={request.url} />
 			</NonceProvider>,
 			{
 				[callbackName]: () => {

app/root.tsx

@@ -59,11 +59,6 @@ import { type Theme, setTheme, getTheme } from './utils/theme.server.ts'
 import { makeTimings, time } from './utils/timing.server.ts'
 import { getToast } from './utils/toast.server.ts'
 import { useOptionalUser, useUser } from './utils/user.ts'
- 
-const RemixDevTools =
-	process.env.NODE_ENV === 'development'
-		? lazy(() => import('remix-development-tools'))
-		: null
 
 export const links: LinksFunction = () => {
 	return [
@@ -282,13 +277,8 @@ function App() {
 					<ThemeSwitch userPreference={data.requestInfo.userPrefs.theme} />
 				</div>
 			</div>
-		<Confetti id={data.confettiId} />
-		<EpicToaster toast={data.toast} />
-			{RemixDevTools ? (
-				<Suspense>
-					<RemixDevTools />
-				</Suspense>
-			) : null}
+			<Confetti id={data.confettiId} />
+			<EpicToaster toast={data.toast} />
 		</Document>
 	)
 }

package-lock.json

@@ -91,7 +91,6 @@
     "react-dom": "^18.2.0",
     "remix-auth": "^3.5.1",
     "remix-auth-form": "^1.3.0",
-    "remix-development-tools": "^2.1.1",
     "remix-auth-github": "^1.6.0",
     "remix-utils": "^6.6.0",
     "set-cookie-parser": "^2.6.0",
@@ -159,4 +158,4 @@
   "prisma": {
     "seed": "tsx prisma/seed.ts"
   }
-}
+}