Giters

epicweb-dev / full-stack-foundations

Learn the foundational skills of building full stack web applications.

Home Page:https://epicweb.dev/workshops/full-stack-foundations

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Application Error

onemen opened this issue · comments

commented

@kentcdodds,

With the new kcdshop version, START APP fails with this error:

Fresh install on Windows 10 and Windows 11, latest commit 46e9c88 :

app-error-1

Error: useNavigate() may be used only in the context of a <Router> component.
    at Object.invariant [as UNSAFE_invariant] (D:\kcd_apps\full-stack-foundations\node_modules\@kentcdodds\workshop-app\node_modules\@remix-run\router\dist\router.cjs.js:11:4519)
    at useNavigateUnstable (D:\kcd_apps\full-stack-foundations\node_modules\@kentcdodds\workshop-app\node_modules\react-router\dist\umd\react-router.development.js:11:3856)
    at useNavigate (D:\kcd_apps\full-stack-foundations\node_modules\@kentcdodds\workshop-app\node_modules\react-router\dist\umd\react-router.development.js:11:3740)
    at KCDShopIFrameSync (file:///D:/kcd_apps/full-stack-foundations/node_modules/@kentcdodds/workshop-app/build/utils/iframe-sync.js:6:20)
    at renderWithHooks (D:\kcd_apps\full-stack-foundations\node_modules\react-dom\cjs\react-dom-server.node.development.js:10:130591)
    at renderIndeterminateComponent (D:\kcd_apps\full-stack-foundations\node_modules\react-dom\cjs\react-dom-server.node.development.js:10:132952)
    at renderElement (D:\kcd_apps\full-stack-foundations\node_modules\react-dom\cjs\react-dom-server.node.development.js:10:139023)
    at renderNodeDestructiveImpl (D:\kcd_apps\full-stack-foundations\node_modules\react-dom\cjs\react-dom-server.node.development.js:10:141963)
    at renderNodeDestructive (D:\kcd_apps\full-stack-foundations\node_modules\react-dom\cjs\react-dom-server.node.development.js:10:141404)
    at renderNode (D:\kcd_apps\full-stack-foundations\node_modules\react-dom\cjs\react-dom-server.node.development.js:10:145082)
commented

I got the same error in WSL on Windows 11.

commented

It's probably because the kcdshop app is running with it's own version of @remix-run/react now (to avoid version conflicts), but I didn't consider how this would affect the iframe sync component which runs in the app. We are now shipping two versions of that package to the apps which is definitely not what we want.

I think I want to drastically rework how that component works. I think I'd prefer that it not know anything about the router... I'll try to get this fixed soon if nobody beats me to it. I'll definitely have it fixed before the workshop on Tuesday.

commented

it is something to do with bundleDependencies

@kentcdodds/workshop-app:
version 1.46.6 - work
version 1.46.7 - not work at all, can't find zod
version 1.46.8 - does not exist on npm
version 1.46.9 - first version with this issue

this bug is triggered by change is one of these commits
1.46.7 - not working - 74d908690a7238593f67b657b0d779c08c7abd0f - chore: fix deps
? 0bb199a031e7770fa6c108444db77bb07092bee1 - fix: ensure deps are ready to bundle in publish
? 1fabeab13217e2fe575638745ccbc4575469bf0b - chore: reduce the bundled dependencies
1.46.9 - bad a6ebe44c1081893f221bd9b98238b500c5417f3b - fix: trigger release

this is the error when tring to use 1.46.7

Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'zod' imported from C:\projects\kcd-apps\full-stack-foundations\node_modules\@kentcdodds\workshop-app\build\utils\apps.server.js
    at new NodeError (node:internal/errors:399:5)
    at packageResolve (node:internal/modules/esm/resolve:889:9)
    at moduleResolve (node:internal/modules/esm/resolve:938:20)
    at defaultResolve (node:internal/modules/esm/resolve:1153:11)
    at nextResolve (node:internal/modules/esm/loader:163:28)
    at ESMLoader.resolve (node:internal/modules/esm/loader:838:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:424:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:77:40)
    at link (node:internal/modules/esm/module_job:76:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}
commented

as a workaround (until the next bug pops up) you can use this

function Document({ children }: { children: React.ReactNode }) {
+	const navigate = useNavigate()
	return (
		<html lang="en" className="h-full overflow-x-hidden">
			<head>
				<Meta />
				<meta charSet="utf-8" />
				<meta name="viewport" content="width=device-width,initial-scale=1" />
				<Links />
			</head>
			<body className="flex h-full flex-col justify-between bg-background text-foreground">
				{children}
				<ScrollRestoration />
				<Scripts />
-				<KCDShopIFrameSync/>
+				<KCDShopIFrameSync navigate={navigate} />
				<LiveReload />
			</body>
		</html>
	)
}
-export function KCDShopIFrameSync() {
-	const navigate = useNavigate()
+export function KCDShopIFrameSync({ navigate }: { navigate: NavigateFunction }) {

	// communicate with parent
	useEffect(() => {
commented

Yeah, that seems like a reasonable workaround for now.

commented

👍 fixed