Replies: 3 comments 3 replies
-
|
Hi, shouldn't the linter point at the "offending" line of code? I wonder if this could be a bug in the React Compiler linter. Got a repository to look at? |
Beta Was this translation helpful? Give feedback.
-
|
Although I didn't understand the message, but probably you are asking the line number of code where it arising the error or you want to get a repository to solve the problem. If your questions is this, then yea its providing the offending line number- from my above component, you will see a const onSubmit: SubmitHandler<ReceiptFormInput> = async (value) => {
let sigUrl: string;
if (sig) {
const { blob } = await upload(ref.current?.toFile());
sigUrl = blob?.url || ""
} else {
sigUrl = item.signature
}
if (template) {
mutate({
...value,
templateId: template.templateId,
previewUrl: template.previewUrl,
signature: sigUrl,
id: item.id
});
}
}from this handler I am reading a ref value- const { blob } = await upload(ref.current?.toFile());So react compiler throwing error here by saying- |
Beta Was this translation helpful? Give feedback.
-
|
As said before this is likely raised by the React Compiler linter. What is: const { upload, isUploading } = useUpload({
onError: (error) => {
toast.error(error.message)
}
});
|
Beta Was this translation helpful? Give feedback.
-
|
Oo, yea this is a custom hook created by me to upload file to vercel storage. And its coming from an internal package(I am using turborepo for creating this package) Here is the code of this- "use client"
import { useState } from "react";
import { type PutBlobResult, BlobError } from "@vercel/blob";
import { upload as vercelUpload } from "@vercel/blob/client";
//Utils
import { uniqueFilename } from "./client";
//Types
type UseUploadOptions = {
onError?: (error: { message: string }) => void;
ext?: string;
};
export type UseUploadResponse = {
blob: PutBlobResult | null;
}
type UploadConfig = {
url?: string | null;
}
export const useUpload = (options?: UseUploadOptions) => {
const [isUploading, setIsUploading] = useState(false);
const [isSuccess, setIsSuccess] = useState(false);
const [error, setError] = useState<string>("");
const upload = async (file: File | Blob | undefined | null, config?: UploadConfig): Promise<UseUploadResponse> => {
if (!file) return {
blob: null
}
try {
setIsUploading(true);
setIsSuccess(false);
if (config?.url) {
fetch("/api/blob", {
method: "DELETE",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ url: config.url }),
keepalive: true
}).catch(() => { });
}
const folder = process.env.NEXT_PUBLIC_BLOB_FOLDER_NAME || "common";
const newBlob = await vercelUpload(`${folder}/${uniqueFilename((file as File).name, options?.ext)}`, file, {
access: "public",
handleUploadUrl: "/api/blob"
})
return {
blob: newBlob
};
} catch (error) {
if (error instanceof BlobError) {
const message = error?.message || "Something went wrong on file uploading"
options?.onError?.({ message });
setError(message);
} else {
const message = "Something went wrong on file uploading"
options?.onError?.({ message });
setError(message);
}
return {
blob: null
}
} finally {
setIsUploading(false);
setIsSuccess(true);
}
};
return { isUploading, upload, isSuccess, error };
};And I am using by installing package in my nextjs apps on the above component- import { useUpload } from "@repo/blob";So I am not reading any refs in this hook. then on that component, when form submitted I need to get canvas file from ref to upload const onSubmit: SubmitHandler<ReceiptFormInput> = async (value) => {
let sigUrl: string;
if (sig) {
const { blob } = await upload(ref.current?.toFile());
sigUrl = blob?.url || ""
} else {
sigUrl = item.signature
}
if (template) {
mutate({
...value,
templateId: template.templateId,
previewUrl: template.previewUrl,
signature: sigUrl,
id: item.id
});
}
}So this is my pattern actually. I will be happy if you have suggestions to improve the pattern. Here is the linter error, It can be from React Compiler linter- 
|
Beta Was this translation helpful? Give feedback.
-
|
I was able to reproduce in a Vite app (no Next.js), just copied the example from https://react-hook-form.com/get-started, and added a ref into the import { useRef } from "react"
import { useForm, type SubmitHandler } from "react-hook-form"
type Inputs = {
example: string
exampleRequired: string
}
export default function App() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm<Inputs>()
const ref = useRef(null);
const onSubmit: SubmitHandler<Inputs> = async (data: unknown) => {
console.log(data, ref.current)
}
return (
/* "handleSubmit" will validate your inputs before invoking "onSubmit" */
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input defaultValue="test" {...register("example")} />
{/* include validation with required or other standard HTML validation rules */}
<input {...register("exampleRequired", { required: true })} />
{/* errors will return when field validation fails */}
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
)
}Using, eslint-plugin-react-hooks: And this ESLint file: import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
])So it looks like it has to be reported to facebook/react or the react-hook-form repositories. 25:34 error Error: Cannot access refs during render
React refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the `current` property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef).
/react-hook-form-test/src/App.tsx:25:34
23 | return (
24 | /* "handleSubmit" will validate your inputs before invoking "onSubmit" */
> 25 | <form onSubmit={handleSubmit(onSubmit)}>
| ^^^^^^^^ Passing a ref to a function may read its value during render
26 | {/* register your input into the hook by invoking the "register" function */}
27 | <input defaultValue="test" {...register("example")} />
28 | react-hooks/refs
✖ 1 problem (1 error, 0 warnings) |
Beta Was this translation helpful? Give feedback.
-
|
Okay, I can understand. So I am reporting on their thanks for your kind help. Now I am totally clear that its not any issues from my end. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
A linting error I am getting-
Here is the component-
I am not calling ref during render time. Its on a
onSubmithandler. Is onSubmit will call render time. What will be suggestions to get rid off this lint error. As it is onSubmut handler so it should be event handler. Event handler should not run during render.Beta Was this translation helpful? Give feedback.
All reactions