Question 244314 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Api key doesn't work when i import it from .env, but works when i use it directly

I’ve started my project with Vite.

When I directly use my api key instead of importing it from .env, it works. But when I use it like this I get the error below on the console.

{status_code: 7, status_message: ‘Invalid API key: You must be granted a valid key.’, success: false}

Here’s my code

const apiKey = import.meta.env.REACT_APP_API_KEY;

  const getMovies = () => {
    fetch(`https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}`)
      .then((res) => res.json())
      .then((json) => console.log(json))
      .catch((err) => console.log(err));
  };

  useEffect(() => {
    return () => {
      getMovies();
    };
  }, []);
Tags:

3

Answers


  1. 0

    It seems that you are trying to access an environment variable from your .env file using import.meta.env.REACT_APP_API_KEY. However, according to the Vite documentation, only environment variables prefixed with VITE_ are exposed to your Vite-processed code. To access your API key, you should prefix it with VITE_ in your .env file and then access it using import.meta.env.VITE_REACT_APP_API_KEY. For example, in your .env file, you should have something like this:

    VITE_REACT_APP_API_KEY=your_api_key

    And then in your code, you can access it like this:

    const apiKey = import.meta.env.VITE_REACT_APP_API_KEY;

    I hope this helps..

    Login or Signup to reply.
  2. 0

    the variable names in the .env files should start with REACT_APP.
    like : REACT_APP_API_KEY = 1234
    and for using this variable in you’re app you shouldn’t import it. instead, you should use this variable like this: process.env.REACT_APP_API_KEY.

    example : {process.env.REACT_APP_API_KEY}

    Login or Signup to reply.
  3. 0

    The error message you’re receiving, "Invalid API key: You must be granted a valid key," suggests that there might be an issue with how the API key is being read from your environment variables. The code you provided for reading the API key from .env looks correct, but there could be some reasons why it’s not working as expected.

    Here are some troubleshooting steps you can follow:

    1. Check .env File: First, make sure that your .env file is correctly configured and contains the REACT_APP_API_KEY variable with the correct API key value.

    2. Restart the Development Server: After making changes to your .env file, you should restart your development server to ensure that the changes are picked up.

    3. Ensure .env Variables Start with REACT_APP_: Environment variables in React applications must start with REACT_APP_. Make sure your .env variable is named REACT_APP_API_KEY.

    4. Check for Typos or Extra Whitespaces: Ensure that there are no typos or extra whitespaces in your API key or variable names in the .env file.

    5. Verify that .env is in the Root Directory: The .env file should be located in the root directory of your React project.

    6. Security: Double-check that your API key is correct and hasn’t changed. Sometimes, API providers may regenerate keys, which would invalidate the old one.

    7. React Scripts Version: Ensure you are using a version of react-scripts that supports environment variables in .env files. Newer versions of create-react-app and react-scripts provide better support for environment variables.

    8. Bundler Caching: Sometimes, the bundler might cache environment variables. Try clearing your project’s build cache by running:

      npm start -- --reset-cache

    9. Browser Cache: Clear your browser’s cache and try reloading the application.

    10. Testing Locally: Try printing the apiKey variable to the console to ensure that it’s being read correctly from the environment variables. For example:

      console.log(apiKey);

    Verify that it displays the correct API key in the console.

    If you’ve checked all of the above and are still experiencing issues, it’s possible that there’s an issue specific to your development environment or setup. In such cases, consider seeking help from a colleague or developer familiar with your development environment to assist in debugging the problem.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search