CODEWITHSUNDEEP
reactjsenvironment-variablesnative
Rogue
Rogue

Reputation: 21

React native-env file could not be found within the project

Unable to resolve module @env from D:\react\weatho\weatho-app\App.js: @env could not be found within the project

10:import {REACT_APP_WEATHER_API_KEY} from "@env";

my env file looks like this:

REACT_APP_WEATHER_API_KEY=2607fb610e6f9fecd16c84408d0b42a2

and my Babel file looks like this:

  module.exports = function(api) {
        api.cache(true);
        return {
        plugin: ['babel-preset-expo','module:react-native-dotenv'],
     }
   }

and my env file is in root folder along with Appjson and few other files

Upvotes: 2

Views: 7962

Answers (5)

Karan Gupta
Karan Gupta

Reputation: 1

You can try the following changes to babel.config.js file and it should work fine:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module:react-native-dotenv",
        {
          moduleName: "@env",
          path: ".env",
        },
      ],
    ],
  };
};

Make sure you restart the app a couple of times to see the changes. The .env file needs to be in the root directory.

Upvotes: 0

Henry2
Henry2

Reputation: 409

very good way to fix this is to replace the "@env" with "react-native-dotenv" after moduleName like so : plugins:[ [ "module:react-native-dotenv", { moduleName:"react-native-dotenv", path:".env", }, ] ] and when you're done implement it in your screen example : import { API_KEY } from "react-native-dotenv";

Upvotes: 1

Khalil
Khalil

Reputation: 11

yarn start --reset-cache
npm start -- --reset-cache
expo start -c

Upvotes: 1

Sachin Saini
Sachin Saini

Reputation: 401

You should add a plugin like this(.env file must be in the root directory)

module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
  [
    "module:react-native-dotenv",
    {
      moduleName: "@env",
      path: ".env",
    },
  ],
],
};
};

And don't forget to restart the expo start and ios/android restart the app.

If you are still getting the same issue then it can be a cache issue.

You can easily clear the babel cache by running the following command :

rm -rf node_modules/.cache/babel-loader/*

or

yarn start --reset-cache

or

expo r -c

Upvotes: 4

Gee
Gee

Reputation: 1418

Your babel config has 'plugin' which should be 'plugins'

Upvotes: 2

Related Questions