fix: respect dev dependencies in install drift checks

Use npm ls with --include=dev so dependency checks stay accurate under NODE_ENV=production, and dismiss stale update toasts when loader data no longer reports updates.

Made-with: Cursor

Author: kentcdodds

packages/workshop-app/app/components/update-repo.tsx

@@ -168,6 +168,17 @@ export function UpdateToast({
 				},
 			})
 			updateToastId.current = id
+		} else {
+			// Keep UI aligned with latest loader state: if updates are cleared,
+			// immediately dismiss any previously shown update toast.
+			if (updateToastId.current) {
+				toast.dismiss(updateToastId.current)
+				updateToastId.current = null
+			}
+			if (inProgressToastId.current && !updateInProgress.current) {
+				toast.dismiss(inProgressToastId.current)
+				inProgressToastId.current = null
+			}
 		}
 	}, [
 		updatesAvailable,

packages/workshop-utils/src/package-install/package-install-check.server.test.ts

@@ -251,7 +251,7 @@ describe('getRootPackageInstallStatus', () => {
 		expect(status.missingDependencies).toEqual(['react-dom'])
 		expect(execa).toHaveBeenCalledWith(
 			'npm',
-			['ls', '--depth=0', '--json', 'react', 'react-dom'],
+			['ls', '--depth=0', '--json', '--include=dev', 'react', 'react-dom'],
 			expect.objectContaining({ cwd: tempDir, reject: false }),
 		)
 	})
@@ -350,6 +350,29 @@ describe('getRootPackageInstallStatus', () => {
 		expect(status.missingDependencies).toEqual(['@epic-web/workshop-utils'])
 	})
 
+	test('uses npm include=dev to avoid NODE_ENV production omissions', async () => {
+		await using temp = await createTempDir()
+		const tempDir = temp.dir
+
+		await writePackageJson(tempDir, {
+			name: 'test-package',
+			dependencies: { react: '^18.0.0' },
+			devDependencies: { typescript: '^5.0.0' },
+		})
+		mockNpmLsResult({
+			exitCode: 0,
+			dependencies: { react: {}, typescript: {} },
+		})
+
+		await getRootPackageInstallStatus(path.join(tempDir, 'package.json'))
+
+		expect(execa).toHaveBeenCalledWith(
+			'npm',
+			['ls', '--depth=0', '--json', '--include=dev', 'react', 'typescript'],
+			expect.objectContaining({ cwd: tempDir, reject: false }),
+		)
+	})
+
 	test('handles package.json with no dependencies', async () => {
 		await using temp = await createTempDir()
 		const tempDir = temp.dir

packages/workshop-utils/src/package-install/package-install-check.server.ts

@@ -164,13 +164,16 @@ async function checkDependenciesWithNpmLs(
 	// Use the detected package manager, defaulting to npm
 	// pnpm has compatible ls output format
 	const command = packageManager === 'pnpm' ? 'pnpm' : 'npm'
+	const lsArgs =
+		command === 'npm'
+			? ['ls', '--depth=0', '--json', '--include=dev', ...expectedDependencies]
+			: ['ls', '--depth=0', '--json', ...expectedDependencies]
 
 	try {
-		const result = await execa(
-			command,
-			['ls', '--depth=0', '--json', ...expectedDependencies],
-			{ cwd: rootDir, reject: false },
-		)
+		const result = await execa(command, lsArgs, {
+			cwd: rootDir,
+			reject: false,
+		})
 		const output = parseNpmLsOutput(result.stdout)
 		const failingDependencies = getFailingDependencies(
 			expectedDependencies,