How to shim a dependency in babel.config.js in react-native? - react-native

Question

I've got a dependency I'd like to shim on my react-native project. I currently have the following code on my babel.config.js file:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
],
};
};
I've found the extension babel-plugin-module-resolver which seems to be helpful (any other alternative would work too) and tried to follow their examples but they didn't work
I've tried the following:
module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
[
'module-resolver',
{
root: ["./src"],
alias: {
'#dependency/to-shim': 'path/to-shimmer',
},
},
],
],
};
};
but that doesn't work

Answer 1

I've got the same error.
The code when running works correctly.
The problem is with build. The path still absolute.
babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['.'],
alias: {
'#services': './src/services',
},
},
],
'react-native-reanimated/plugin',
],
};
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#services*": ["./src/services"]
},
"allowUnreachableCode": false,
"allowUnusedLabels": false,
"esModuleInterop": true,
"importsNotUsedAsValues": "error",
"forceConsistentCasingInFileNames": true,
"jsx": "react",
"lib": ["esnext"],
"moduleResolution": "node",
"noFallthroughCasesInSwitch": true,
"noImplicitReturns": true,
"noImplicitUseStrict": false,
"noStrictGenericChecks": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"resolveJsonModule": true,
"skipLibCheck": true,
"strict": false,
"target": "esnext"
},
"include": ["src"],
"exclude": [
"node_modules",
"commitlint.config.js",
"metro.config.js",
"jest.config.js",
"babel.config.js"
]
}
screenshot - should be relative after build