blitz-js / blitz-js/legacy-framework

useAuthorizeIf is not a function

Open
#995 0 comments 0 reactions 0 assignees View on GitHub
kind/bug status/triage
Dominant language
JavaScript
Stars
3
Forks
2
PR merge metrics
No merged PRs in 30d

Description

### What is the problem?

I get
```ts
400 (0 , next_stdlib__WEBPACK_IMPORTED_MODULE_0__.useAuthorizeIf) is not a function.
````
when I use useAuthorizeIf hook like this
```ts
import { BlitzLayout, Head, useAuthorizeIf, useSession } from "blitz"
const Layout: BlitzLayout<{ title?: string; children?: React.ReactNode }> = ({
title,
children,
}) => {
const session = useSession()
useAuthorizeIf(session.role !== "ASSISTANT")
return (
...
)
}
Layout.authenticate = true
export default Layout
```

### Paste all your error logs here:

```js
Layout.tsx?d954:11 Uncaught TypeError: (0 , next_stdlib__WEBPACK_IMPORTED_MODULE_0__.useAuthorizeIf) is not a function
at Layout (Layout.tsx?d954:11:30)
at renderWithHooks (react-dom.development.js?61bb:16141:1)
at mountIndeterminateComponent (react-dom.development.js?61bb:20838:1)
at beginWork (react-dom.development.js?61bb:22342:1)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:4157:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:4206:1)
at invokeGuardedCallback (react-dom.development.js?61bb:4270:1)
at beginWork$1 (react-dom.development.js?61bb:27243:1)
at performUnitOfWork (react-dom.development.js?61bb:26392:1)
at workLoopSync (react-dom.development.js?61bb:26303:1)
at renderRootSync (react-dom.development.js?61bb:26271:1)
at recoverFromConcurrentError (react-dom.development.js?61bb:25689:1)
at performConcurrentWorkOnRoot (react-dom.development.js?61bb:25589:1)
at workLoop (scheduler.development.js?1911:266:1)
at flushWork (scheduler.development.js?1911:239:1)
at MessagePort.performWorkUntilDeadline (scheduler.development.js?1911:533:1)
Layout @ Layout.tsx?d954:11
renderWithHooks @ react-dom.development.js?61bb:16141
mountIndeterminateComponent @ react-dom.development.js?61bb:20838
beginWork @ react-dom.development.js?61bb:22342
callCallback @ react-dom.development.js?61bb:4157
invokeGuardedCallbackDev @ react-dom.development.js?61bb:4206
invokeGuardedCallback @ react-dom.development.js?61bb:4270
beginWork$1 @ react-dom.development.js?61bb:27243
performUnitOfWork @ react-dom.development.js?61bb:26392
workLoopSync @ react-dom.development.js?61bb:26303
renderRootSync @ react-dom.development.js?61bb:26271
recoverFromConcurrentError @ react-dom.development.js?61bb:25689
performConcurrentWorkOnRoot @ react-dom.development.js?61bb:25589
workLoop @ scheduler.development.js?1911:266
flushWork @ scheduler.development.js?1911:239
performWorkUntilDeadline @ scheduler.development.js?1911:533

```

### Paste all relevant code snippets here:

```ts
import { BlitzLayout, Head, useAuthorizeIf, useSession } from "blitz"
const Layout: BlitzLayout<{ title?: string; children?: React.ReactNode }> = ({
title,
children,
}) => {
const session = useSession()
useAuthorizeIf(session.role !== "ASSISTANT")
return (
...
)
}
Layout.authenticate = true
export default Layout
```

### What are detailed steps to reproduce this?

1. use useAuthorizeIf() in a client component.

### Run `blitz -v` and paste the output here:

```
blitz: 0.45.4 (local)

Package manager: yarn
System:
OS: Linux 5.15 Manjaro Linux
CPU: (4) x64 Intel(R) Core(TM) i5-7500 CPU @ 3.40GHz
Memory: 9.85 GB / 15.52 GB
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 16.16.0 - /tmp/xfs-9606401c/node
Yarn: 3.2.1 - /tmp/xfs-9606401c/yarn
npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm
Watchman: Not Found
npmPackages:
@prisma/client: ^4.0.0 => 4.0.0
blitz: 0.45.4 => 0.45.4
prisma: ^4.0.0 => 4.0.0
react: 18.0.0 => 18.0.0
react-dom: 18.0.0 => 18.0.0
typescript: ~4.5 => 4.5.5
```

### Please include below any other applicable logs and screenshots that show your problem:

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the Layout.tsx reproduction and inspect the Blitz 0.45.4 export behind the `useAuthorizeIf` import. Reproduce the runtime error, then trace the hook's export and implementation to determine why it is not callable. Done means the shown client component can use the hook without the reported TypeError.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.