如何在使用 yarn 和 vite 设置的 React 应用程序中使用 process.env 访问 API 密钥

Question

I'm trying to build an e-commerce app and I have used yarn create vite to begin my app build.

I'm trying to store my API key and url in a.env file.

I'm attempting to access the variables in the.env file using this code:

   useEffect(() => {
      const fetchData = async () => {
         try {
            const data = await axios.get(
               process.env.REACT_APP_API_URL + "/products",
               {
                  headers: {
                     Authorization: "bearer" + process.env.REACT_APP_API_TOKEN,
                  },
               }
            )
            console.log(data)
         } catch (err) {
            console.log(err)
         }
      }
      fetchData()
   }, [])

When I open the console in the browser, I am getting the following error:

ReferenceError: process is not defined

Any idea on how I can define process to use process.env to access the API variables?

Answer 1

Reading the documentation provided by clxrity. I changed code and variable names to what is shown below and everything worked fine:

 useEffect(() => {
  const fetchData = async () => {
     try {
        const data = await axios.get(
           `${import.meta.env.VITE_APP_API_URL}/products`,
           {
              headers: {
                 Authorization: `bearer ${
                    import.meta.env.VITE_APP_API_TOKEN
                 }`,
              },
           }
        )
        console.log(data)
     } catch (err) {
        console.log(err)
     }
  }
  fetchData()

}, [])