I'm building a react(tsx
) app using Vite. My app gets stock-related info from Yahoo using yahoo-finance2 package.
When I'm running as a standalone js file, it is working as expected. But, when I use the same in react, I get an error as Uncaught ReferenceError: process is not defined. Here is my code.
import { useEffect, useState } from "react";
import "./index.css";
import yahooFinance from "yahoo-finance2";
function App() {
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
const getQuote = async () => {
setIsLoading(true);
try {
const response = await yahooFinance.quote("TSLA");
console.log(response);
} catch (err) {
console.error(err);
}
setIsLoading(false);
};
getQuote();
}, []);
return (
<div className="flex w-full h-screen justify-center items-center">
<div className="text-lg">{isLoading ? `Loading...` : `Hello world!`}</div>
</div>
);
}
export default App;
Can someone please let me know where I'm going wrong? Here is my repo, if helpful. Thanks!
This is not exactly an answer, but after looking at many options I believe I found a much better source for the information you need. The API is very well documented. Here is the code I use to access quotes from alphavantage.co.
async function updateExchangeRate() {
fetch('https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=IBM&interval=5min&apikey=demo')
.then((response) => {
return response.json()
})
.then((data) => {
console.log(data)
})
}
It was trivial to instantaneously get an apikey (to replace "demo" in the url above).