Open rodrigodiasf1984 opened 11 months ago
You should include env.d.ts to your tsconfig.ts file, like this:
{
"extends": "@tsconfig/react-native/tsconfig.json",
....
"include": [
....
"./env.d.ts"
],
"exclude": ["node_modules"]
}
You should include env.d.ts to your tsconfig.ts file, like this:
{ "extends": "@tsconfig/react-native/tsconfig.json", .... "include": [ .... "./env.d.ts" ], "exclude": ["node_modules"] }
Didn't work for me :
And now I'm getting another error on className:
Any idea how to solve it? Am I missing something?
@rodrigodiasf1984 try to delete /* eslint-disable @typescript-....
on the first line and then restart IDE with reset cache.
And about className
— React Native haven't got this property.
@rodrigodiasf1984 try to delete
/* eslint-disable @typescript-....
on the first line and then restart IDE with reset cache.And about
className
— React Native hasn't got this property.
Sorry, but I don't see how removing the eslint-disable for any could help ;
I've used this "/ eslint-disable @typescript-eslint/no-explicit-any /" because I don't know how to type the ref of googleAutocomplete correctly, so I add this to avoid the error
Hello, did you find any solution? I'm facing by the same issue
Hello, did you find any solution? I'm facing by the same issue
Not yet, let me know if you find it.
@rodrigodiasf1984 @ser-emejia try to add this:
"include": [
"src/**/*.ts", <-- !!
"src/**/*.tsx", <-- !!
"./env.d.ts",
],
Because you override these values when you extend your configuration
@rodrigodiasf1984 @ser-emejia try to add this:
"include": [ "src/**/*.ts", <-- !! "src/**/*.tsx", <-- !! "./env.d.ts", ],
Because you override these values when you extend your configuration
Hi @exzos28 It doesn´t work for me,
And now I'm getting a lot of errors after adding the include on my tsconfig.json
@rodrigodiasf1984 anyway it's not a problem of this package, you should find why your ts config doesn't work
On my side, removing "include": ["env.d.tsx"]
from tsconfig.json
solved the problem
On my side, removing
"include": ["env.d.tsx"]
fromtsconfig.json
solved the problem
Hi erwannbst, I didn't the include on my tsconfig and I'm still getting the error, I've tried to delete, mobe the env.d.ts to the root of the project but the error persist.
This is the config I use which is working for me : tsconfig.json
{
"extends": "@tsconfig/react-native/tsconfig.json",
"exclude": ["node_modules"],
"compilerOptions": {
"jsx": "react",
"paths": {
"@/*": ["./features/*"],
"typeRoots": ["./src/types"]
}
}
}
babel.config.js
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
[
"module:react-native-dotenv",
{
envName: "APP_ENV",
moduleName: "@env",
path: ".env",
blocklist: null,
allowlist: null,
safe: true,
allowUndefined: false,
verbose: false,
},
],
],
};
My .env
and .env.d.ts
are at the root of my repository, not in ./types/
Hope it will solve your problem
@erwannbst thanks for your answer, I've tried what you said, but it didn't work for me.
hi i was able to recreate this issue. I'm working on it.
react-native-dotenv should be a dev dependency (I see this mistake in your code)
here's what I tried:
Every time I get a weird error, I make sure to run react-native start --reset-cache
If you are using ./types
for your types, i use
tsconfig.json
"compilerOptions": {
"baseUrl": "types",
"typeRoots": ["./types"],
}
I tried esModuleInterop
and it didn't really break it. Make sure the app is setup properly:
npm i -D path
react-native start --reset-cache
Hi @goatandsheep thanks for your help!
I've moved this package to dev dependencies
I've update the tsconfig:
but I can't remove "node_modules/@types" from typeRoots, if I do, I get errors with jest everywhere. Take a look at the image bellow:
with the modifications you suggest, I'm still getting the same typescript error:
this is my babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
'nativewind/babel',
'react-native-reanimated/plugin',
[
'module:react-native-dotenv',
{
moduleName: '@env',
path: '.env',
allowUndefined: false,
},
],
],
};
There's two options I recommend:
1) skip the import {GOOGLE_MAPS_APIKEY} from @env
and switch to process.env.GOOGLE_MAPS_APIKEY
if that doesn't work: 2) rename @env
as react-native-dotenv:
env.d.ts
declare module 'react-native-dotenv' {
...
babel.config.js
...
moduleName: 'react-native-dotenv'
...
index.tsx
import {GOOGLE_MAPS_APIKEY} from 'react-native-dotenv'
Hi @goatandsheep thanks for your help, i've tried what you suggested and the typescript error has gone when I use the process.env.GOOGLE_MAPS_APIKEY but the maps don't work as expected. So I reverted the modifications and kept using the / eslint-disable import/no-unresolved /
Okay I spent the past 2 days figuring out issues with the library and will be overhauling docs again in a few days. Take a look at the wiki for the docs Todo if you need an immediate answer.
There's two options I recommend:
- skip the
import {GOOGLE_MAPS_APIKEY} from @env
and switch toprocess.env.GOOGLE_MAPS_APIKEY
if that doesn't work: 2) rename
@env
as react-native-dotenv:env.d.ts
declare module 'react-native-dotenv' { ...
babel.config.js
... moduleName: 'react-native-dotenv' ...
index.tsx
import {GOOGLE_MAPS_APIKEY} from 'react-native-dotenv'
Second variant helped me My files structure
├── .env
├── index.js
├── src
│ └── index.tsx
└── types
├── index.d.ts
└── env.d.ts
my tsconfig.json
{
...
"include": [
"./src/**/*",
"./App.tsx",
"./types/env.d.ts",
"./types/index.d.ts"
]
...
}
my babel.config.js
module.exports = {
presets: ['module:@react-native/babel-preset'],
plugins: [
[
'module:react-native-dotenv',
{
moduleName: 'react-native-dotenv',
},
],
],
};
env.d.ts
declare module 'react-native-dotenv' {
...
}
Worked for me but when I used "react-native-dotenv" as the module name, TypeScript was having issues resolving stuff, so I used "dotenv" instead and it worked.
Describe the bug Hi guys I'm getting this error when import the GOOGLE_MAPS_APIKEY from '@env' I've followed the official documentation, an previous issue and this tutorial, sorry but I don't know what I'm missing.
To Reproduce Steps to reproduce the behavior:
Expected behavior import the env var without error
Screenshots
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context Babel-config:
module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ 'nativewind/babel', 'react-native-reanimated/plugin', [ 'module:react-native-dotenv', { moduleName: '@env', path: '.env', allowUndefined: false, }, ], ], };
env.d.ts
declare module '@env' { export const GOOGLE_MAPS_APIKEY: string; }
package json:
"dependencies": { "@aws-amplify/api": "^5.4.4", "@gorhom/bottom-sheet": "^4.4.5", "@hookform/resolvers": "^2.9.10", "@notifee/react-native": "^7.8.0", "@react-native-async-storage/async-storage": "^1.17.11", "@react-native-community/datetimepicker": "^6.7.5", "@react-native-community/netinfo": "^9.3.7", "@react-native-firebase/app": "^14.11.0", "@react-native-firebase/messaging": "^14.11.0", "@react-native-masked-view/masked-view": "0.2.8", "@react-navigation/native": "^6.0.13", "@react-navigation/native-stack": "^6.9.1", "@react-navigation/stack": "^6.3.4", "@shopify/flash-list": "^1.4.2", "aws-amplify": "^5.0.14", "clsx": "^1.2.1", "date-fns": "^2.29.3", "lottie-react-native": "^5.1.6", "nativewind": "^2.0.11", "phosphor-react-native": "^1.1.2", "react": "18.1.0", "react-hook-form": "^7.39.4", "react-native": "0.70.6", "react-native-actions-sheet": "^0.8.29", "react-native-background-fetch": "4.1.5", "react-native-background-geolocation": "4.10.1", "react-native-biometrics": "^3.0.1", "react-native-confirmation-code-field": "^7.3.1", "react-native-contacts": "^7.0.5", "react-native-device-info": "^10.4.0", "react-native-dotenv": "^3.4.9", "react-native-dropdown-picker": "^5.4.6", "react-native-flash-message": "^0.4.0", "react-native-floating-label-input": "^1.4.2", "react-native-gesture-handler": "~2.8.0", "react-native-google-places-autocomplete": "^2.5.1", "react-native-image-crop-picker": "^0.37.3", "react-native-iphone-x-helper": "^1.3.1", "react-native-maps": "^1.3.2", "react-native-modal-datetime-picker": "^14.0.1", "react-native-open-maps": "^0.4.0", "react-native-permissions": "^3.6.1", "react-native-phone-number-input": "^2.1.0", "react-native-ratings": "^8.1.0", "react-native-reanimated": "^2.14.4", "react-native-responsive-screen": "^1.4.2", "react-native-safe-area-context": "4.4.1", "react-native-screens": "~3.18.0", "react-native-splash-screen": "^3.3.0", "react-native-svg": "^13.9.0", "react-native-svg-transformer": "^1.0.0", "react-native-swipe-gestures": "^1.0.5", "react-native-swipe-list-view": "^3.2.9", "react-native-tooltip-2": "^0.1.3", "react-native-version-check": "^3.4.7", "react-native-webview": "^13.2.3", "redux-persist": "^6.0.0", "rn-swipe-button": "^1.3.8", "tailwindcss": "3.3.2", "yup": "^0.32.11", "zustand": "^4.3.6" }, "devDependencies": { "@babel/core": "^7.12.9", "@babel/runtime": "^7.12.5", "@testing-library/jest-native": "^5.4.1", "@testing-library/react-native": "^11.5.1", "@tsconfig/react-native": "^2.0.2", "@types/jest": "^29.4.0", "@types/react": "^17.0.43", "@types/react-native": "^0.70.11", "@types/react-native-dotenv": "^0.2.0", "@types/react-native-version-check": "^3.4.5", "@types/react-test-renderer": "^18.0.0", "@typescript-eslint/eslint-plugin": "^6.4.0", "babel-plugin-module-resolver": "^5.0.0", "eslint": "^8.0.1", "eslint-config-airbnb": "^19.0.4", "eslint-config-airbnb-typescript": "^17.1.0", "eslint-config-prettier": "^9.0.0", "eslint-config-standard-with-typescript": "^39.0.0", "eslint-import-resolver-babel-module": "^5.3.2", "eslint-plugin-import": "^2.28.1", "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-n": "^15.0.0 || ^16.0.0 ", "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-promise": "^6.0.0", "eslint-plugin-react": "^7.33.2", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-native": "^4.0.0", "jest": "^29.6.4", "jest-transform-stub": "^2.0.0", "metro-react-native-babel-preset": "0.72.3", "prettier": "^3.0.3", "react-native-clean-project": "^4.0.1", "react-test-renderer": "^18.2.0", "typescript": "*" }, "resolutions": { "@types/react": "17.0.43", "@types/react-native": "~0.70.6" } }