Property 'require' doesn't exist in react native error - reactjs

Question

I think this error from metro bundler,
here is the image for the error:
I try every solution on the net from the official react native GitHub issue.
also try deleting node modules
restart the cache
On the terminal, it didn't show any error but on the device, it threw an error. Any help?
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset',
'#babel/preset-typescript','#babel/preset-env'],
plugins: [
['#babel/plugin-proposal-class-properties'],
['module:react-native-dotenv',
{
moduleName: '#env',
path: '.env',
},
],
'react-native-reanimated/plugin',
[
'module-resolver',
{
root: ['./src/'],
alias: {
'#assets': './src/assets',
'#components': './src/components',
'#constants': './src/constants',
'#navigation': './src/navigations',
'#screens': './src/screens',
'#utils': './src/utils',
'#styles': './src/styles',
'#redux': './src/redux',
'#config': './src/config',
},
},
],
],
};
metro.config.js
module.exports = {
transformer: {
getTransformOptions: async () => ({
transform: {
experimentalImportSupport: false,
inlineRequires: true,
},
}),
},
};
jestConfig.ts
import mockAsyncStorage from '#react-native-async-storage/async-storage/jest/async-storage-mock';
import 'react-native-gesture-handler/jestSetup';
jest.mock('react-native/Libraries/EventEmitter/NativeEventEmitter');
jest.mock('react-native-keyboard-controller', () => ({}));
jest.mock('react-native-bootsplash', () => {
return {
hide: jest.fn(),
show: jest.fn(),
};
});
jest.mock('#notifee/react-native', () => ({}));
jest.mock('#react-native-async-storage/async-storage', () => mockAsyncStorage);
jest.mock('axios', () => {
return {
create: () => {
return {
get: jest.fn(),
post: jest.fn(),
put: jest.fn(),
interceptors: {
request: {eject: jest.fn(), use: jest.fn()},
response: {eject: jest.fn(), use: jest.fn()},
},
};
},
};
});
export {};
package.json
{
"name": "name",
"version": "0.0.1",
"private": true,
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
},
"dependencies": {
"#notifee/react-native": "^7.2.0",
"#react-native-async-storage/async-storage": "^1.17.10",
"#react-native-masked-view/masked-view": "^0.2.8",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/native": "^6.0.13",
"#react-navigation/native-stack": "^6.9.1",
"#reduxjs/toolkit": "^1.8.6",
"#shopify/flash-list": "^1.3.1",
"#types/lodash": "^4.14.191",
"axios": "^1.2.1",
"babel-plugin-module-resolver": "^4.1.0",
"native-base": "^3.4.22",
"react": "18.1.0",
"react-native": "0.70.6",
"react-native-bootsplash": "^4.3.2",
"react-native-dotenv": "^3.4.2",
"react-native-fast-image": "^8.6.3",
"react-native-gesture-handler": "^2.7.1",
"react-native-keyboard-controller": "^1.4.2",
"react-native-modal": "^13.0.1",
"react-native-pager-view": "^6.1.2",
"react-native-pusher-push-notifications": "^2.5.1",
"react-native-reanimated": "^2.11.0",
"react-native-responsive-screen": "^1.4.2",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "^3.18.2",
"react-native-svg": "12.1.1",
"react-native-tab-view": "^3.3.4",
"react-native-vector-icons": "^9.2.0",
"react-native-webview": "^11.26.0",
"react-redux": "^8.0.4",
"redux": "^4.2.0",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.2",
"ts-jest": "^29.0.3"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#babel/preset-env": "^7.20.2",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#babel/runtime": "^7.12.5",
"#react-native-community/eslint-config": "^2.0.0",
"#tsconfig/react-native": "^2.0.2",
"#types/jest": "29.0.3",
"#types/react": "^18.0.21",
"#types/react-native": "^0.70.6",
"#types/react-native-dotenv": "^0.2.0",
"#types/react-native-vector-icons": "^6.4.12",
"#types/react-test-renderer": "^18.0.0",
"#types/redux-logger": "^3.0.9",
"#types/redux-persist": "^4.3.1",
"#typescript-eslint/eslint-plugin": "^5.37.0",
"#typescript-eslint/parser": "^5.37.0",
"babel-jest": "29.0.3",
"babel-plugin-transform-require-context": "^0.1.1",
"eslint": "^7.32.0",
"jest": "29.0.3",
"metro-react-native-babel-preset": "0.72.3",
"react-native-typescript-transformer": "^1.2.13",
"react-test-renderer": "18.1.0",
"typescript": "^4.8.3"
},
"jest": {
"preset": "react-native",
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx",
"json",
"node"
],
"setupFiles": [
"./jestConfig.ts"
],
"transformIgnorePatterns": [
"node_modules/node_modules/react-native-responsive-screen/index.js"
]
}
}

Answer 1

This line:
import 'react-native-gesture-handler/jestSetup';
Should probably be something like:
import jestSetup from 'react-native-gesture-handler/jestSetup';
Check the documentation of the library how that import should work.