Application Error - Githubissues

onemen commented 1 year ago

@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)

mapringg commented 1 year ago

I got the same error in WSL on Windows 11.

kentcdodds commented 1 year ago

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.

onemen commented 1 year ago

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'
}

onemen commented 1 year ago

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(() => {

kentcdodds commented 1 year ago

Yeah, that seems like a reasonable workaround for now.

onemen commented 1 year ago

👍 fixed

epicweb-dev / full-stack-foundations

Application Error #10