blitz-js / blitz-js/legacy-framework
useAuthorizeIf is not a function
- 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
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