I set up a pipeline on a CI/CD (Azure Devops) to build my react native app, specifically for android.
Even though it builds correctly on my local mac (Mac OS 12.1), and assembles to a valid APK correctly, the same build step throws an error in the pipeline either using a Mac agent (MacOS 10.15 | 11), or Linux agents (Ubuntu 18.04 | 20.04).
This is the error:
> Task :app:bundleProductionReleaseJsAndAssets FAILED
Error: Cannot find module 'babel-plugin-module-resolver'
Require stack:
- /Users/runner/work/1/s/babel.config.js
- /Users/runner/work/1/s/node_modules/@babel/core/lib/config/files/module-types.js
- /Users/runner/work/1/s/node_modules/@babel/core/lib/config/files/configuration.js
- /Users/runner/work/1/s/node_modules/@babel/core/lib/config/files/index.js
- /Users/runner/work/1/s/node_modules/@babel/core/lib/index.js
- /Users/runner/work/1/s/node_modules/metro-react-native-babel-transformer/src/index.js
- /Users/runner/work/1/s/node_modules/metro-transform-worker/src/index.js
- /Users/runner/work/1/s/node_modules/metro/src/DeltaBundler/Worker.js
error index.js: Cannot find module 'babel-plugin-module-resolver'
Require stack:
- /Users/runner/work/1/s/babel.config.js
- /Users/runner/work/1/s/node_modules/@babel/core/lib/config/files/module-types.js
- /Users/runner/work/1/s/node_modules/@babel/core/lib/config/files/configuration.js
- /Users/runner/work/1/s/node_modules/@babel/core/lib/config/files/index.js
- /Users/runner/work/1/s/node_modules/@babel/core/lib/index.js
- /Users/runner/work/1/s/node_modules/metro-react-native-babel-transformer/src/index.js
- /Users/runner/work/1/s/node_modules/metro-transform-worker/src/index.js
- /Users/runner/work/1/s/node_modules/metro/src/DeltaBundler/Worker.js
- /Users/runner/work/1/s/node_modules/metro/node_modules/jest-worker/build/workers/processChild.js.
- /Users/runner/work/1/s/node_modules/metro/node_modules/jest-worker/build/workers/processChild.js
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:902:15)
at Function.resolve (internal/modules/cjs/helpers.js:98:19)
at module.exports (/Users/runner/work/1/s/babel.config.js:7:17)
at readConfigJS (/Users/runner/work/1/s/node_modules/@babel/core/lib/config/files/configuration.js:227:15)
at readConfigJS.next (<anonymous>)
at Function.<anonymous> (/Users/runner/work/1/s/node_modules/@babel/core/lib/gensync-utils/async.js:25:3)
at Generator.next (<anonymous>)
at evaluateSync (/Users/runner/work/1/s/node_modules/gensync/index.js:251:28)
at Function.sync (/Users/runner/work/1/s/node_modules/gensync/index.js:89:14)
This is my babel.config.js
:
module.exports = function (api) {
api.cache(true);
return {
presets: ['module:metro-react-native-babel-preset', 'module:@babel/preset-typescript'],
plugins: [
[
require.resolve('babel-plugin-module-resolver'),
{
root: ['./'],
extensions: [
'.ios.ts',
'.android.ts',
'.ts',
'.ios.tsx',
'.android.tsx',
'.tsx',
'.jsx',
'.js',
'.json',
],
alias: {
'@components': ['./src/components'],
'@screens': ['./src/screens/'],
'@shared': ['./src/shared/'],
'@static': ['./src/static/'],
'@stores': ['./src/stores/'],
'@styles': ['./src/styles/'],
},
},
],
[
'module:react-native-dotenv',
{
moduleName: '@env',
path: '.env',
blacklist: null,
whitelist: null,
safe: true,
allowUndefined: true,
},
],
'react-native-reanimated/plugin', // this plugin should be always at the end
],
};
};
And my package.json
(a reduced version in terms of dependencies for simplicity):
{
...
"dependencies": {
"react": "17.0.2",
// others not relevant
},
"devDependencies": {
"@babel/core": "7.17.8",
"@babel/preset-env": "7.16.11",
"@babel/runtime": "7.17.8",
"babel-plugin-module-resolver": "4.1.0",
"metro-react-native-babel-preset": "0.70.0",
"react-native-dotenv": "3.3.1",
// others not relevant
},
"resolutions": {
"@types/react": "^17"
}
}
I know that a similar question has been already asked, but it doesn't have any response and it has an issue building the project even in a local machine. I only have this issue in the pipeline.