Browser build is trying to access `process` var. Should type check before access.

[sunnykeerthi]

Bug Report

Describe the bug

Unable to run this in a react application. I get an error as Uncaught ReferenceError: process is not defined. Not sure if this is caused by my project.

Minimal Reproduction

Here is my repo.

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;

Environment

Browser or Node: Node version (if applicable): 18.17.0 Npm version: 10.1.0 Browser verion (if applicable): Library version: 2.9.0

Additional Context

Building a react app using Vite. When I try running this as a standalone js file, it works but isn't in react(tsx).

Thanks

[gadicc]

Hey @sunnykeerthi, thanks for reporting.

Uh yeah, this is definitely a bug on our side, we shouldn't be trying to access process in the browser build. Will take a look at that when I get a chance.

However, I have to warn you, running yf2 in the browser brings a lot of extra challenges, because Yahoo will block the browser request with its CORS policy. There are ways around this by running your own CORS proxy server, but that's nothing we can help you with. I strongly suggest you use yf2 from the server part of your app, even if it just means having a small API to forward the client/browser's request.

[sunnykeerthi]

Thanks for the quick response @gadicc. I'll handle the bridge part as you suggested.