Jest cannot find module #env React Native - reactjs

Question

I'm currently facing some problem I'm using in my react native app https://github.com/goatandsheep/react-native-dotenv for handling .env.
Error => Cannot find module '#env' from 'src/api/api.ts'
I'm testing currently my redux saga to call the api endpoint:
import axios from 'axios';
import {API_URL} from '#env';
export default axios.create({
baseURL: API_URL,
responseType: 'json',
});
API Endpoint
export const sendCheckNumber = async (
phoneNumber: string,
): Promise<AuthenticationTO> => {
const response = await axios.get<AuthenticationTO>(
`SendCheckNumber/${phoneNumber}`,
);
return response.data;
};
I'm using ts-jest package.json. I saw in the docs its possible to include bable in ts-jest because I'm using bable to import the 'module:react-native-dotenv', as plugin. I thought that will already solve my problem but unfortunately it still fails. Maybe someone of you have some suggestion what could cause this error.
Thank you!!!
package.json
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
"\\.(ts|tsx)$": "ts-jest"
},
"globals": {
"ts-jest": {
"babelConfig": "babel.config.js",
"tsConfig": "tsconfig.jest.json"
}
},
"moduleFileExtensions": [
"ts",
"tsx",
"js"
],
"modulePaths": [
"<rootDir>/src"
],
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$"
}

Answer 1

Maintainer goatandsheep here. I recently added some documentation on how this is done. Take a look at the documentation section on TypeScript. Here is the excerpt:
Create a types folder in your project
Inside that folder, create a *.d.tsfile, say, env.d.ts
in that file, declare a module as the following format:
declare module '#env' {
export const API_BASE: string;
}
Add all of your .env variables inside this module.
Finally, add this folder into the typeRoots field in your tsconfig.json file:
{
"typeRoots": ["./src/types"],
}
Let me know if that works!

Answer 2

I fixed this problem like following.
import {API_URL} from '#env';`
Added this instead:
import {API_URL} from 'react-native-dotenv';
And add the next in babel.config.js
module.exports = function (api) {
api.cache(true)
return {
presets: ["babel-preset-expo"],
plugins: [
[
"module:react-native-dotenv",
{
moduleName: "react-native-dotenv",
},
],
],
}
}
It works well for me.