I get this error
get @ @google-cloud_vision.js?t=1718885447253&v=dfd5bd38:24811
Show 1 more frame
Show less
@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:24910 Uncaught TypeError: Class extends value undefined is not a constructor or null
at node_modules/google-auth-library/build/src/auth/authclient.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:24910:45)
at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
at node_modules/google-auth-library/build/src/auth/oauth2client.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:25051:24)
at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
at node_modules/google-auth-library/build/src/auth/computeclient.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:25700:26)
at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
at node_modules/google-auth-library/build/src/auth/googleauth.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:29193:27)
at __require2 (chunk-WGAPYIUP.js?v=dfd5bd38:19:50)
at node_modules/google-auth-library/build/src/index.js (@google-cloud_vision.js?t=1718885447253&v=dfd5bd38:30145:24)
I have carefully followed this documentation
here is my code
import React, { useState } from 'react';
import vision from '@google-cloud/vision'
const Scan = () => {
const [imageFile, setImageFile] = useState(null);
const [text, setText] = useState('');
const keyFilename = '../../../../CloudVision.json';
const handleImageChange = (event) => {
const newImageFile = event.target.files[0];
setImageFile(newImageFile);
};
const detectText = async () => {
if (!imageFile) {
return;
}
try {
const client = new vision.ImageAnnotatorClient({
keyFilename,
});
const [result] = await client.textDetection(imageFile);
const fullTextAnnotation = result.fullTextAnnotation;
setText(fullTextAnnotation.text);
} catch (error) {
console.error('Error:', error);
// Handle errors appropriately (e.g., display an error message)
}`your text`
};
return (
<div id='Scan'>
<input type="file" accept="image/*" onChange={handleImageChange} />
<button onClick={detectText}>Detect Text</button>
{text && <p>Extracted Text: {text}</p>}
</div>
);
};
export default Scan;